设置网格UICollectionView的单元格间距

来源：互联网发布：微信 for ubuntu 编辑：程序博客网时间：2024/05/18 03:02

要设置单元格cell的间距（水平间距，垂直间距）可进行如下设置：

方法1：在storyboard中设置

选择Collection View后在面板里设置Min Spacing相关属性（这里也可以设置单元格大小）

方法2：在代码里设置

1
2
3
4
5
6
7
8
9
10
11
12
13
import UIKit
 
class ViewController: UICollectionViewController{
    overridefunc viewDidLoad() {
        super.viewDidLoad()
        
        varflow:UICollectionViewFlowLayout= self.collectionViewLayoutas! UICollectionViewFlowLayout
        //水平间隔
        flow.minimumInteritemSpacing = 5.0
        //垂直行间距
        flow.minimumLineSpacing = 5.0    
    }
}

注意：这个设置的是允许的最小间距，程序可能会自动调整的

如下图，单元格尺寸固定为100*100。同时将水平间距、垂直间距都设为2。虽然垂直间距没问题，但由于水平间距如果是2的话，一行摆3个单元格填充不满一行，一行摆4个单元格又不够。

那么程序就会自动调大单元格的水平间距，让一行里面均匀地分布3个单元格。

如果想要使间距不发生变化，可以有如下两种方法（或是这两种方法的结合）：

方法1：让单元格宽度动态变化

比如下图，每行摆放3个单元格，每个单元格的宽度是：（视图宽度 - 2个间距）/ 3。这样无论屏幕尺寸如何变化，水平间距都是固定的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
overridefunc viewDidLoad() {
    super.viewDidLoad()
     
    self.collectionView?.backgroundColor =UIColor.whiteColor()
    letlayout:UICollectionViewFlowLayout= self.collectionViewLayout
        as!UICollectionViewFlowLayout
    //间隔
    letspacing:CGFloat= 2
    //水平间隔
    layout.minimumInteritemSpacing = spacing
    //垂直行间距
    layout.minimumLineSpacing = spacing
     
    //列数
    letcolumnsNum = 3
    //整个view的宽度
    letcollectionViewWidth = self.collectionView!.bounds.width
    //计算单元格的宽度
    letitemWidth = (collectionViewWidth - spacing * CGFloat(columnsNum-1))
        /CGFloat(columnsNum)
    //设置单元格宽度和高度
    layout.itemSize =CGSizeMake(itemWidth, itemWidth)
}

方法2：单元格宽度固定，两侧设置内边距
如下图，单元格和水平间距是固定的，但在两侧设置内边距，每个边距宽度是：（视图宽度 -2个间距 -3个单元格宽度）/ 2。
（当然也可以只在一侧设置被边距，比如右侧留白）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
overridefunc viewDidLoad() {
    super.viewDidLoad()
     
    self.collectionView?.backgroundColor =UIColor.whiteColor()
    letlayout:UICollectionViewFlowLayout= self.collectionViewLayout
        as!UICollectionViewFlowLayout
    //间隔
    letspacing:CGFloat= 2
    //水平间隔
    layout.minimumInteritemSpacing = spacing
    //垂直行间距
    layout.minimumLineSpacing = spacing
     
    //列数
    letcolumnsNum = 3
    //整个view的宽度
    letcollectionViewWidth = self.collectionView!.bounds.width
    letleftGap = (collectionViewWidth - spacing * CGFloat(columnsNum-1)
        -CGFloat(columnsNum) * layout.itemSize.width) / 2
     print(leftGap)
    layout.sectionInset =UIEdgeInsets(top: 0, left: leftGap, bottom: 0, right: leftGap)
}

参考原文链接：http://www.hangge.com/blog/cache/detail_762.html

0 0