2 different cell sizes in UICollectionView Target C

Question

I would like to use a UICollectionView, you can create the following layout:

As you can see, there are two different cell sizes. One of them is 1/4 line, the other is 3/4. Is it possible to create such a layout using a UICollectionView?

Can anyone teach me how to do this ??? Or are there any samples ??? I have already studied many tutorials and references. But still I don’t know how to do it.

Thanks!

Answer 1

Well, I hardcoded the element width (72.0 and 23.0). The remainder of 5.0 will be used in the time slot and edgeInsets. This code will give you exactly what you want.

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section { return 10.0; } - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section { return 10.0; } #pragma mark - CollectionViewFlowLayout Methods - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { CGSize newSize = CGSizeZero; newSize.height = 100; CGRect screenBounds = [[UIScreen mainScreen] bounds]; CGSize screenSize = screenBounds.size; if(indexPath.item % 4 == 0 || indexPath.item % 4 == 3) { // Size : 1/4th of screen newSize.width = screenSize.width * 0.23; } else { // Size : 3/4th of screen newSize.width = screenSize.width * 0.72; } return newSize; } - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section { return UIEdgeInsetsMake(10, 2.0, 10, 2.0); } 

Answer 2

There are different ways to do this:

1. You can do this by implementing - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath method - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath .

2. You can fully customize the collection view, as described in the next walkthrough.

   http://www.raywenderlich.com/107439/uicollectionview-custom-layout-tutorial-pinterest

3. Based on the destination layout, it seems that the appearance can be easily UITableviewCell using even UITableviewCell (loading cells in both 1/4 and 3/4 in one cell) and resizing them using Auto Layout.

Answer 3

 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{ return [(NSString*)[arrayOfStats objectAtIndex:indexPath.row] sizeWithAttributes:NULL]; } 

using this method, you can return a different size for the cell. See this link. Dynamic cell width of UICollectionView depending on label width.