如何缩放UICollectionView的全屏图片？解决退出后图片消失问题

问题1：退出全屏后图片消失 #

你的判断正确，直接调用sender.view?.removeFromSuperview()会把原CollectionViewCell从视图层级彻底移除，而CollectionView无法自动恢复该cell，导致图片消失。正确做法是不直接操作原cell，而是创建独立的UIImageView展示全屏图片，让原cell继续留在CollectionView中。

问题2：全屏图片添加缩放功能 #

必须使用UIScrollView实现缩放，它内置了缩放相关API，只需配置参数并实现对应代理方法即可。

完整修改代码 #

1. 重写didSelectItemAt方法，改用独立ImageView+ScrollView实现全屏与缩放

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    let post = posts[indexPath.row]
    let alert = UIAlertController(title: "FullScreen", message: "Are you sure you want to see the image fullscreen?", preferredStyle: .alert)
    
    let actionYes = UIAlertAction(title: "Yes", style: .default) { [weak self] _ in
        guard let self = self else { return }
        
        // 创建全屏滚动视图
        let scrollView = UIScrollView(frame: UIScreen.main.bounds)
        scrollView.backgroundColor = .magenta
        scrollView.minimumZoomScale = 1.0
        scrollView.maximumZoomScale = 3.0 // 设置最大放大倍数
        scrollView.delegate = self
        scrollView.tag = 999 // 标记方便后续查找
        
        // 创建显示原图的ImageView
        let fullScreenImageView = UIImageView(frame: scrollView.bounds)
        fullScreenImageView.contentMode = .scaleAspectFit
        fullScreenImageView.tag = 1000
        
        // 加载原图（替换为post.url而非缩略图）
        if let url = URL(string: post.url) {
            fullScreenImageView.downaloadImage(from: url)
        }
        
        // 添加点击退出手势
        let tap = UITapGestureRecognizer(target: self, action: #selector(self.dismissFullscreenImage))
        scrollView.addGestureRecognizer(tap)
        
        // 将视图层级加入主界面
        scrollView.addSubview(fullScreenImageView)
        self.view.addSubview(scrollView)
        
        // 隐藏导航栏和TabBar
        self.navigationController?.isNavigationBarHidden = true
        self.tabBarController?.tabBar.isHidden = true
    }
    
    let actionNo = UIAlertAction(title: "No", style: .default)
    alert.addAction(actionNo)
    alert.addAction(actionYes)
    present(alert, animated: true)
}

2. 实现UIScrollViewDelegate的缩放代理方法

在ViewController的extension中添加协议并实现方法：

extension ViewController: UIScrollViewDelegate {
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return scrollView.viewWithTag(1000) // 返回需要缩放的ImageView
    }
}

3. 修改退出全屏方法

@objc func dismissFullscreenImage(sender: UITapGestureRecognizer) {
    let alert2 = UIAlertController(title: "Go Back", message: "Are you sure you want to go back?", preferredStyle: .alert)
    
    let actionYes2 = UIAlertAction(title: "Yes", style: .default) { [weak self] _ in
        guard let self = self else { return }
        
        // 恢复导航栏和TabBar
        self.navigationController?.isNavigationBarHidden = false
        self.tabBarController?.tabBar.isHidden = false
        
        // 移除全屏滚动视图（原CollectionViewCell不受影响）
        if let scrollView = self.view.viewWithTag(999) {
            scrollView.removeFromSuperview()
        }
    }
    
    let actionNo2 = UIAlertAction(title: "No", style: .default)
    alert2.addAction(actionNo2)
    alert2.addAction(actionYes2)
    self.present(alert2, animated: true)
}

额外优化建议 #

• 图片加载时添加占位图，避免界面空白
• 给全屏显示/退出过程添加淡入淡出动画，提升体验
• 给downaloadImage方法增加URL为空的判断，避免崩溃

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