1

I am using adaptive layout for different iDevices screen sizes, I am having troubles showing two cells in portrait orientation. I designed a cell say 130 x 210 which looks perfect on iPhone 5, but when in iPhone 6 we have more 30 px, for which i calculate remaining space and set space equally, but that looks ugly see

enter image description here

As I go on iPhone 6+ it looks more weird, and on iPad there will be more number of cells in a row, recommend me a way to deal with this situation or should I calculate size of the item every time and number of items the screen can contain so space accordingly. This is how I am calculation for now 

int space = self.view.frame.size.width;
space = space - 130 *2;
space = space/3;
UICollectionViewFlowLayout *flow = [[UICollectionViewFlowLayout alloc] init];
flow.minimumInteritemSpacing = space;
flow.minimumLineSpacing = space;
flow.scrollDirection = UICollectionViewScrollDirectionVertical;
flow.sectionInset = UIEdgeInsetsMake(space, space, space, space);
flow.itemSize = CGSizeMake(130, 210);
[self.collectionViewGames setCollectionViewLayout:flow];
Raheel Sadiq
  • 9,847
  • 6
  • 42
  • 54
  • I think its better to have almost constant space between cells in all the devices and the item size can be changed based on the device. – sateesh Feb 11 '15 at 06:33
  • @sateesh yes its an option to change the width of the cell according, lets say fix space to 20 px, and set the width. But as its adaptive layout, on iPad it will go really bad with that much width, can put a special check for iPad though, but some proper solution ! – Raheel Sadiq Feb 11 '15 at 06:35

1 Answers1

3

I faced same problem while implementing an app similar to Photos app. what i have done here is I fixed the size of spacing to a constant value. and based on the remaining space i calculated the item size.

Here is the code in my case 

 var flowLayout = // your flow layout


        var itemWidth = self.view.frame.size.width / (5) // i am using 5 cells in a row
    flowLayout.itemSize = CGSizeMake(itemWidth - 2, itemWidth - 2)
    flowLayout.scrollDirection = UICollectionViewScrollDirection.Vertical
    flowLayout.sectionInset = UIEdgeInsets(top: 0, left: 0 , bottom: 0, right: 0)
    flowLayout.minimumInteritemSpacing = 2
    flowLayout.minimumLineSpacing = 2
sateesh
  • 505
  • 4
  • 18