如何实现类似Instagram或Facebook的ImageView捏合缩放效果？

嘿，我刚好做过类似Instagram/Facebook feed里的图片捏合缩放功能，给你分享下具体的实现思路和代码示例，分Android和iOS两个平台来说：

不管哪个平台，核心都是处理三类手势：

• 捏合手势：用来调整图片的缩放比例
• 平移手势：缩放后可以拖动查看图片细节
• 松手后的回弹：让图片回到初始的显示状态（避免影响列表滚动和其他交互）

另外还要注意边界限制：比如缩放不能太小（至少保持原图大小），平移时不能让图片完全移出可视区域。

Android 实现方案 #

我们可以自定义一个ZoomImageView，通过ScaleGestureDetector和GestureDetector来处理手势，再配合属性动画实现回弹效果：

class ZoomImageView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : AppCompatImageView(context, attrs, defStyleAttr) {

    private var scaleGestureDetector: ScaleGestureDetector
    private var gestureDetector: GestureDetector
    private var currentScale = 1.0f
    private var maxScale = 3.0f
    private var minScale = 1.0f
    private var offsetX = 0f
    private var offsetY = 0f
    private var lastTouchX = 0f
    private var lastTouchY = 0f

    init {
        scaleGestureDetector = ScaleGestureDetector(context, ScaleListener())
        gestureDetector = GestureDetector(context, GestureListener())
        scaleType = ScaleType.MATRIX
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        // 优先处理缩放手势
        scaleGestureDetector.onTouchEvent(event)
        // 处理平移和点击
        gestureDetector.onTouchEvent(event)

        when (event.action) {
            MotionEvent.ACTION_UP -> {
                // 松手后回弹到初始状态
                resetViewWithAnimation()
            }
            MotionEvent.ACTION_MOVE -> {
                if (currentScale > minScale) {
                    // 只有缩放后才允许平移
                    val deltaX = event.x - lastTouchX
                    val deltaY = event.y - lastTouchY
                    updateOffset(deltaX, deltaY)
                    updateMatrix()
                }
                lastTouchX = event.x
                lastTouchY = event.y
            }
        }
        return true
    }

    private inner class ScaleListener : ScaleGestureDetector.SimpleOnScaleGestureListener() {
        override fun onScale(detector: ScaleGestureDetector): Boolean {
            val scaleFactor = detector.scaleFactor
            currentScale = (currentScale * scaleFactor).coerceIn(minScale, maxScale)
            updateMatrix()
            return true
        }
    }

    private inner class GestureListener : GestureDetector.SimpleOnGestureListener() {
        override fun onDown(e: MotionEvent): Boolean {
            lastTouchX = e.x
            lastTouchY = e.y
            // 拦截事件，避免列表滚动
            parent.requestDisallowInterceptTouchEvent(true)
            return true
        }
    }

    private fun updateOffset(deltaX: Float, deltaY: Float) {
        val imageWidth = drawable.intrinsicWidth * currentScale
        val imageHeight = drawable.intrinsicHeight * currentScale

        // 限制X轴偏移：不能让图片左右完全移出屏幕
        offsetX = (offsetX + deltaX).coerceIn(
            -(imageWidth - width).coerceAtLeast(0f),
            (imageWidth - width).coerceAtLeast(0f)
        )
        // 限制Y轴偏移：不能让图片上下完全移出屏幕
        offsetY = (offsetY + deltaY).coerceIn(
            -(imageHeight - height).coerceAtLeast(0f),
            (imageHeight - height).coerceAtLeast(0f)
        )
    }

    private fun updateMatrix() {
        val matrix = Matrix()
        // 缩放
        matrix.postScale(currentScale, currentScale, width / 2f, height / 2f)
        // 平移
        matrix.postTranslate(offsetX, offsetY)
        imageMatrix = matrix
    }

