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 ?

Solution 1

Use this UICollectionViewDelegateFlowLayout method

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

Solution 2

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.

Solution 3

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! :)

Solution 4

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)!)

}

}

View more solutions