UICollectionView Cell Spacing 基于设备屏幕大小 [英] UICollectionView Cell Spacing based on device screen size

问题描述

我已经实现了一个 UICollectionView，单元格大小是 w90 h90.当我在 iPhone 6 上运行它时，我得到了单元格之间的适当间距，但是当我在 iPhone 5s 上运行它时，我得到了更多单元格之间的间距.我的问题是如何根据设备屏幕尺寸更改单元格大小，假设如果单元格大小为 w80 h80，我在 iPhone 5s 上也能得到正确的结果.我现在正在做的是

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

// sizeForItemAtIndexPath

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

        return imageSize!

   }

iPhone 6 上的结果:

Result on iPhone 6 :

iPhone 5s 上的结果

Result on iPhone 5s

Objective-C/Swift 都适用于解决方案.谢谢.

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

推荐答案

第 1 步: 实现 UICollectionViewDelegateFlowLayout(如果没有完成).

Step 1: Implement UICollectionViewDelegateFlowLayout(if not done).

第二步:使用UICollectionViewDelegateFlowLayout的委托方法.

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.
}

第 3 步:转到您拥有 CollectionView 的 XIB 或 StoryBoard.

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

第 4 步:在 XIB 或 StoryBoard 中，您有 CollectionView，点击 CollectionView.

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

第 5 步: 转到 InterfaceBuilder，然后在倒数第二个选项卡(即:Size Inspector)中设置 Min Spacing

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

对于单元格 = 5

对于线 = 5

那个.

注意:

• 此解决方案适用于您希望在单元格之间设置间距 = 5.
• 如果您的间距与 5 不同，则需要在委托方法中更改值 15.
• 例如:单元格之间的间距 = 10，然后将委托 15 更改为 10x3 = 30

• 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);

• 并设置最小间距

对于单元格 = 10

对于 Lines = 10

反之亦然.

Swift 3 版本

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
}

这篇关于UICollectionView Cell Spacing 基于设备屏幕大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！