55

enter image description here

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: enter image description here.

Akshit Zaveri
  • 3,974
  • 6
  • 27
  • 56
  • Can someone give me an example using subclassing `UICollectionViewFlowLayout`? – Akshit Zaveri May 22 '14 at 04:30
  • I've already tried a great example `NHBalancedFlowLayout`. but height of row is same for all images in a single row. If anyone would suggest me something that i can make each image height dynamic then i would appreciate it. – Akshit Zaveri May 22 '14 at 04:31
  • i am not sure , have you look this reference before or not. but i can say its the best tutorial, i ever had found for making a dynamic collectionview, [beginning-uicollectionview-in-ios-6-part-12](http://www.raywenderlich.com/22324/beginning-uicollectionview-in-ios-6-part-12). good luck – Pawan Rai May 24 '14 at 19:59
  • YA, but this is knothole to customise the height and adjust other items according to it.. – Arpit B Parekh Jul 28 '15 at 10:10

4 Answers4

49

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..

RobMillerJ25
  • 616
  • 5
  • 6
  • 9
    Have you tried it? Because, i tried this in very beginning. It doesn't work. – Akshit Zaveri Aug 13 '14 at 01:49
  • I have tried it, but with a custom UIImage object. What's happening that it doesn't work? I did it just now as a sanity check and it works for me. I have to use a divider because the images were too large... In my case, I just set a float divider = 2; – RobMillerJ25 Aug 14 '14 at 14:39
  • So you are saying that using your technique you achieved what's displayed in image1?(Image with a baby's photo in top left).. Seriously? – Akshit Zaveri Aug 14 '14 at 16:51
  • I don't have your images, and of course I init and add images to the array viewDidLoad. To get it the way you want it, you'll need to make a lot of adjustments to the UICollectionViewFlowLayout to get the separations correct. That method above is only to customize your Cell Size. – RobMillerJ25 Aug 16 '14 at 13:47
  • yeah this is the way to go, you need to set your delegate properly. – Ali Oct 19 '14 at 11:42
  • why does this give me a 'uncaught exception error' ?? – Tejas K Feb 22 '16 at 09:41
  • 1
    `UIImage *image = [UIImage imageNamed:[arrRecipeImages objectAtIndex:indexPath.row]];` this worked for me. – Tejas K Feb 22 '16 at 11:05
  • just `return image.size` – Laszlo Apr 04 '16 at 17:11
17

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)

Alexander Tkachenko
  • 3,182
  • 1
  • 31
  • 46
  • Any ideas for where i can experiment in `MosaicLayout` code? – Akshit Zaveri May 27 '14 at 04:24
  • You can clone this repo https://github.com/TwoTinedFork/MosaicLayout and run test project, instructions also included :) – Alexander Tkachenko May 27 '14 at 12:52
  • You can try to understand how layout is implemented in this project just to feel how to work with custom UICollectionViewLayout. If you need more customization and more complex layout, please read https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/CollectionViewPGforIOS/CreatingCustomLayouts/CreatingCustomLayouts.html – Alexander Tkachenko May 27 '14 at 12:56
  • 2
    Not at all. Good luck! Just clone project and run MosaicCollectionView.xcodeproj I hope it will be exactly what you need:) – Alexander Tkachenko May 27 '14 at 13:15
  • 1
    Here is more popular project: https://github.com/chiahsien/CHTCollectionViewWaterfallLayout Used it in one my project and it worked perfectly. – Murlakatam May 29 '14 at 11:13
  • Thanks for referring mosaiclayout. This is not a perfect answer but giving bounty to you for your efforts. – Akshit Zaveri May 29 '14 at 16:42
  • 5
    Hi! I'm the author of MosaicLayout, let me know if you've got some issues with it :-) – betzerra Sep 18 '14 at 16:08
  • @betzerra can i make size of first cell of collectionview fixed? and also can all the cells fit in to space available? i want to remove scrolling, but cells should auto adjust in the space and fill in or shrink. Is this possible with your current layout? – Akshit Zaveri Mar 12 '15 at 11:38
  • 2
    Thanks @betzerra, i will try to get some time from super busy schedule. I know that i need to learn it quickly.Your MosaicLayout will help me in many ways while learning. :) – Akshit Zaveri Mar 12 '15 at 13:55
  • Thanks this solved my problem, thank you very much for creating such a wonderful Collection view. – Arpit B Parekh Jul 28 '15 at 13:01
4

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.

Alessandro Orrù
  • 3,183
  • 16
  • 23
  • Thanks. I'll look at it. I've already tried `RFQuiltLayout` but it has some serious bugs. I'll try another link & update here. – Akshit Zaveri May 20 '14 at 13:02
  • http://applidium.github.io/ADLivelyCollectionView/ Not exactly what you want, but might give you a starting point. – brandonscript May 24 '14 at 07:27
2

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

Ashish Khobragade
  • 103
  • 1
  • 8