Swift: Issues with UICollection View layout - ios

Question

I am trying to layout a UICollectionView like the mock-up I have drawn in the photo(also showing the index of each item):
The code I currently have to try and achieve this is:
In ViewDidLoad:
collectionView.dataSource = self
collectionView.delegate = self
flowLayout.scrollDirection = .horizontal
flowLayout.minimumLineSpacing = 5
flowLayout.minimumInteritemSpacing = 5
flowLayout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 5)
Then later on the the file:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let totalWidth = collectionView.bounds.size.width
let totalHeight = collectionView.bounds.size.height
let heightOfView = totalHeight / 3
let numberOfCellsPerRow = 1
let dimensions = CGFloat(Int(totalWidth) / numberOfCellsPerRow)
if (indexPath.item == 4) {
return CGSize(width: collectionView.bounds.size.width, height: heightOfView)
} else {
return CGSize(width: dimensions / 2, height: heightOfView)
}
}
This code isn't having the desired effect, and is producing a UICollectionView that looks like this:
As you can see, the cells are not even in the UICollectionView, with the right-hand side cells overflowing into scroll space. The section gaps between the items are wrong and the 5th, the larger cell is on the right-hand side of the screen out of view unless scrolled to.

Answer 1

You cannot create such layout with standard UICollectionViewFlowLayout class. First of all watch WWDC videos related to UICollectionView and it's layout: https://developer.apple.com/videos/play/wwdc2012/219/. Then you can check Swift tutorials with sample code to get started: http://swiftiostutorials.com/tutorial-creating-custom-layouts-uicollectionview/
Simplest working, but not best structured will be such code in custom UICollectionViewLayout. Use this as a starting point:
#interface UICollectionViewCustomLayout ()
#property (nonatomic) NSArray<UICollectionViewLayoutAttributes *> *attributes;
#property (nonatomic) CGSize size;
#end
#implementation UICollectionViewCustomLayout
- (void)prepareLayout
{
[super prepareLayout];
NSMutableArray<UICollectionViewLayoutAttributes *> *attributes = [NSMutableArray new];
id<UICollectionViewDelegate> delegate = (id<UICollectionViewDelegate>)self.collectionView.delegate;
id<UICollectionViewDataSource> dataSource = (id<UICollectionViewDataSource>)self.collectionView.dataSource;
NSInteger count = [dataSource collectionView:self.collectionView numberOfItemsInSection:0];
CGFloat collectionViewWidth = CGRectGetWidth(self.collectionView.frame);
CGFloat collectionViewHeight = CGRectGetHeight(self.collectionView.frame);
CGFloat rowHeight = floor(collectionViewHeight / 3);
NSUInteger numberOfPages = count / 5;
if (count % 5) {
numberOfPages++;
}
for (NSInteger item = 0; item < count; item++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:item inSection:0];
UICollectionViewLayoutAttributes *attribute = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
NSInteger index = item % 5;
NSInteger page = item / 5;
CGFloat width = index == 4 ? collectionViewWidth : collectionViewWidth / 2;
CGSize size = CGSizeMake(width, rowHeight);
CGFloat x = page * collectionViewWidth + (index % 2 == 0 ? 0 : collectionViewWidth / 2);
CGFloat y = (index / 2) * rowHeight;
CGPoint origin = CGPointMake(x, y);
CGRect frame = CGRectZero;
frame.size = size;
frame.origin = origin;
attribute.frame = frame;
[attributes addObject:attribute];
}
self.attributes = attributes;
self.size = CGSizeMake(numberOfPages * collectionViewWidth, collectionViewHeight);
}
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
NSMutableArray<UICollectionViewLayoutAttributes *> *result = [NSMutableArray new];
for (UICollectionViewLayoutAttributes *attribute in self.attributes) {
if (CGRectIntersectsRect(attribute.frame, rect)) {
[result addObject:attribute];
}
}
return result;
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
NSPredicate *predicate = [NSPredicate predicateWithFormat:#"indexPath.section == %# AND indexPath.item == %#", #(indexPath.section), #(indexPath.item)];
UICollectionViewLayoutAttributes *attributes = [self.attributes filteredArrayUsingPredicate:predicate].firstObject;
return attributes;
}
- (CGSize)collectionViewContentSize
{
return self.size;
}
#end
And controller:
// Views
#import "UICollectionViewCustomLayout.h"
#interface ViewController () <UICollectionViewDataSource, UICollectionViewDelegate>
#property (nonatomic) UICollectionView *collectionView;
#end
#implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:[UICollectionViewCustomLayout new]];
self.collectionView.backgroundColor = [UIColor whiteColor];
self.collectionView.frame = self.view.bounds;
self.collectionView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
self.collectionView.delegate = self;
self.collectionView.dataSource = self;
[self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class])];
[self.view addSubview:self.collectionView];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 10;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath
{
NSArray *colors = #[[UIColor redColor], [UIColor blueColor], [UIColor grayColor], [UIColor greenColor], [UIColor purpleColor], [UIColor cyanColor]];
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class]) forIndexPath:indexPath];
cell.contentView.backgroundColor = colors[arc4random() % colors.count];
cell.contentView.alpha = (arc4random() % 500 + 500) / 1000.0;
return cell;
}
#end