CODEWITHSUNDEEP
iosswiftuikituicollectionview
Horatio
Horatio

Reputation: 1861

UICollectionView cells overlapping swift

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?

Upvotes: 3

Views: 15073

Answers (4)

Yusuf Keskin
Yusuf Keskin

Reputation: 1

For me, simply changing Estimated Size to None at the collection view options fixed the problem.

For ref please check the below screenshot:

enter image description here

Upvotes: 0

Osama Remlawi
Osama Remlawi

Reputation: 2990

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

Upvotes: 0

DragonFire
DragonFire

Reputation: 4082

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.enter image description here

Upvotes: 0

liushuaikobe
liushuaikobe

Reputation: 2190

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.

Upvotes: 6

Related Questions