Swift4中TableViewCell内ScrollView分页异常及图片显示问题求助

你遇到的这两个问题在UITableViewCell里做图片轮播时真的挺常见的，我帮你拆解下原因和对应的解决办法，结合你的代码来调整：

一、分页模式下出现额外页面的问题 #

为啥会出现这种情况？ #

• 要么是ScrollView的内容宽度计算错了，比如复用cell的时候没重置contentWidth，导致旧的宽度累加进去；
• 要么是cell复用后，之前的图片视图没删掉，留在ScrollView里，导致内容尺寸变大，分页数量自然不对；
• 还有可能是PageControl的页数没和实际图片数量绑定，显示的页数和真实内容不匹配。

怎么改？ #

1. 先处理cell复用的问题：重写prepareForReuse方法，每次复用前把旧的图片清掉，重置相关变量：

override func prepareForReuse() {
    super.prepareForReuse()
    contentWidth = 0.0
    // 只清除UIImageView，保留pageControl这些系统控件
    scrollView.subviews.forEach {
        if $0 is UIImageView {
            $0.removeFromSuperview()
        }
    }
    pageControl.currentPage = 0
}

2. 准确计算ScrollView的内容尺寸：写一个专门的方法来设置图片，确保每一张图的宽度都和ScrollView一致，总宽度是「图片数量 × ScrollView宽度」：

// 假设你有一个图片数组需要传入，比如叫imageList
func setupImages(with imageList: [UIImage]) {
    // 先清掉旧视图（也可以在prepareForReuse里做，这里双重保险）
    scrollView.subviews.forEach {
        if $0 is UIImageView { $0.removeFromSuperview() }
    }
    contentWidth = 0.0
    // 把PageControl的页数和图片数量绑定
    pageControl.numberOfPages = imageList.count
    
    for (index, image) in imageList.enumerated() {
        let imageView = UIImageView(image: image)
        // 每张图的位置和尺寸严格匹配ScrollView的宽高
        imageView.frame = CGRect(
            x: contentWidth,
            y: 0,
            width: scrollView.bounds.width,
            height: scrollView.bounds.height
        )
        // 这里先设置好图片填充模式，顺便解决第二个问题
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        scrollView.addSubview(imageView)
        
        contentWidth += scrollView.bounds.width
    }
    
    // 最后准确设置ScrollView的内容尺寸
    scrollView.contentSize = CGSize(width: contentWidth, height: scrollView.bounds.height)
}

3. 完善awakeFromNib的配置：确保ScrollView的分页开启，没有多余的内边距：

override func awakeFromNib() {
    super.awakeFromNib()
    scrollView.delegate = self
    scrollView.isPagingEnabled = true
    scrollView.showsHorizontalScrollIndicator = false
    scrollView.contentInset = .zero // 避免内边距导致的额外空白
}

二、图片无法铺满屏幕且存在空白的问题 #

常见诱因： #

• 图片视图的frame没和ScrollView对齐，宽高没设置对；
• 图片的显示模式不对，比如用了.scaleAspectFit会留空白，没开裁剪；
• 如果cell是动态高度的，ScrollView的bounds变化后，图片的frame没跟着更新。

解决办法： #

1. 设置正确的图片显示模式：刚才在setupImages里已经加了这两行，这是关键：

imageView.contentMode = .scaleAspectFill // 按比例填充，铺满视图
imageView.clipsToBounds = true // 超出部分裁剪掉，避免图片漏出来

如果你不在乎图片变形，想要完全铺满也可以用.scaleToFill，根据你的需求选就行。

2. 监听cell布局变化：重写layoutSubviews，当cell的尺寸变化时，重新调整图片和ScrollView的尺寸：

override func layoutSubviews() {
    super.layoutSubviews()
    // 遍历所有图片视图，重新设置frame
    scrollView.subviews.forEach { view in
        guard let imageView = view as? UIImageView else { return }
        let index = scrollView.subviews.firstIndex(of: imageView) ?? 0
        imageView.frame = CGRect(
            x: CGFloat(index) * scrollView.bounds.width,
            y: 0,
            width: scrollView.bounds.width,
            height: scrollView.bounds.height
        )
    }
    // 更新ScrollView的内容尺寸
    scrollView.contentSize = CGSize(
        width: CGFloat(pageControl.numberOfPages) * scrollView.bounds.width,
        height: scrollView.bounds.height
    )
}

3. 检查约束：确保你的ScrollView在cell里的约束是leading、trailing、top、bottom都和cell的对应边缘对齐，没有额外的间距，这样ScrollView的宽度才会和cell一致，图片才能铺满整个ScrollView区域。

最后别忘了实现UIScrollView的代理方法，让PageControl跟着滚动更新：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let currentPage = round(scrollView.contentOffset.x / scrollView.bounds.width)
    pageControl.currentPage = Int(currentPage)
}

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