3

I have a collection view and would like to maintain a consistent number of rows and columns across multiple devices. On an iPhone 6s Plus, 6 items are displayed, but when viewing the app on an iPhone 5s, only four items are displayed.

See my layout here: Layout on iPhone 6s Plus

How can I make the collection view display the same items on various devices?

byJeevan
  • 3,728
  • 3
  • 37
  • 60
iOS Ninja
  • 101
  • 1
  • 13

3 Answers3

6

For Swift 3.0.

Ensure you are using autoLayout and implement the UICollectionView sizeForItemAtIndexPath. 

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

        return CGSize(width: collectionView.bounds.size.width/3 - yourCellInterItemSpacing, height: collectionView.bounds.size.height/3 - yourCellInterItemSpacing)
  }

This will allow your cell to be created based on the screen size (Assuming you are using autoLayout), you should divide by the number of columns/rows you want. Divide width by the number of columns you want and height by number of rows.

To provide leading and trailing spaces as seen in your screenshot, just add appropriate spaces in the storyboard to your UICollectionView. I.e Leading and trailing spaces equivalent to yourCellInterItemSpacing

Make sure your class conforms to the UICollectionViewDelegateFlowLayout protocol!

Rikh
  • 4,078
  • 3
  • 15
  • 35
  • Hi Rikh I managed to Make it Work on All devices same layout but one more issuse am facing is when i scroll in next 2 or 3 page on words spacing is not good like in first launch show showing next page items Half How do i make sapcing same in all pages and Should not Sow other page Items. I enabled Paging Also For Collectionview – iOS Ninja Nov 27 '16 at 08:03
  • That would require you to tell me how have you setup your `UICollectionView` ie. added leading and trailing as i suggested? and what constraints are you using to display the cells? And overall how the page is setup. – Rikh Nov 27 '16 at 08:15
  • Please See i have added image i put collectionview in viewcontroller and thats the design – iOS Ninja Nov 27 '16 at 08:20
  • Ok Finally i Managed and it worked Thanks Bro For answering – iOS Ninja Nov 27 '16 at 08:43
1

You need to calculate the item size according to the screensize in the collectionView. Minimum spacing should be fixed.

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
     if UIScreen.mainScreen().applicationFrame.width > 375 { //iPhone 6plus
         //Calculate cell size
     }
     else if UIScreen.mainScreen().applicationFrame.width <= 375 && UIScreen.mainScreen().applicationFrame.width > 320 { //iPhone 6
         //Calculate cell size
     }
     else {
         //Calculate cell size
     } 
     return CGSizeMake(width, height)
}

Also conform to UICollectionViewDelegateFlowLayout like

class XYZ : UICollectionViewController, UICollectionViewDelegateFlowLayout
Sahil Mahajan
  • 3,922
  • 2
  • 29
  • 43
-2

Make your class conform to UICollectionViewDatasource and UICollectionViewDelegate and add these functions to make 5 columns of 10 rows: 

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 5
}

func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 10
}
camelCaseUpInYourFace
  • 27
  • 5