    private fun resetViewWithAnimation() {
        ValueAnimator.ofFloat(currentScale, minScale).apply {
            duration = 300
            addUpdateListener { animation ->
                currentScale = animation.animatedValue as Float
                offsetX = 0f
                offsetY = 0f
                updateMatrix()
            }
            start()
        }
        // 允许列表重新拦截事件
        parent.requestDisallowInterceptTouchEvent(false)
    }
}

使用的时候直接在布局里替换普通的ImageView就行，注意如果是在RecyclerView里，这个自定义View会自动处理和列表的触摸冲突。

iOS 实现方案 #

iOS上可以通过给UIImageView添加UIPinchGestureRecognizer和UIPanGestureRecognizer来实现，同样配合UI动画做回弹：

class ZoomImageView: UIImageView {
    private var currentScale: CGFloat = 1.0
    private let maxScale: CGFloat = 3.0
    private let minScale: CGFloat = 1.0
    private var offsetX: CGFloat = 0.0
    private var offsetY: CGFloat = 0.0
    private var lastTouchPoint: CGPoint = .zero

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupGestures()
        isUserInteractionEnabled = true
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupGestures()
        isUserInteractionEnabled = true
    }

    private func setupGestures() {
        let pinchGesture = UIPinchGestureRecognizer(target: self, action: #selector(handlePinch(_:)))
        let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePan(_:)))
        panGesture.delegate = self
        addGestureRecognizer(pinchGesture)
        addGestureRecognizer(panGesture)
    }

    @objc private func handlePinch(_ gesture: UIPinchGestureRecognizer) {
        let scaleFactor = gesture.scale
        currentScale = max(min(currentScale * scaleFactor, maxScale), minScale)
        updateTransform()
        gesture.scale = 1.0 // 重置缩放因子，避免累积

        if gesture.state == .ended {
            resetViewWithAnimation()
        }
    }

    @objc private func handlePan(_ gesture: UIPanGestureRecognizer) {
        guard currentScale > minScale else { return }

        let translation = gesture.translation(in: self)
        offsetX += translation.x
        offsetY += translation.y
        updateTransform()
        gesture.setTranslation(.zero, in: self)

        // 限制偏移范围，不让图片完全移出屏幕
        let imageWidth = (image?.size.width ?? 0) * currentScale
        let imageHeight = (image?.size.height ?? 0) * currentScale
        offsetX = max(min(offsetX, (imageWidth - bounds.width)/2), -(imageWidth - bounds.width)/2)
        offsetY = max(min(offsetY, (imageHeight - bounds.height)/2), -(imageHeight - bounds.height)/2)

        if gesture.state == .ended {
            resetViewWithAnimation()
        }
    }

    private func updateTransform() {
        var transform = CGAffineTransform.identity
        transform = transform.scaledBy(x: currentScale, y: currentScale)
        transform = transform.translatedBy(x: offsetX, y: offsetY)
        self.transform = transform
    }

    private func resetViewWithAnimation() {
        UIView.animate(withDuration: 0.3) {
            self.currentScale = self.minScale
            self.offsetX = 0.0
            self.offsetY = 0.0
            self.transform = .identity
        }
        // 通知父视图可以重新处理滚动事件（比如UITableView）
        superview?.gestureRecognizers?.forEach {
            if let scrollGesture = $0 as? UIPanGestureRecognizer {
                scrollGesture.isEnabled = true
            }
        }
    }
}

extension ZoomImageView: UIGestureRecognizerDelegate {
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        // 当正在缩放时，禁止列表滚动
        if gestureRecognizer is UIPinchGestureRecognizer || currentScale > minScale {
            superview?.gestureRecognizers?.forEach {
                if let scrollGesture = $0 as? UIPanGestureRecognizer {
                    scrollGesture.isEnabled = false
                }
            }
            return false
        }
        return true
    }
}

使用的时候把UIImageView换成这个自定义类，就能在feed里直接捏合缩放图片了。

• 缩放比例可以根据需求调整maxScale和minScale
• 如果需要支持双击放大/缩小，可以在手势里添加双击检测
• 列表里使用时一定要处理触摸事件冲突，避免图片缩放和列表滚动同时触发

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