How to resize the collection view cells according to device screen size?

Chris Mikkelsen picture Chris Mikkelsen · Dec 5, 2016 · Viewed 41.9k times · Source

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

Answer

Marat Ibragimov picture Marat Ibragimov · Dec 5, 2016

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);
 }