search

xamarin / Xamarin.Forms

Xamarin.Forms is no longer supported. Migrate your apps to .NET MAUI.
https://aka.ms/xamarin-upgrade
Other
5.62k stars 1.87k forks source link

[Bug] [iOS] Collection view cells with 0 item spacing in a grid layout has gaps, apparently due to rounding #13943

Open GalaxiaGuy opened 3 years ago

GalaxiaGuy commented 3 years ago

Description

A CollectionView using a GridItemsLayout with a Span that is not a whole factor of the collection view's width, and has a HorizontalItemSpacing of 0 will still have a gap.

Steps to Reproduce

  1. Create a CollectionView with a GridItemsLayout with a Span of 3, HoriztonalItemSpacing of 0, and a width that is not a multiple of three (e.g full width of an iPod Touch 7th gen).
  2. Make the CollectionView transparent and give the cells a non-transparent background color.
  3. Make the content behind theCollectionView a different color to the cells.

Expected Behavior

None of the content behind the CollectionView is visible.

Actual Behavior

There is gaps between the cells in which the background content is visible.

Basic Information

Screenshots

Simulator Screen Shot - iPod touch (7th generation) - 2021-03-05 at 12 34 18

Reproduction Link

https://github.com/GalaxiaGuy/xf-bugs/tree/bug/grid-spacing-gap

sawankumarbundelkhandi commented 3 years ago

I can confirm it's indeed a bug. For now, I have given HoriztonalItemSpacing as 1

jtorvald commented 3 years ago

I looked into this, and it seems to be a know issue. It's even in the comments of the GridViewLayout (see comment here)

I tried to apply a fix, with rounding and suck but didn't work. It's a tough one to solve I guess. One of the elements needs to be a bit bigger.

A workaround (if the design lets you) can be to give the CollectionView a margin of for example 1 (for example 320 - 2 (both sides 1) divided by 3 is 106 which makes an even number.

GalaxiaGuy commented 3 years ago

To a bit a of detail:

I'm porting some functionality already implemented natively in Xamarin.iOS. When I asked the people who implemented the original solution how they dealt with this, they said they just put an opaque box behind the collectionview and adjusted its constraints.

It seems this is just an issue without how UICollectionViewFlowLayout works (i.e., it is designed such that you size the cells and it fits what it can whereas the GridItemLayout assumes you tell it what should fit and it determines the size).

Fixing it completely may require creating a custom UICollectionViewLayout.