[iOS]UICollectionView设置cell之间的间距

[iOS]UICollectionView设置cell之间的间距

demo:http://download.csdn.net/download/u012881779/10026346

简单说下，两种设置UICollectionView的cell间距的方式。

方式一:

用下面这四个代理方法设置间距。需要注意第二个方法是设置Section距四边或距下一个section的距离，并非是在设置各cell之间的距离。

#define GH_SCREENWIDTH [UIScreen mainScreen].bounds.size.width
#define GH_SCREENHIGH  [UIScreen mainScreen].bounds.size.height
// 多少列
#define GH_BRANDSECTION 4
// 列表间隔距离
#define GH_BRANDDEV 10
// cell宽度
#define GH_LIST1CELLWIDTH (GH_SCREENWIDTH - (GH_BRANDSECTION + 1)*GH_BRANDDEV) / GH_BRANDSECTION


// 定义每个Cell的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    return CGSizeMake(GH_LIST1CELLWIDTH, GH_LIST1CELLWIDTH);
}

// 定义每个Section的四边间距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    // UIEdgeInsets insets = {top, left, bottom, right};
    return UIEdgeInsetsMake(GH_BRANDDEV, GH_BRANDDEV, GH_BRANDDEV, GH_BRANDDEV);
}

// 两行cell之间的间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
    return GH_BRANDDEV;
}

// 两列cell之间的间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
    return GH_BRANDDEV;
}

用方式一基本能搞定所有需求，但会发现间距区域基本成了无效区域，就是说在间隔区域中放不了控件。若奇葩点的需求一定要求在间距区域添加东西怎么办，就换用下面方式。

方式二：

控制器中不设置cell之间的间距。这里就偷个懒直接设置cell等宽高了，稍微想想就明白，其实在外圈的cell这里应该设置得要比其它cell大。

// cell宽度
#define GH_BRANDCELLWIDTH GH_SCREENWIDTH / GH_BRANDSECTION

// 定义每个Cell的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    return CGSizeMake(GH_BRANDCELLWIDTH, GH_BRANDCELLWIDTH);
}

在cell中约束rootView距离各边的距离。这样生成的间距只是各cell之中放内容的rootView之间的距离，间距区域仍属于有效区域。

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *topDevConstraint;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *downDevConstraint;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *leftDevConstraint;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *rightDevConstraint;


- (void)releaseAction {
    _topDevConstraint.constant   = GH_BRANDDEV/2.0;
    _downDevConstraint.constant  = GH_BRANDDEV/2.0;
    _leftDevConstraint.constant  = GH_BRANDDEV/2.0;
    _rightDevConstraint.constant = GH_BRANDDEV/2.0;
}

- (void)initWithObject:(id)object IndexPath:(NSIndexPath *)indexPath Count:(NSInteger)count {
    [self releaseAction];
    if (object) {
        if (indexPath) {
            NSInteger row = indexPath.row;
            if (row < GH_BRANDSECTION) {
                // 第一行
                _topDevConstraint.constant   = GH_BRANDDEV;
            }
            if (row%GH_BRANDSECTION == 0) {
                // 第一列
                _leftDevConstraint.constant  = GH_BRANDDEV;
            }
            if (row%GH_BRANDSECTION == GH_BRANDSECTION-1) {
                // 最后一列
                _rightDevConstraint.constant = GH_BRANDDEV;
            }
                // 最后一行
            NSInteger chu = count/GH_BRANDSECTION;
            NSInteger yu  = count%GH_BRANDSECTION;
            if (yu == 0) {
                if (row >= (chu-1)*GH_BRANDSECTION) {
                    _downDevConstraint.constant  = GH_BRANDDEV;
                }
            } else {
                if (row >= chu*GH_BRANDSECTION) {
                    _downDevConstraint.constant  = GH_BRANDDEV;
                }
            }
        }
    }
}

示意图：

方式一

方式二

在cell中约束BackView于各边的距离