UICollectionView 单元格重叠迅速

Question

I am creating a UICollectionView, but when a new cell is added to the view it is partially overlapping the previous cell. Below is my code:

 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

}

How do I make sure the cells don't overlap?

Answer 1

You shouldn't assign the frame value by yourself in the cellForItemAtIndexPath method.

The more suitably way is to do this in the UICollectionViewLayout , then set it as the collectionview's layout property. Actually, you need a UICollectionViewLayout instance when you init the UICollectionView instance.

Or simply, use the UICollectionViewFlowLayout which system provides to implement the flow layout conveniently, tell it the size of each cell, spaces between them, and some other informations by its delegate. The layout instance will arrange all for you.

For example.

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;
    }
}

For more infomation, read the doc .

Answer 2

For me it was the wrong cell width and height specified in the size inspector of the view controller. Just set that properly possibly the same as your nib file and it may work.

Please see screenshot for clarity.

Answer 3

All what you need is to extend you ViewController from UICollectionViewDelegateFlowLayout and implement 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
    }
    
}

Answer 4

对我来说，我只需在集合视图选项中将“估计大小”更改为“无”即可解决问题，如此处的屏幕截图所示：屏幕截图