Dynamic size UICollectionView cell

Question

1) How can i achieve as shown in image with UICollectionView?

2) I've tried -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath method & passed different sizes but it leaves out spaces between cells. Can i empty those spaces? I want different height & width for every cell

Current output:

.

Answer 1

Sorry this is super late... But maybe this will help people who haven't found an answer yet. If you have your images in an array, you can simply reference the image size and make the adjustments to the cell size from there:

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UIImage *image = [imageArray objectAtIndex:indexPath.row];
//You may want to create a divider to scale the size by the way..
    return CGSizeMake(image.size.width, image.size.height); 
}

Hope this helps..

Answer 2

Maybe this layout will fit your needs. Please take a look at this project: https://github.com/betzerra/MosaicLayout

I'm not sure 100% it will totally satisfy your requirements, but in the worst case it may help you in writing your custom UICollecionViewFlowLayout (which is the only way to achieve your goal)

Answer 3

You can't achieve a result like the one in your question with the standard UICollectionViewFlowLayout, that in its base implementation (without subclassing) creates a grid layout.

To obtain what you want, you should create your own UICollectionViewLayout (or maybe UICollectionViewFlowLayout) subclass, where you perform all the computations needed for placing every item in the right frame.

Take a look here for a great tutorial and here for something similar to what you want.

Answer 4

Instead of creating variable heights of images in a row fix same sizes of heights of images but can have different widths in a row.Create such combinations and display and you can reuse same cell for different height with one or more images of different widths in row. i have done the sameit gives the same feel as you are looking for like google images search