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:

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

回答1:

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!

回答2:

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

回答3:

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
}

来源：https://stackoverflow.com/questions/40826242/collection-view-with-fixed-number-of-rows-and-columns

标签

ios

swift

collectionview

flowlayout