CODEWITHSUNDEEP
iosswiftcollectionviewflowlayout
iOS Ninja
iOS Ninja

Reputation: 111

Collection View With Fixed Number of Rows and Columns

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?

Upvotes: 4

Views: 9263

Answers (3)

camelCaseUpInYourFace
camelCaseUpInYourFace

Reputation: 27

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
}

Upvotes: -2

Rikh
Rikh

Reputation: 4222

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!

Upvotes: 6

Sahil Mahajan
Sahil Mahajan

Reputation: 3990

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

Upvotes: 1

Related Questions