如何让多个ImageView随屏幕尺寸缩放且保持相对位置不变？

针对你用多个ImageView制作省份地图、小屏幕上出现布局溢出或错乱的问题，给你几个实用的实现思路：

方法一：用ConstraintLayout实现比例缩放容器 #

1. 给整个地图外层套一个ConstraintLayout，设置它的宽高比与地图原始比例一致（比如荷兰地图的实际宽高比），通过app:layout_constraintDimensionRatio属性实现：

   <androidx.constraintlayout.widget.ConstraintLayout
       android:id="@+id/map_container"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       app:layout_constraintDimensionRatio="16:9" <!-- 替换为你的地图实际宽高比 -->
       app:layout_constraintTop_toTopOf="parent"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintEnd_toEndOf="parent">
   
       <!-- 所有省份ImageView和按钮都放在这个容器内 -->
   </androidx.constraintlayout.widget.ConstraintLayout>
   

2. 所有省份ImageView都以这个容器为基准，用layout_constraint*_to*Of设置相对位置，宽高可使用match_constraint结合百分比属性（app:layout_constraintWidth_percent、app:layout_constraintHeight_percent），确保子View相对容器的比例固定。这样容器会根据屏幕尺寸自动缩放，内部所有View的相对位置完全保持一致。

方法二：自定义缩放ViewGroup #

如果ConstraintLayout的比例约束无法满足需求，可以自定义ViewGroup实现整体缩放：

1. 创建ScalingViewGroup继承自ViewGroup，重写测量与布局逻辑：

   class ScalingViewGroup @JvmOverloads constructor(
       context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
   ) : ViewGroup(context, attrs, defStyleAttr) {
   
       private var scaleFactor = 1f
       private var originalWidth = 0
       private var originalHeight = 0
   
       override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
           // 先测量子View原始尺寸
           measureChildren(widthMeasureSpec, heightMeasureSpec)
           originalWidth = measuredWidth
           originalHeight = measuredHeight
   
           // 计算以屏幕宽高中较小值为基准的缩放比例
           val screenWidth = MeasureSpec.getSize(widthMeasureSpec)
           val screenHeight = MeasureSpec.getSize(heightMeasureSpec)
           scaleFactor = min(screenWidth.toFloat() / originalWidth, screenHeight.toFloat() / originalHeight)
   
           // 设置ViewGroup最终尺寸
           val finalWidth = (originalWidth * scaleFactor).toInt()
           val finalHeight = (originalHeight * scaleFactor).toInt()
           setMeasuredDimension(finalWidth, finalHeight)
       }
   
       override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
           // 按缩放比例布局所有子View
           for (i in 0 until childCount) {
               val child = getChildAt(i)
               val left = (child.left * scaleFactor).toInt()
               val top = (child.top * scaleFactor).toInt()
               val right = (child.right * scaleFactor).toInt()
               val bottom = (child.bottom * scaleFactor).toInt()
               child.layout(left, top, right, bottom)
           }
       }
   }
   

2. 在布局中用这个ViewGroup包裹所有省份ImageView和按钮，原始布局按地图实际尺寸设置即可，运行时它会自动缩放整个地图，完全保留子View的相对位置。

方法三：改用VectorDrawable实现单ImageView地图 #

如果能将省份制作成矢量路径，这个方案更简洁：

1. 将每个省份做成VectorDrawable的<path>，放在同一个<vector>文件中，给每个路径设置唯一android:name：

   <vector xmlns:android="http://schemas.android.com/apk/res/android"
       android:width="1000dp"
       android:height="800dp"
       android:viewportWidth="1000"
       android:viewportHeight="800">
   
       <path
           android:name="province_holland"
           android:pathData="M..."
           android:fillColor="#cccccc"/>
       <!-- 其他省份路径 -->
   </vector>
   

2. 在代码中获取可修改的VectorDrawable实例，找到对应路径修改颜色：

   val mapDrawable = mapImageView.drawable.mutate() as VectorDrawableCompat
   val path = mapDrawable.findPathByName("province_holland")
   path?.fillColor = ContextCompat.getColor(context, R.color.highlight_color)
   

3. 给ImageView设置android:scaleType="fitCenter"即可自动适配屏幕，同时保持地图比例；按钮用ConstraintLayout绑定到ImageView的对应位置，会跟着地图一起缩放，不会错位。

按钮适配注意事项 #

不管用哪种方案，按钮都要和对应省份View放在同一个缩放容器内，或者用约束绑定到省份ImageView的特定位置（比如app:layout_constraintTop_toTopOf="@id/province_xxx"），确保缩放时按钮与省份同步移动、缩放。

内容的提问来源于stack exchange，提问作者SinglePaper