Swift实现UITableView内嵌图片仿IG缩放时无法全屏显示问题求解

问题根因 #

你的UIImageView是UITableViewCell的子视图，存在两层限制导致无法全屏缩放：

• 裁剪属性限制：你只关闭了cell本身的clipsToBounds，但UITableView、UITableViewCell的contentView默认都开启了裁剪，超出范围的内容会被直接裁掉
• 视图层级限制：imageView的坐标系基于cell，就算关闭所有裁剪，也无法脱离cell的层级限制覆盖全屏，滚动列表时放大的图片还会出现错位问题

方案1：快速修复（仅测试用，不推荐线上使用） #

只要补充三个位置的裁剪关闭配置，就能临时实现全屏可见的缩放效果：

1. 在ViewController的viewDidLoad中添加tableView的裁剪关闭：

tableView.clipsToBounds = false

2. 在cellForRowAt方法中补充contentView的裁剪关闭：

cell.contentView.clipsToBounds = false

该方案的问题是缩放时图片仍属于cell层级，滚动列表时放大的图片会跟随cell移动，体验不符合IG的交互逻辑。

方案2：IG同款标准实现（推荐） #

IG的实现逻辑是缩放开始时把图片从cell移到全局Window/当前控制器的根视图层级，完全脱离cell限制，缩放结束后再动画放回cell，具体修改代码如下：

1. 给自定义Cell添加缩放开始回调

在Cell类顶部添加回调定义，缩放触发时通知控制器：

class cell: UITableViewCell, UIGestureRecognizerDelegate {
    // 新增回调：参数为当前图片、图片在全局窗口的坐标
    typealias ZoomStartCallback = (UIImage, CGRect) -> Void
    var zoomStartCallback: ZoomStartCallback?
    // 原有属性保持不变
    // ...

修改Cell中pinch手势的began状态逻辑，触发缩放时回调给控制器，隐藏原图片：

@objc func pinch(sender: UIPinchGestureRecognizer) {
    if sender.state == .began {
        let currentScale = self.picture.frame.size.width / self.picture.bounds.size.width
        let newScale = currentScale * sender.scale
        if newScale > 1 {
            self.zoomEnabled = true
            // 转换图片坐标到全局窗口
            let globalFrame = picture.convert(picture.bounds, to: UIApplication.shared.keyWindow)
            // 触发回调
            zoomStartCallback?(picture.image ?? UIImage(), globalFrame)
            // 隐藏cell内的原图片
            picture.isHidden = true
            return
        }
    }
    // 原有changed、ended逻辑可以删掉，移到控制器处理
    // ...
}

2. 给ViewController添加全局缩放处理逻辑

在ViewController中新增过渡图片相关属性：

class ViewController: UIViewController, UITableViewDelegate, UIGestureRecognizerDelegate {
    @IBOutlet weak var tableView: UITableView!
    // 新增属性
    var transitionImgView: UIImageView?
    var originalImgFrame: CGRect = .zero
    var zoomEnabled = false
    var imgCenter: CGPoint?
    // 原有属性保持不变
    // ...

在cellForRowAt中接收Cell的回调，创建全局过渡图片：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! cell
    // 原有逻辑保持不变
    // ...
    // 新增回调处理
    cell.zoomStartCallback = { [weak self] image, globalFrame in
        guard let self = self else { return }
        // 创建过渡图片，和原图片位置大小完全一致
        let imgView = UIImageView(frame: globalFrame)
        imgView.image = image
        imgView.contentMode = .scaleAspectFill
        imgView.clipsToBounds = true
        imgView.isUserInteractionEnabled = true
        // 加到当前控制器的根视图最上层，覆盖所有内容
        self.view.addSubview(imgView)
        self.transitionImgView = imgView
        self.originalImgFrame = globalFrame
        // 给过渡图片加手势
        let pinch = UIPinchGestureRecognizer(target: self, action: #selector(self.handlePinch(sender:)))
        pinch.delegate = self
        imgView.addGestureRecognizer(pinch)
        let pan = UIPanGestureRecognizer(target: self, action: #selector(self.handlePan(sender:)))
        pan.delegate = self
        imgView.addGestureRecognizer(pan)
    }
    return cell
}

把你之前写在Cell里的pan、pinch手势逻辑挪到ViewController中，缩放结束后动画放回原位置：

// 放在ViewController的类实现里
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
    return true
}

@objc func handlePan(sender: UIPanGestureRecognizer) {
    if self.zoomEnabled && sender.state == .began {
        self.imgCenter = sender.view?.center
    } else if self.zoomEnabled && sender.state == .changed {
        let translation = sender.translation(in: self.view)
        if let view = sender.view {
            view.center = CGPoint(x:view.center.x + translation.x,
                                  y:view.center.y + translation.y)
        }
        sender.setTranslation(.zero, in: self.view)
    }
}

@objc func handlePinch(sender: UIPinchGestureRecognizer) {
    guard let imgView = transitionImgView else { return }
    if sender.state == .began {
        let currentScale = imgView.frame.size.width / imgView.bounds.size.width
        let newScale = currentScale * sender.scale
        if newScale > 1 {
            self.zoomEnabled = true
        }
    } else if sender.state == .changed {
        let pinchCenter = CGPoint(x: sender.location(in: imgView).x - imgView.bounds.midX,
                                  y: sender.location(in: imgView).y - imgView.bounds.midY)
        let transform = imgView.transform.translatedBy(x: pinchCenter.x, y: pinchCenter.y)
            .scaledBy(x: sender.scale, y: sender.scale)
            .translatedBy(x: -pinchCenter.x, y: -pinchCenter.y)
        let currentScale = imgView.frame.size.width / imgView.bounds.size.width
        var newScale = currentScale * sender.scale
        if newScale < 1 {
            newScale = 1
            imgView.transform = CGAffineTransform(scaleX: newScale, y: newScale)
        } else {
            imgView.transform = transform
        }
        sender.scale = 1
    } else if sender.state == .ended || sender.state == .cancelled {
        // 缩放结束，动画回到原位置
        UIView.animate(withDuration: 0.3, animations: {
            imgView.transform = .identity
            imgView.frame = self.originalImgFrame
        }, completion: { [weak self] _ in
            guard let self = self else { return }
            // 移除过渡图片，显示cell里的原图片
            imgView.removeFromSuperview()
            self.transitionImgView = nil
            self.zoomEnabled = false
            if let cell = self.tableView.visibleCells.first(where: { ($0 as? cell)?.picture.isHidden == true }) as? cell {
                cell.picture.isHidden = false
            }
        })
    }
}

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