Different cell size in UICollectionview

Question

In my iphone app,I am showing images on a collection view. I fetch the images from urls,with urls I get the image size also. eg:- let's say there are two kinds of images landscape and portrait.I get value P for portrait images and L for landscape images

How to customize the collectionView cell's size ?

You can check out https://github.com/bryceredd/RFQuiltLayout . Looks like something you can use for this — Rajneesh071, Apr 17 '13 at 13:55

Anil Varghese · Accepted Answer · 2014-06-19T05:25:51.443

64

Use this UICollectionViewDelegateFlowLayout method

 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

edited Jun 19 '14 at 05:25

answered Apr 17 '13 at 13:55

Anil Varghese

42,757
9
93
110

Thank you. I was stuck in here, and open a new project to test and works. – Edward Chiang Jun 17 '14 at 03:13
1

PS. UICollectionViewDelegateFlowLayout includes both UICollectionViewDataSource and UICollectionViewDelegate so you only need to add to your delegate declarations. – B-Rad Apr 28 '15 at 22:38

score 9 · Answer 2 · edited Mar 05 '15 at 16:14

1) You could maintain and swap out multiple layout objects, but there's a simpler way. Just add the following to your UICollectionViewController subclass and adjust the sizes as required:

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{    
    // Adjust cell size for orientation
    if (UIDeviceOrientationIsLandscape([[UIApplication sharedApplication] statusBarOrientation])) {
        return CGSizeMake(170.f, 170.f);
    }
    return CGSizeMake(192.f, 192.f);
}

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
    [self.collectionView performBatchUpdates:nil completion:nil];
}

Calling -performBatchUpdates:completion: will invalidate the layout and resize the cells with animation (you can just pass nil to both block params if you've no extra adjustments to perform).

2) Instead of hardcoding the item sizes in -collectionView:layout:sizeForItemAtIndexPath, just divide the height or width of the collectionView's bounds by the number of cells you want to fit on screen. Use the height if your UICollectionView scrolls horizontally or the width if it scrolls vertically.

score 2 · Answer 3 · answered Sep 06 '15 at 23:48

This is what I did. I first set the size of the cell based on the size of the screen (so that we can get the best number of images on each row). You may want to change the numbers to suit your cause.

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
CGFloat widthOfCell =(self.view.frame.size.width-30)/2;
CGFloat heightOfCell =widthOfCell * 1.33;
CGSize returnValue = CGSizeMake(widthOfCell, heightOfCell);
returnValue.height += 5; 
returnValue.width += 5; 
return returnValue;

}

I then used an image manipulation method to determine the landscape or portrait state, and (for my app) I decided to make every image a portrait:

    if (sourceImage.size.width>sourceImage.size.height) {
    sourceImage = [[UIImage alloc] initWithCGImage: sourceImage.CGImage
                                             scale: 1.0
                                       orientation: UIImageOrientationRight];
    }

If you want to have it the other way round, swap the > with <

CAVEAT: my rotating method doesn't take into consideration if the picture is pointing left or right. In other words, If an image is landscape by upside down, my code can't recognise that. I hope someone else can help you though, and I hope I haven't gone off track! :)

score 1 · Answer 4 · answered Dec 09 '16 at 14:24

For swift extend the flowlayout to you viewcontroller, if you need to show dynamic images on cell make variable which hold images name into your view contorller and use this:

let imageData = ["image1","image2","image3","image4"]

extension yourViewController: UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout{
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    let photo = UIImage(named: imageData[indexPath.row])
        return CGSize(width: (photo?.size.width)!, height: (photo?.size.height)!)

}

}

Different cell size in UICollectionview

4 Answers4

Linked