Big_Mac_24 Big_Mac_24 - 23 days ago 15
iOS Question

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

Answer

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.

Comments