Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
546 views
in Technique[技术] by (71.8m points)

ios - UICollectionView Cell Spacing based on device screen size

I have implemented a UICollectionView, the cell size is w90 h90. When i run it on iPhone 6 i get the proper spacing between cell but when i do it on iPhone 5s i get more spacing between cell. My question is how do i change cell size based on the device screen size, suppose if the cell size was w80 h80 i get proper results on iPhone 5s too. what I'm presently doing is

 override func viewWillAppear(animated: Bool) {

        var scale = UIScreen.mainScreen().scale as CGFloat
        println("Scale :(scale)")

        var cellSize = (self.collectionViewLayout as UICollectionViewFlowLayout).itemSize
        println("Cell size :(cellSize)")

        imageSize = CGSizeMake(cellSize.width * scale , cellSize.height * scale)
        println("Image size : (imageSize)")

    }

// sizeForItemAtIndexPath

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

        return imageSize!

   }

Result on iPhone 6 : enter image description here

Result on iPhone 5s enter image description here

Objective-C / Swift both fine for solution. Thanks.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Step 1: Implement UICollectionViewDelegateFlowLayout(if not done).

Step 2: Use delegate method of UICollectionViewDelegateFlowLayout.

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
{
return CGSizeMake((UIScreen.mainScreen().bounds.width-15)/4,120); //use height whatever you wants.
}

Step 3: Go to XIB or StoryBoard where you have your CollectionView.

Step 4: In XIB or StoryBoard where you have your CollectionView click on CollectionView.

Step 5: Go to InterfaceBuilder, then in second last tab (ie: Size Inspector) set Min Spacing

For Cells = 5

For Lines = 5

That it.

Note:

  • This solution is for if you wants to make spacing between cell = 5.
  • If your spacing is different then 5, then you need to change value 15 in delegate method.
  • Ex: Spacing between cell = 10, then change delegate 15 to 10x3 = 30

return CGSizeMake((UIScreen.mainScreen().bounds.width-30)/4,120);

  • And set Min Spacing

For Cells = 10

For Lines = 10

and vice versa.

Swift 3 Version

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let width = UIScreen.main.bounds.width
    return CGSize(width: (width - 10)/3, height: (width - 10)/3) // width & height are the same to make a square cell
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...