64
votes

I'm using a UICollectionView with two prototype cells. The prototype cells have different widths and contain different controls (image view and web view). I'm definitely returning the correct prototype cell for a given index (all the cells display the correct content), but the prototype cell size is ignored and the collection view's item size is used instead. It's not like I'm manually setting the size. What's the point of allowing the prototype cell to be sized in storyboard if the property is just ignored when it's actually displayed?

9

9 Answers

173
votes

The size of the cell in the storyboard editor is just to help you design the cell. Since each prototype cell can be a different size, UICollectionView doesn't know which cell's size to pick for all the cells. That's why you set the actual size you want to use for your cells separately. You can do it in the designer by selecting the collection view and setting its Cell Size Width and Height in the Size inspector, under the "Collection View Size" heading.

Or, you can override the following method and return a CGSize object that specifies the size you want to use for each cell. Using this method, you can actually have each cell be a different size:

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

Example:

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    return CGSizeMake(100, 100);
}

Your view controller needs to be a delegate of UICollectionViewDelegateFlowLayout in order for this method to be called. So don't forget to add that delegate declaration to your view controller's .h file, such as:

@interface MyViewController () <UICollectionViewDelegateFlowLayout>

Swift

extension MyViewController : UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 100, height: 100)
    }
}
19
votes

If all the cells are the same size and you can set the itemSize on the UICollectionViewFlowLayout

Example:

((UICollectionViewFlowLayout *) self.collectionViewLayout).itemSize = CGSizeMake(100, 100);
7
votes

Swift, working for latest iOS.

(collectionView.collectionViewLayout as! UICollectionViewFlowLayout).itemSize = cellSize

I don't have enough points to reply to Sam, but the key is that it's not UICollectionViewLayout but UICollectionViewFlowLayout.

6
votes

I had a Similar Issue, I set a breakpoint on the sizeForItemAt and it was being called for every cell I had on my collection, however, the size set in code was never being reflected on the device.

While looking at other collections in my project I noticed the Collection View Flow Layout was slightly different in the collection with the issue.

By Selecting the Flow Layout in the Storyboard

And then Setting the Cell Size & Estimate Size in the Size Inspector

This helped me solve my issue.

However the size of the cell will not be dynamic with what is in your sizeForItemAt

1
votes

You can set size of UICollectionViewCell in UICollectionView properties.

In Storyboard, Select Collection View at the Document Outline, then edit your Cell Size in Size Inspector.

And you should change Cell's size type to Default, if it is Custom.

1
votes

In Swift you can call sizeForItemAtIndexPath delegate method to set the size for each cell.

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

        if indexPath.row == 0 {
                // Set the size for cell no. 0
         }else if indexPath.row == 1 {
               // Set the size for cell no. 1
        }
    }

I hope that helps. Thanks!

1
votes

Try to use UICollectionViewDelegateFlowLayout method. In Xcode 11 or later, you need to set Estimate Size to none from Storyboard.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: 
UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
      let padding: CGFloat =  170
      let collectionViewSize = advertCollectionView.frame.size.width - padding
      return CGSize(width: collectionViewSize/2, height: collectionViewSize/2)
}
0
votes

If all your cells are the same size, you should simply set the UICollectionView's Cell size properties to the same as the UICollectionViewCell's size properties.

0
votes

Use its Default Delegate . . .

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CGSize mElementSize;
    mElementSize = CGSizeMake(SCREEN_WIDTH , SCREEN_HEIGHT *0.60);
    return mElementSize;
}