Android开发求助：固定底层图片，实现上层遮罩图缩放/调整大小

嘿，我来帮你搞定这个需求！首先得明确：LinearLayout本身是线性排列布局，要让两张图片重叠实现遮罩效果，得在LinearLayout里嵌套一个FrameLayout（或ConstraintLayout）来承载这两张图，这样才能让上层遮罩图盖在底层固定图上面。下面是完整的实现方案：

第一步：完善XML布局 #

外层用你需要的LinearLayout，内部嵌套FrameLayout实现图片重叠。底层图片设置为固定大小，上层遮罩图片初始与底层同尺寸，后续我们给它加上缩放能力：

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <!-- 嵌套FrameLayout实现图片重叠 -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="250dp">

        <!-- 底层固定图片 -->
        <ImageView
            android:id="@+id/iv_bottom"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/bottom_image" />

        <!-- 上层可缩放的遮罩图片 -->
        <ImageView
            android:id="@+id/iv_mask"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="matrix" <!-- 必须用matrix才能自定义缩放逻辑 -->
            android:src="@drawable/mask_image"
            android:alpha="0.6" /> <!-- 可选：调整遮罩透明度，让底层图更清晰可见 -->
    </FrameLayout>

</LinearLayout>

第二步：实现遮罩图片的缩放/调整功能 #

要让上层图片支持缩放，有两种方式可选：原生代码手写手势逻辑，或者用成熟的第三方库简化开发。

方式一：原生代码实现缩放与拖动 #

在Activity/Fragment中给遮罩ImageView添加触摸监听，处理缩放和拖动手势：

class MainActivity : AppCompatActivity() {
    private lateinit var ivMask: ImageView
    private lateinit var scaleGestureDetector: ScaleGestureDetector
    private lateinit var gestureDetector: GestureDetector
    private var scaleFactor = 1.0f // 初始缩放比例
    private var posX = 0f // 图片位移X
    private var posY = 0f // 图片位移Y
    private var pivotX = 0f // 缩放中心点X
    private var pivotY = 0f // 缩放中心点Y

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        ivMask = findViewById(R.id.iv_mask)

        // 初始化缩放手势检测器
        scaleGestureDetector = ScaleGestureDetector(this, ScaleListener())
        // 初始化拖动手势检测器
        gestureDetector = GestureDetector(this, GestureListener())

        // 给遮罩图片设置触摸监听
        ivMask.setOnTouchListener { _, event ->
            scaleGestureDetector.onTouchEvent(event)
            gestureDetector.onTouchEvent(event)
            true
        }
    }

    // 处理双指缩放逻辑
    private inner class ScaleListener : ScaleGestureDetector.SimpleOnScaleGestureListener() {
        override fun onScale(detector: ScaleGestureDetector): Boolean {
            scaleFactor *= detector.scaleFactor
            // 限制缩放范围，避免图片过小或过大
            scaleFactor = scaleFactor.coerceIn(0.5f, 3.0f)
            // 获取当前缩放的中心点
            pivotX = detector.focusX
            pivotY = detector.focusY
            updateImageMatrix()
            return true
        }
    }

    // 处理单指拖动逻辑
    private inner class GestureListener : GestureDetector.SimpleOnGestureListener() {
        override fun onScroll(
            e1: MotionEvent?,
            e2: MotionEvent,
            distanceX: Float,
            distanceY: Float
        ): Boolean {
            posX -= distanceX
            posY -= distanceY
            updateImageMatrix()
            return true
        }
    }

    // 更新图片的Matrix，应用缩放和位移效果
    private fun updateImageMatrix() {
        val matrix = Matrix()
        matrix.postScale(scaleFactor, scaleFactor, pivotX, pivotY)
        matrix.postTranslate(posX, posY)
        ivMask.imageMatrix = matrix
    }
}

方式二：使用第三方库简化开发 #

如果不想自己手写复杂的手势逻辑，推荐用PhotoView库，它已经封装了双指缩放、单指拖动等功能，开箱即用：

1. 先在build.gradle(app)中添加依赖：

dependencies {
    implementation 'com.github.chrisbanes:PhotoView:2.3.0'
}

2. 把XML中的遮罩ImageView替换为PhotoView：

<com.github.chrisbanes.photoview.PhotoView
    android:id="@+id/pv_mask"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/mask_image"
    android:alpha="0.6" />

这样不需要写任何触摸逻辑，PhotoView会自动支持缩放和拖动，完全满足你的需求！

注意事项 #

• 强烈不推荐用纯LinearLayout通过负margin实现图片重叠，这种方式灵活性极差，维护起来很麻烦，嵌套FrameLayout/ConstraintLayout是更规范的方案。
• 原生实现缩放时，遮罩图片的scaleType必须设为matrix，否则自定义的Matrix不会生效；用PhotoView则无需额外设置。
• 可以通过调整遮罩图片的alpha属性，控制遮罩的透明度，让底层图片的显示效果更符合预期。

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