33

I noticed that the cells would always follow the definition in size inspector. Even if I have already applied UICollectionViewDelegateFlowLayout.

enter image description here

enter image description here

So that's how it looks. But I want the cells to rather look like how it was on a smaller iphone screen.

enter image description here

3
  • are you using swift? Dec 5, 2016 at 13:10
  • You have to use multiplier from superview for cell creation, than it will automatically adjust according to screen size. Dec 5, 2016 at 13:13
  • Yes I'm using swift. I also noticed something, the collection view cells seems to follow the Cell Size defined in Size Inspector. Even if I programatically resize the cell using collectionViewLayout. Dec 5, 2016 at 13:21

9 Answers 9

59

Implement sizeForItemAt method according to the view's frame size

Swift

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    let height = view.frame.size.height
    let width = view.frame.size.width
    // in case you you want the cell to be 40% of your controllers view
    return CGSize(width: width * 0.4, height: height * 0.4)
}

Objective C

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

   CGFloat height = self.view.frame.size.height;
   CGFloat width  = self.view.frame.size.width;
   // in case you you want the cell to be 40% of your controllers view
   return CGSizeMake(width * 0.4, height * 0.4);
 }
10
  • So do I put this code inside func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize ......? Dec 5, 2016 at 13:29
  • 9
    its a UICollectionViewDelegateFlowLayout method . UICollectionViewDelegateFlowLayout inherits from UICollectionViewDelegate which means you should implement this method and change the protocol UICollectionViewDelegate to UICollectionViewDelegateFlowLayout after adding this method, otherwise this method wont be called Dec 5, 2016 at 13:37
  • 1
    I also noticed something, the collection view cells seems to follow the Cell Size defined in Size Inspector. Even if I programatically resize the cell using collectionViewLayout Dec 5, 2016 at 14:02
  • did you change the delegate you conform to? and checked that Dec 5, 2016 at 14:04
  • 1
    Don't forget to about UICollectionViewDelegateFlowLayout :)
    – Alex M.M.
    Aug 16, 2019 at 15:16
17

Swift 4

Multiply the collectionView's frame width/height in an implementation of the sizeForItemAt method.

class yourClassName: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {


    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
            return CGSize(width: self.myCollectionView.frame.height / 6 * 5, height: self.myCollectionView.frame.height / 6 * 5)

        }


}

self.myCollectionView is the reference from you collection view Item
it's important to implement UICollectionViewDelegateFlowLayout

And because it will not fit another cell you will have only one row.

1
  • 1
    Thanks... and thanks to @MiratIgrabrimov's comment on another answer, eventually realised I was missing conformance to the UICollectionViewDelegateFlowLayout protocol, so it wasn't being called.
    – Echelon
    May 30, 2018 at 7:56
6

You should try using a simple equation when setting your cell size instead of number like so:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: view.frame.width / 2, height: 350)
    }

dividing it by 2 will mean that the cell always be half of the screens size, taking away and kind of minimumLineSpacing functions and/or and UIEdgeInset methods you have called. Hope this helps.

1
  • I also noticed something, the collection view cells seems to follow the Cell Size defined in Size Inspector. Even if I programatically resize the cell using collectionViewLayout Dec 5, 2016 at 14:03
6

Some of you might need to do this too: In the Storyboard, go to the collectionviewFlowLayout (yellow cube) inside the Collection View, then go to the Size Inspector, make sure the "Estimated Size" is set to "None".

0
5

In swift 3, You can resize collection view cell as per the screen using collectionViewLayout property.

I.e.

   let numberOfCell = 3
   let cellSpecing = 10
   if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
        layout.itemSize = CGSize(width: (screenSize.width - (cellSpecing * (numberOfCell + 1))) / numberOfCell, height: cellHeight)
        layout.invalidateLayout()
    }
0
4

in Swift 5

You can just extend your view controller from UICollectionViewDelegateFlowLayout and implement this method:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let height = collectionView.frame.height
        let width  = collectionView.frame.width
        return CGSize(width: width, height: height)
}

in this example I make the width of cells equal to the width of the CollectionView you can adapt it depends on your need.

2

As per my experience, you have to use UICollectionView methods to get device-specific collection view cell size as per the below methods you can get dynamic width & height of collection view cell.

// Dynamic width & height
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    float cellSize = collectionView.frame.size.width/values.count;
    return CGSizeMake(cellSize - 10, collectionView.frame.size.height);
}

//For top/bottom/left/right padding method
- (UIEdgeInsets)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    return UIEdgeInsetsMake(0, 0, 0, 1);
}



- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    float width = collectionView.frame.size.width;
    float spacing = [self collectionView:collectionView layout:collectionViewLayout minimumInteritemSpacingForSectionAtIndex:section];
    int numberOfCells = (width + spacing) / (cellSize + spacing);
    int inset = (width + spacing - numberOfCells * (cellSize + spacing) ) / 2;
    
    return UIEdgeInsetsMake(0, inset, 0, inset);
}
- (CGFloat)collectionView:(UICollectionView *) collectionView layout:(UICollectionViewLayout *)collectionViewLayout
minimumInteritemSpacingForSectionAtIndex:(NSInteger) section
{
    return 1.0;
}

Hope this will help you to design your cell-based on device size.

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

    let theWidth = (_screenSize.width - (15*3))/2    // it will generate 2 column 
    let theHeight = (_screenSize.height - (10*2))/3   // it will generate 3 Row 
    return CGSize(width: theWidth ,height: theHeight)
}
1
  • I also noticed something, the collection view cells seems to follow the Cell Size defined in Size Inspector. Even if I programatically resize the cell using collectionViewLayout Dec 5, 2016 at 14:03
-1

Adding to Βασίλης Δ's answer make sure to set the estimate size to none under your collection view size inspector. image of Estimate Size in size inspector

2
  • please try to provide detailed and precise answer
    – Dr. Arslan
    Dec 7, 2020 at 23:06
  • @Dr.Arslan If you let it estimate the cell size it will sometimes estimate the size of the cell which will show an undesired size for performance reason
    – WaliD
    Dec 9, 2020 at 6:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.