UICollectionView基于设备屏幕大小的单元间距

我已经实现了一个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都很好的解决scheme。 谢谢。

Answer 1

第1步：实现UICollectionViewDelegateFlowLayout（如果没有完成）。

第2步：使用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：在您有CollectionView的XIB或StoryBoard中点击CollectionView。

第5步：进入InterfaceBuilder，然后在第二个选项卡（即：大小检查器）设置最小间距

对于单元格= 5

对于线= 5

那呢。

注意：

• 这个解决scheme是为了如果你想间隔之间的单元格= 5 。
• 如果你的间距不同于5 ，那么你需要在委托方法中改变值15 。
• 例如：单元格间距= 10 ，然后将代理 15更改为10×3 = 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 } 

Answer 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); } 

Answer 3

Objective-c示例：

使用这个function

 - (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); } 

Answer 4

 I wanted 3 item in a section in Both IPad and iPhone. I worked out using the following code. Hope it helps! 1 ) Implement UICollectionViewDelegateFlowLayout delegate 2 ) 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) } 

Answer 5

为了扩大Tim的答案 ，关于局部点宽度有个小警告：局部点宽度的舍入可能会导致宽度比允许所需列的数量更宽。 解决此问题的一种方法是使用trunc（）截断宽度：

  return CGSizeMake(trunc(width), height)