Tile-like app using UICollectionView

Question

I'm trying to build an app that look-like a tile-based app (a bit windows style) and I'm new to UICollectionView.

This is what I'm trying to achieve :

The idea is that today, I know that I have 6 icons to display in each of these cells. But tomorrow could be 8, 10, etc.

So instead of a static 6-imageview-based storyboard, I'd like to have a collection view for its flexibility.

However I could not find how to constrained my cells relatively to the container view. Xcode only lets me specify a fixed point-based size. Furthermore, even if I play with the minimum spacing between cells, I observe gaps for a value of 0.

What I've done so far :

created a UICollectionViewController in storyboard
created a small custom class to handle my cells (basically an outlet for the image view inside and a label)
I let the properties "item" and "layout" values to respectively "1" and "Flow" in the UICollectionView Attributes inspector (I have a reusable identifier)

Can someone help on this ?

@BasanthVerma : I'm looking for a code or storyboard-based way to have 3 lines and 2 column without spacing that fills my view like shown above — H4Hugo, Apr 22 '16 at 07:52
No problem, my english isn't that good as well. I got what u r looking for. Will be adding the answer in a few minutes. — Basanth, Apr 22 '16 at 07:55
The answer that i've added can support any number of cells as per the picture u've shared — Basanth, Apr 22 '16 at 08:14
@BasanthVerma thank you for your answer. I was looking for Swift code so i'll have to work on it before I tell you if this actually worked ! — H4Hugo, Apr 22 '16 at 08:17

score 3 · Answer 1 · edited May 23 '17 at 11:59

3

You can do something like this,

  let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsets(top: 20, left: 0, bottom: 10, right: 0)
    layout.itemSize = CGSize(width: screenWidth/3, height: screenWidth/3)
    layout.minimumInteritemSpacing = 0
    layout.minimumLineSpacing = 0

Use UICollectionViewFlowLayout to achieve this.

You can refer this link for more detail. :)

Update(as per comment) :

you should override datasource of collectionview.

numberOfItemsInSection should return 2 and umberOfSectionsInCollectionView should return 3

hope this will help :)

edited May 23 '17 at 11:59

Community

1
1

answered Apr 22 '16 at 08:02

Ketan Parmar

25,426
9
43
67

Thanks for your answer ! Got 2 rows and 3 columns instead of the opposite, but if I play with itemSize it will distord the cell icon, any tip ? – H4Hugo Apr 22 '16 at 08:57

score 3 · Answer 2 · answered Apr 22 '16 at 08:10

Here is the programmatic answer to your question:

Create a class by extending UICollectionViewFlowLayout .

In the implementation file of our class, add the following methods:

- (instancetype)init
{
    self = [super init];
    if (self) {
       //overriding default values
        self.scrollDirection = UICollectionViewScrollDirectionVertical;
        self.minimumInteritemSpacing = 0;
        self.minimumLineSpacing = 0;
    }
    return self;
}

//Method to arrange ur cells properly

- (NSArray *) layoutAttributesForElementsInRect:(CGRect)rect {
//Returns an array of UICollectionViewLayoutAttributes objects representing the layout information for the cells and views.
NSArray *attribArray = [super layoutAttributesForElementsInRect:rect];

for(int i = 1; i < [attribArray count]; ++i) {
    UICollectionViewLayoutAttributes *currentLayoutAttributes = attribArray[i];
    UICollectionViewLayoutAttributes *prevLayoutAttributes = attribArray[i - 1];
   //No separation between the cells
    NSInteger maximumSpacing = 0;
    NSInteger origin = CGRectGetMaxX(prevLayoutAttributes.frame);

    if((origin + maximumSpacing + currentLayoutAttributes.frame.size.width) < self.collectionViewContentSize.width) {
        CGRect frame = currentLayoutAttributes.frame;
        frame.origin.x = origin + maximumSpacing;
        currentLayoutAttributes.frame = frame;
    }
}
return attribArray;
}

//If collection view bound changes, it will recompute all of its layout attributes

 - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

Set this custom class as a flow layout to your collection view,
 YourFLowLayoutCustomClass *flowlayout=[[YourFLowLayoutCustomClass alloc] init];
_collectionView = [[UICollectionView alloc]initWithFrame:frame collectionViewLayout:flowlayout];

Now in the class where you have implemented the UICollectionView, implement the following method if you have not already done it:

 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
   return CGSizeMake(self.view.frame.size.width/2, self.view.frame.size.height/3);
}

This will set the size of the cells as per the Picture you shared. Cheers!

Tile-like app using UICollectionView

2 Answers2