Home > OS >  interItemSpacing = .fixed(0) not always working in UICollectionViewLayout
interItemSpacing = .fixed(0) not always working in UICollectionViewLayout

Time:01-21

I have a problem with the interItemSpacing in my compositional layout. I have a layout group for each row that holds a couple of layout items (each has a different fractional width). I have set layoutGroup.interItemSpacing = .fixed(0)

Sometimes there is a one pixel line between items, although all items' fractionalWidths perfectly add up to 1.0. I calculate those fractional widths dynamically, depending on the content of the cell. An example:

Item 1: 0.2244798445859886
Item 2: 0.0999484835067196
Item 3: 0.2255459136606516
Item 4: 0.2244798445859886
Item 5: 0.2255459136606516

As you can see in the screenshot, there is a small space between the last two items: enter image description here

The strange thing is that this issues does not always occur. It appears to depend on the collection view size. Maybe some sort of internal rounding issue? Has anyone experienced this?

CodePudding user response:

The issue is due to rounding...

When the collection view lays out its cells, it rounds the x, y, width and height values to match the screen scale.

So, let's say your collection view width is 375 and, for the second cell, you say:

I want a cell width of 0.0999484835067196 * 375

which equals 37.48068131501985

On a @2x device (such as iPhone 8), that value will be rounded to the nearest one-half ... in this case 37.5

On a @3x device (such as iPhone 12 Pro), that value will be rounded to the nearest one-third ... in this case 37.3333333333...

Using your array of widths, on an iPhone 8 with a collection view width of 375, examining the cells after they've been laid-out results in this:

Cell: 0   Array: 0.2244798445859886   Calc: 84.17994171974573   Actual: 84.0
Cell: 1   Array: 0.0999484835067196   Calc: 37.48068131501985   Actual: 37.5
Cell: 2   Array: 0.2255459136606516   Calc: 84.57971762274435   Actual: 84.5
Cell: 3   Array: 0.2244798445859886   Calc: 84.17994171974573   Actual: 84.0
Cell: 4   Array: 0.2255459136606516   Calc: 84.57971762274435   Actual: 84.5

Collection View Width:  375.0
Array Sum:              1.0
Calculated Sum:         375.0
Actual Sum:             374.5

As you see,

  • your specified percentages add up to 1.0
  • your Calculated values add up to 375
  • but... the Actual cell widths only add up to 374.5

which leaves an extra 1/2 point to be filled in, thus the "extra space."

You don't see this all the time, likely because you're running on different devices with different widths and screen-scales.

For example, if your collection view width is 360-pts, you get this:

Cell: 0   Array: 0.2244798445859886   Calc: 80.8127440509559    Actual: 81.0
Cell: 1   Array: 0.0999484835067196   Calc: 35.981454062419054  Actual: 36.0
Cell: 2   Array: 0.2255459136606516   Calc: 81.19652891783458   Actual: 81.0
Cell: 3   Array: 0.2244798445859886   Calc: 80.8127440509559    Actual: 81.0
Cell: 4   Array: 0.2255459136606516   Calc: 81.19652891783458   Actual: 81.0
Collection View Width:  360.0
Array Sum:              1.0
Calculated Sum:         360.0
Actual Sum:             360.0

and there's no "extra one-half point" needed.

  •  Tags:  
  • Related