Magoo
Magoo

Reputation: 2638

Small gaps appearing in UICollectionView section

Very strange issue on UICollectionView...

I have a UIImageView below a UICollectionView and I noticed there are multiple hairline / 1px clear lines appearing at certain points in the collectionView... one appearing below a description cell...

first

Assuming it was a problem with the cell, I've investigated every way I could think with no joy. I've doubled up this cell to illustrate the issue happens in between IndexPath section 1 and item 6 and 7

Even when this cell is doubled up... the divider line cell below is part of the same section so it's definitely not a footer or a header???

second

My flowLayout is

flowLayout.scrollDirection = .vertical
flowLayout.minimumInteritemSpacing = 0.0
flowLayout.minimumLineSpacing = 0.0
flowLayout.sectionInset = UIEdgeInsetsMake(0.0, 0.0, 0.0, 0.0)
flowLayout.headerReferenceSize = .zero
flowLayout.footerReferenceSize = .zero

I made the background of the collectionView red to highlight the issue... I don't have a clue what the issue is.

View Hierarchy

view

Update

changing flowLayout.minimumLineSpacing = 0.0 to -1.0 'fixes' the issue in some places... why wouldn't this value remain accurate along all cells? and remain at 0.0??

flowLayout.scrollDirection = .vertical
flowLayout.minimumInteritemSpacing = 0.0
flowLayout.minimumLineSpacing = -1.0
flowLayout.sectionInset = .zero

Upvotes: 13

Views: 726

Answers (3)

Raal
Raal

Reputation: 1

I tried all the answers and nothing was working for me. Finally, I ended up adjusting my collectionView width so that the number of cells evenly divided into it.

Which solved the problem for me.

// Adjust the width of the collectionView, so that our cells divide evenly into it
CGFloat widthModulus = fmod(collectionViewWidth, numberOfCells);
CGFloat newCollectionViewWidth = collectionViewWidth - widthModulus;

Upvotes: 0

King Reload
King Reload

Reputation: 2952

To add on to the answer of @Magoo:

A CGSize structure is sometimes used to represent a distance vector, rather than a physical size. As a vector, its values can be negative. To normalize a CGRect structure so that its size is represented by positive values, call the standardized function.

In Swift 2.x you will need to use:

return CGSizeMake(width:collectionView.bounds.size.width,height:ceil(calculatedHeight)

As of Swift 3 you can no longer use CGSizeMake:

return CGSize(width:collectionView.bounds.size.width,height:ceil(calculatedHeight)
  • The ceil function rounds a number UP to the nearest integer, if necessary.
  • For rounding down you have floor.

Upvotes: 1

Magoo
Magoo

Reputation: 2638

I've only gone and solved it... hours after putting a 300 bounty on it..

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

 // calculated CGSize...

  return CGSize(width:collectionView.bounds.size.width,height:ceil(calculatedHeight) 

}

remember @2x @3x always ceil your calculated cells... UICollectionViews can't hack 0.5 points

Upvotes: 10

Related Questions