UICollectionView 单元格快速重叠答案

【问题标题】：UICollectionView cells overlapping swiftUICollectionView 单元格快速重叠
【发布时间】：2015-08-06 10:23:02
【问题描述】：

我正在创建一个 UICollectionView，但是当一个新单元格被添加到视图中时，它与前一个单元格部分重叠。以下是我的代码：

 override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {


    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("CustomCell", forIndexPath: indexPath) as! CustomCell

    cell.frame.size.width = self.view.frame.width / 3
    cell.frame.size.height = self.view.frame.height / 4
    cell.backgroundView = imageView
    return cell

}

如何确保单元格不重叠？

【问题讨论】：

标签： ios swift uikit uicollectionview

【解决方案1】：

您不应该在cellForItemAtIndexPath 方法中自己分配帧值。

更合适的方法是在UICollectionViewLayout 中执行此操作，然后将其设置为collectionview 的布局属性。实际上，您在初始化UICollectionView 实例时需要一个UICollectionViewLayout 实例。

或者简单地说，使用系统提供的UICollectionViewFlowLayout来方便地实现流布局，通过它的委托告诉它每个单元格的大小、它们之间的空间以及一些其他信息。布局实例会为你安排好一切。

例如。

class MYViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

    //In viewDidLoad()
    var collectionViewFlowLayout = UICollectionViewFlowLayout()
    var myCollectionView = UICollectionView(frame: self.view.bounds, layout: collectionViewFlowLayout)
    // A flow layout works with the collection view’s delegate object to determine the size of items, headers, and footers in each section and grid. 
    // That delegate object must conform to the UICollectionViewDelegateFlowLayout protocol.
    myCollectionView.delegate = self
    myCollectionView.dataSource = self

    // MARK: UICollectionViewDelegateFlowLayout
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        return CGSizeMake(10, 10);
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
         return 10;
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 10;
    }
}

如需更多信息，请阅读doc。

【讨论】：

谢谢，你能给我举个例子吗？
@Horatio 请看我的例子。
很好的答案！谢谢！
@Horatio 很高兴为您提供帮助：)
所以你从minimunLineSpacingForSectionAtIndex和minimumInteritemSpacingForSectionAtIndex这两个实例方法中得到了重叠行为？

【解决方案2】：

对我来说，这是在视图控制器的尺寸检查器中指定的错误单元格宽度和高度。只需将其正确设置为可能与您的 nib 文件相同即可。

请看截图清楚。

【讨论】：

【解决方案3】：

您需要做的就是从 UICollectionViewDelegateFlowLayout 扩展您的 ViewController 并实现 sizeForItemAt ：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    
    if (collectionView == myCollectionView_1) {
        
        return CGSize(width: self.view.frame.width / 3, height: self.view.frame.height / 4)
        
    } else {
        
        return collectionView.frame.size
    }
    
}

【讨论】：

【解决方案4】：

对我来说，只需在集合视图选项中将 Estimated Size 更改为 None 即可解决问题。

参考请看下面的截图：

【讨论】：