UICollectionView BackgroundView 问题

Posted 2023-03-14

【中文标题】UICollectionView BackgroundView 问题

【英文标题】：UICollectionView BackgroundView Issue

【发布时间】：2019-05-12 15:05:29

【问题描述】：

我正在尝试在UICollectionView 后面添加一个自定义的交互式视图（由图片中的黄色背景表示）。我发现最简单的方法是在我的UICollectionView 上使用backgroundView 属性。唯一的问题是，如果我在单元格之间添加间距，则背景视图在空格之间是可见的。为了解决这个问题，我将单元格间距设为 0，并通过在单元格中的 UIImageViews 周围添加边距（由紫色方块表示）然后将单元格的背景设为黑色来模仿黑色网格线。这对于单元格上方和下方的水平间距非常有效，但由于某种原因，背景视图仍然可以通过它们之间的狭窄垂直线看到。我确保单元格宽度正好是UICollectionView 的一半，并且minimumLineSpacing 和minimumInteritemSpacing 都是0.0。

【问题讨论】：

这两个你都试过了吗 - cell.backgroundColor = UIColor.black, cell.contentView.backgroundColor = UIColor.black

@VincentJoy 是的；它不会改变外观。

【参考方案1】：

我创建了与您相同的场景。使用以下代码对我来说效果很好。

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout 
    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad() 
        super.viewDidLoad()
        let backView = UIView(frame: self.collectionView.bounds)
        backView.backgroundColor = UIColor(red: 0.9372549057, green: 0.3490196168, blue: 0.1921568662, alpha: 1)
        self.collectionView.backgroundView = backView
    

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
        return 30
    

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
        cell.backgroundColor = UIColor(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1)
        cell.layer.borderWidth = 5.0
        return cell
    

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
        return CGSize(width: collectionView.bounds.width / 2, height: collectionView.bounds.width / 2)
    

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets 
        return UIEdgeInsets(top: 100, left: 0, bottom: 100, right: 0)
    

唯一的一点，我使用了单元格的borderWidth 进行说明。您可以根据自己的要求进行更改。

【讨论】：

我创建了一个新项目并测试了您的代码，但它并没有解决问题。这主要发生在 iPhone X 上，如果有帮助的话。

你用过完全相同的代码吗？因为它在我的最后工作正常。

是的，我使用了完全相同的代码。我在另一个线程中弄清楚了问题所在，并将其发布在答案中。干杯！

【参考方案2】：

对于任何感兴趣的人，我在此线程中发现了一个解决方案：https://***.com/a/55561816/5225013

这是我从@Asike 使用的代码，稍作修改以适合我的用例。如果它们的组合计算宽度不完全等于 collectionView 的总宽度，它会增加单元格宽度。由于小数位，在某些屏幕尺寸/比例尺上会出现这种情况。

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
    let columns = 2
    let width = Int(collectionView.bounds.width)
    let side = width / columns
    let rem = width % columns
    let addOne = indexPath.row % columns < rem
    let ceilWidth = addOne ? side + 1 : side
    return CGSize(width: ceilWidth, height: side)