CODEWITHSUNDEEP
iosuicollectionviewuicollectionviewcell
Big_Mac
Big_Mac

Reputation: 3034

Weird drawing when using UICollectionView created programmatically

I am creating a UICollectionView and its cells programatically. In my custom UICollectionView the only method that is implemented is layoutSubviews. Here is the code below for setting up my collection view and handling the delegation. As you can see from the gif once in a while a cell loads correctly, but the majority are misaligned or off screen. I suspect it is something wrong with how they are reused. I usually use tableviews and scrollviews, so I'm not as comfortable with collection views. How can I fix this?

enter image description here

let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .horizontal
    layout.minimumInteritemSpacing = 0
    layout.minimumLineSpacing = 0
    layout.itemSize = CGSize(width: 160, height: 200)
    featuredCollectionView = UICollectionView(frame: frame), collectionViewLayout: layout)

featuredCollectionView.delegate = self
    featuredCollectionView.dataSource = self
    featuredCollectionView.register(ItemCollectionViewCell.self, forCellWithReuseIdentifier:
    "cell")

// MARK: CollectionView Delegate 

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat
{
    return 8
}

func numberOfSections(in collectionView: UICollectionView) -> Int
{
    return 1
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
{
    return CGSize(width: 160, height: featuredCollectionView.frame.size.height)
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
{
    return featuredItems.count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
{
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! ItemCollectionViewCell
    cell.item = featuredItems[indexPath.row]

    return cell
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets
{
    return UIEdgeInsetsMake(0, 0, 0, 0)
}

Upvotes: 0

Views: 240

Answers (1)

Kyle Zaragoza
Kyle Zaragoza

Reputation: 1100

To see your main issue, check the frame of backgroundCardView, you're setting it based on the cell's origin within the collection view.

backgroundCardView.frame = CGRect(x: self.frame.origin.x + 8, y: self.frame.origin.x + 8, width: self.frame.size.width - 16, height: self.frame.size.height - 16)

This is going to be way outside the cell's bounds, which is why it appears to be laying out incorrectly. Also, you should add subviews to the cell's contentView instead of directly to it's view. As noted in other comments, you shouldn't add views in layoutSubviews. A better place would be inside an init method.

Upvotes: 1

Related Questions