UICollectionView Cell Spacing 基于设备屏幕大小

Posted 2023-03-13

【中文标题】UICollectionView Cell Spacing 基于设备屏幕大小

【英文标题】：UICollectionView Cell Spacing based on device screen size

【发布时间】：2015-03-05 07:11:29

【问题描述】：

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

 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!

   

iPhone 6 上的结果：

iPhone 5s 上的结果

Objective-C / Swift 都适合解决问题。 谢谢。

【问题讨论】：

使用以下方法 collectionView(_:layout:sizeForItemAtIndexPath:) 并根据屏幕定义单元格大小

【参考方案1】：

第 1 步： 实施 UICollectionViewDelegateFlowLayout（如果未完成）。

第二步：使用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。

第 4 步：在 XIB 或 StoryBoard 中，您有 CollectionView，点击 CollectionView。

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

对于单元格 = 5

对于线 = 5

那个。

注意：

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

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

并设置

最小间距

For Cells = 10

For 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

【讨论】：

太棒了！！！！这是一个完美的解决方案。搜索并尝试了很多答案，但都失败了。

拯救了我的一天！感谢您的回答：）

【参考方案2】：

更灵活的答案

允许您调整列数和间距，扩展 Zaid Pathan 的答案

// MARK: UICollectionViewDelegateFlowLayout delegate method
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize

    let cellSpacing = CGFloat(2) //Define the space between each cell
    let leftRightMargin = CGFloat(20) //If defined in Interface Builder for "Section Insets"
    let numColumns = CGFloat(3) //The total number of columns you want

    let totalCellSpace = cellSpacing * (numColumns - 1)
    let screenWidth = UIScreen.mainScreen().bounds.width
    let width = (screenWidth - leftRightMargin - totalCellSpace) / numColumns
    let height = CGFloat(110) //whatever height you want

    return CGSizeMake(width, height);

【参考方案3】：

我想要在 iPad 和 iPhone 的一个部分中包含 3 个项目。我使用以下代码进行了计算。希望对您有所帮助！

实现 UICollectionViewDelegateFlowLayout 委托

添加此代码

 var device = UIDevice.currentDevice().model

 func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
 
     if (device == "iPad" || device == "iPad Simulator")
     
         return CGSizeMake((UIScreen.mainScreen().bounds.width-15)/3,230)
     
     return CGSizeMake((UIScreen.mainScreen().bounds.width-10)/3,120)
 

`

【讨论】：

感谢这些数据，它帮助我增加了 ipad 的 UICollectionView 项目的大小

【参考方案4】：

Objective-c 示例：

使用这个功能

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath 
     return CGSizeMake(Your desired width, Your desired height);    
    // example: return CGSizeMake(self.view.frame.size.width-20, 100.f);

【参考方案5】：

为了扩展Tim's answer，有一个关于部分点宽度的小警告：部分点宽度的舍入可能会导致宽度比允许的所需列数更宽。解决此问题的一种方法是使用 trunc() 截断宽度：

 return CGSizeMake(trunc(width), height)