SwiftUI中UIScrollView缩放ImageView垂直边缘不回弹问题

问题分析 #

当前代码中UIImageView的约束被固定为和UIScrollView宽高一致，导致scrollView无法正确计算内容尺寸，加上alwaysBounceVertical始终设为true，最终造成图片放大后垂直拖拽可无限超出屏幕的问题。苹果相册的逻辑是：仅当图片缩放后内容尺寸超过容器时，才允许边缘回弹，且拖拽到边缘后会限制偏移并回弹。

修复方案及代码修改 #

以下是调整后的完整代码，直接替换原ZoomableImage结构即可：

struct ZoomableImage: UIViewRepresentable {
    let image: UIImage

    func makeUIView(context: Context) -> UIScrollView {
        let scrollView = UIScrollView()
        scrollView.delegate = context.coordinator
        scrollView.maximumZoomScale = 5.0
        scrollView.minimumZoomScale = 1.0
        scrollView.bouncesZoom = true
        // 初始关闭垂直/水平回弹，后续根据图片尺寸动态调整
        scrollView.alwaysBounceVertical = false
        scrollView.alwaysBounceHorizontal = false
        scrollView.showsVerticalScrollIndicator = false
        scrollView.showsHorizontalScrollIndicator = false
        // 禁用safeArea自动调整，避免偏移计算错误
        scrollView.contentInsetAdjustmentBehavior = .never

        let imageView = UIImageView(image: image)
        imageView.contentMode = .scaleAspectFit
        imageView.tag = 1
        imageView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.addSubview(imageView)

        // 修正约束：让ImageView自适应图片尺寸，而非绑定scrollView宽高
        NSLayoutConstraint.activate([
            imageView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
            imageView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
            imageView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
            imageView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
            // 确保ImageView最小尺寸不小于scrollView，避免缩小后无法居中
            imageView.widthAnchor.constraint(greaterThanOrEqualTo: scrollView.frameLayoutGuide.widthAnchor),
            imageView.heightAnchor.constraint(greaterThanOrEqualTo: scrollView.frameLayoutGuide.heightAnchor)
        ])

        let doubleTap = UITapGestureRecognizer(
            target: context.coordinator,
            action: #selector(Coordinator.handleDoubleTap)
        )
        doubleTap.numberOfTapsRequired = 2
        scrollView.addGestureRecognizer(doubleTap)

        return scrollView
    }

    func updateUIView(_ uiView: UIScrollView, context: Context) {}

    func makeCoordinator() -> Coordinator {
        Coordinator()
    }

    class Coordinator: NSObject, UIScrollViewDelegate {
        func viewForZooming(in scrollView: UIScrollView) -> UIView? {
            scrollView.viewWithTag(1)
        }

        @objc func handleDoubleTap(_ gesture: UITapGestureRecognizer) {
            guard let scrollView = gesture.view as? UIScrollView else { return }
            let zoom = scrollView.zoomScale > scrollView.minimumZoomScale
                ? scrollView.minimumZoomScale
                : 2.0
            scrollView.setZoomScale(zoom, animated: true)
        }

        // 缩放完成后调整contentOffset，限制拖拽范围
        func scrollViewDidZoom(_ scrollView: UIScrollView) {
            guard let imageView = scrollView.viewWithTag(1) as? UIImageView else { return }
            
            // 计算水平方向偏移范围
            let horizontalInset = max((scrollView.bounds.width - imageView.frame.width) / 2, 0)
            // 计算垂直方向偏移范围
            let verticalInset = max((scrollView.bounds.height - imageView.frame.height) / 2, 0)
            
            // 设置contentInset，让图片始终居中
            scrollView.contentInset = UIEdgeInsets(top: verticalInset, left: horizontalInset, bottom: verticalInset, right: horizontalInset)
            
            // 动态控制回弹开关：仅当内容尺寸超过容器时允许回弹
            scrollView.alwaysBounceVertical = imageView.frame.height > scrollView.bounds.height
            scrollView.alwaysBounceHorizontal = imageView.frame.width > scrollView.bounds.width
        }
    }
}

关键修改点说明 #

1. 约束调整：
   • 移除ImageView与scrollView的宽高绑定，改为让ImageView填充scrollView的内容布局指南，同时设置最小宽高不小于scrollView，保证未缩放时图片居中显示。
2. 回弹逻辑动态控制：
   • 初始关闭alwaysBounceVertical和alwaysBounceHorizontal，在缩放完成后根据图片实际尺寸判断是否开启回弹，和苹果相册逻辑一致。
3. 缩放后偏移校准：
   • 在scrollViewDidZoom中计算contentInset，确保图片始终居中；同时限制contentOffset的范围，避免拖拽超出可视区域。
4. 禁用SafeArea自动调整：
   • 设置contentInsetAdjustmentBehavior = .never，避免系统自动添加的safeArea偏移导致计算错误。

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