Custom layout 1 large 2 small cells UICollectionView - ios

Question

I want to create a layout like this image below but having trouble understanding how flow layout can be used to achieve this kind of layout
Basically what I want is 1 large picture than 2 small pictures right to it,
Then from index 3,4,5... and so on will be a 3 images grid. Only the First 3 cells will have a different layout. Does anyone know how we can achieve this kind of Layout in collectionView?
Update Code for collectionView
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 100;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
AppDelegate* delegate = [AppDelegate applicationDelegate];
FriendsListCell *cell= (FriendsListCell*)[collectionView dequeueReusableCellWithReuseIdentifier:kFriendsListCellIdentifier forIndexPath:indexPath];
cell.backgroundColor = [UIColor redColor];
return cell;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGSize newSize = CGSizeZero;
newSize.height = 100; // use your prefered size
newSize.width = 100; // use your prefered size
if(indexPath.item == 0) // set custom size for the first item
{
newSize.width = 200; // use your prefered size
newSize.height = 200; // use your prefered size
}
return newSize;
}

Answer 1

You have to customiz the width and height of collectionview items according to the index .
like the follwoing:
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
let width : CGFloat
let height : CGFloat
if indexPath.item == 0 { // set custom size for the first item
width = 200 // use your prefered size
height = 200 // use your prefered size
} else {
width = 100 // use your prefered size
height = 100 // use your prefered size
}
return CGSizeMake(width, height)
}
and don't forgot to conform the UICollectionViewDelegateFlowLayout
For Objective-c
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGSize newSize = CGSizeZero;
newSize.height = 100; // use your prefered size
newSize.width = 100; // use your prefered size
if(indexPath.item == 0) // set custom size for the first item
{
newSize.width = 200; // use your prefered size
newSize.height = 200; // use your prefered size
}
return newSize;
}
Update screenshot

Answer 2

In Objective-C:
#interface MyFlowLayoutObjC()
#property (nonatomic, strong) NSMutableDictionary *cellsLayout;
#property (nonatomic, assign) CGSize computedContentSize;
#end
#implementation MyFlowLayoutObjC
-(id)init {
self = [super init];
if (self) {
_cellsLayout = [[NSMutableDictionary alloc] init];
}
return self;
}
-(void)prepareLayout {
[super prepareLayout];
[self setComputedContentSize:CGSizeZero];
[[self cellsLayout] removeAllObjects];
CGSize fullFrameSize = [[self collectionView] frame].size;
NSUInteger numberOfitems = [[self collectionView] numberOfItemsInSection:0];
CGSize unitSize = CGSizeMake(fullFrameSize.width / 3.0, fullFrameSize.width / 3.0);
for (NSUInteger anIndex = 0; anIndex < numberOfitems; anIndex ++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:anIndex inSection:0];
UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
switch (anIndex) {
case 0:
[attributes setFrame:CGRectMake(0, 0, unitSize.width * 2, unitSize.height * 2)];
break;
case 1:
[attributes setFrame:CGRectMake(unitSize.width * 2, 0, unitSize.width, unitSize.height)];
break;
case 2:
[attributes setFrame:CGRectMake(unitSize.width * 2, unitSize.height, unitSize.width, unitSize.height)];
break;
default:
[attributes setFrame:CGRectMake(unitSize.width * (anIndex % 3), unitSize.height * (CGFloat)((anIndex / 3) + 1), unitSize.width, unitSize.height)];
break;
}
[[self cellsLayout] setObject:attributes forKey:indexPath];
[self setComputedContentSize:CGSizeMake(MAX([attributes frame].origin.x + [attributes frame].size.width, [self computedContentSize].width),
MAX([attributes frame].origin.y + [attributes frame].size.height, [self computedContentSize].height))];
}
}
-(NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
NSArray *layouts = [[self cellsLayout] allValues];
NSPredicate *predicate = [NSPredicate predicateWithBlock:^BOOL(UICollectionViewLayoutAttributes * _Nullable aLayout, NSDictionary<NSString *,id> * _Nullable bindings) {
return CGRectIntersectsRect([aLayout frame], rect);
}];
return [layouts filteredArrayUsingPredicate:predicate];
}
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
return [self cellsLayout][indexPath];
}
- (CGSize)collectionViewContentSize {
return [self computedContentSize];
}
#end
And in Swift:
class MyFlowLayout: UICollectionViewLayout {
private var cellsLayout: [IndexPath: UICollectionViewLayoutAttributes] = [:]
override func prepare() {
cellsLayout.removeAll()
guard let fullFrameSizeWidth = collectionView?.frame.size else { return }
guard let numberOfItems = collectionView?.numberOfItems(inSection: 0) else { return }
let unitSize = CGSize(width: fullFrameSizeWidth.width / 3.0, height: fullFrameSizeWidth.width / 3.0)
for anIndex in 0..<numberOfItems {
let indexPath = IndexPath(item: anIndex, section: 0)
let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
switch anIndex {
case 0:
attributes.frame = CGRect(origin: .zero, size: CGSize(width: unitSize.width * 2, height: unitSize.height * 2))
case 1:
attributes.frame = CGRect(origin: CGPoint(x: unitSize.width * 2, y: 0), size: unitSize)
case 2:
attributes.frame = CGRect(origin: CGPoint(x: unitSize.width * 2, y: unitSize.height), size: unitSize)
default:
attributes.frame = CGRect(origin: CGPoint(x: unitSize.width * CGFloat(anIndex % 3),
y: unitSize.height * CGFloat(Int(anIndex / 3) + 1)),
size: unitSize)
}
cellsLayout[indexPath] = attributes
}
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
return cellsLayout.compactMap { $0.value.frame.intersects(rect) ? $0.value : nil }
}
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
return cellsLayout[indexPath]
}
override var collectionViewContentSize: CGSize {
return CGSize(width: cellsLayout.max(by: { $0.1.frame.maxX < $1.1.frame.maxX })?.value.frame.maxX ?? 0,
height: cellsLayout.max(by: { $0.1.frame.maxY < $1.1.frame.maxY })?.value.frame.maxY ?? 0)
}
}
This should do the trick.
Now, let's explain, you need a custom UICollectionViewFlowLayout. Because with just overriding -collectionView:layout:sizeForItemAtIndexPath:, you can't do that. It will get the size of the first item, put it in the frame. Then, get the frame of the second item, put it at its right if it's fits, else under it, etc.
When everything is set, it will center on y axis for each line. That's why you have this behavior.
So what's needed?
Let's override -layoutAttributesForElementsInRect: to return the layouts for each cells which intersect with the rect (which is the visible rect).
In order to do so, we need to know theses frame, so I made de needed calculations in -prepareLayout.