UICollectionView: unwanted space between items of last row - ios

Question

I want my cells to be displayed like this
X
Group 1
X X X
X X
Group 2
X X X
X X X
But, this is the output I'm getting. I'm not expecting the cell named Home to be center aligned and also not expecting the space in middle for 2nd row of Employee communication.
private class MenuDelegate : UICollectionViewDelegateFlowLayout
{
private const int interItemSpacing = 12;
private readonly double _itemWidth;
private readonly double _itemsPerRow;
private readonly List<MenuItem> _items;
public MenuDelegate(List<MenuItem> items)
{
_items = items;
_itemsPerRow = DisplayUtils.IsIPad ? 5 : 3;
_itemWidth = (PlatformConstants.MenuWidth - ((_itemsPerRow - 1) * interItemSpacing)) / _itemsPerRow;
}
public override CGSize GetSizeForItem(UICollectionView collectionView,
UICollectionViewLayout layout, NSIndexPath indexPath)
{
if (_items[indexPath.Row].Parent) {
return new CGSize(DisplayUtils.ScreenWidth, 44);
}
return new CGSize(_itemWidth, _itemWidth);
}
public override void ItemSelected(UICollectionView collectionView, NSIndexPath indexPath)
{
HandleCellSelect(_items[indexPath.Row]);
}
public override nfloat GetMinimumInteritemSpacingForSection(UICollectionView collectionView, UICollectionViewLayout layout, nint section)
{
return interItemSpacing;
}
public override nfloat GetMinimumLineSpacingForSection(UICollectionView collectionView, UICollectionViewLayout layout, nint section)
{
return float.Epsilon;
}
}

Answer 1

Have you tried overriding LayoutAttributesForElementsInRect in custom UICollectionViewFlowLayout and setting the attributes. This happens as the UICollectionViewFlowLayout returns 2 attributes for a single cell.
public class CustomFlowLayout : UICollectionViewFlowLayout
{
public override UICollectionViewLayoutAttributes[] LayoutAttributesForElementsInRect(CGRect rect)
{
UICollectionViewLayoutAttributes[] attributes = base.LayoutAttributesForElementsInRect(rect);
UICollectionViewLayoutAttributes[] newAttributes = new UICollectionViewLayoutAttributes[attributes.Length];
foreach (UICollectionViewLayoutAttributes attribute in attributes)
{
if ((attribute.Frame.X + attribute.Frame.Width<= this.CollectionViewContentSize.Width) &&
(attribute.Frame.Y + attribute.Frame.Height <= this.CollectionViewContentSize.Height))
{
newAttributes.Append(attribute);
}
}
return newAttributes;
}
}
For more details you can check here

Answer 2

I had a subclass UICollectionViewFlowLayout to achieve the desired result.
private class CustomFlowLayout : UICollectionViewFlowLayout
{
public override UICollectionViewLayoutAttributes[] LayoutAttributesForElementsInRect(CGRect rect)
{
var attributes = base.LayoutAttributesForElementsInRect(rect);
var leftMargin = SectionInset.Left;
var maxY = 2.0f;
var horizontalSpacing = 6f; // spacing between the items.
foreach (var attribute in attributes) {
if (attribute.Frame.Y >= maxY || attribute.Frame.X == SectionInset.Left) {
leftMargin = SectionInset.Left;
}
if (attribute.Frame.X == SectionInset.Left)
leftMargin = SectionInset.Left;
else
attribute.Frame = new CGRect(leftMargin, attribute.Frame.Y, attribute.Frame.Width, attribute.Frame.Height);
leftMargin += attribute.Frame.Width + horizontalSpacing;
maxY = (float)Math.Max(attribute.Frame.GetMaxY(), maxY);
}
return attributes;
}
}