Question

如何自定义CollectionView中每个元素的大小和间距

Answer 1

方法如下：

1、在你的视图控制器头文件中实现UICollectionViewFlowLayout协议。

2、设置每个单元格的大小。

3、设置单元格间的横向间距。

4、设置纵向的行间距。

5、通过调整inset使单元格顶部和底部都有间距(inset次序: 上，左，下，右边)。

Answer 2

Step 1:

在你的视图控制器头文件中实现UICollectionViewFlowLayout协议

eg:

@interface XXViewController : UICollectionViewController<UICollectionViewFlowLayout>

...

@end

Step 2:

设置每个单元格的大小

eg:

- (CGSize) collectionView:(UICollectionView *)collectionView
　　layout:(UICollectionViewLayout *)collectionViewLayout
　　sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
　　return CGSizeMake(104.0f, 104.0f);
}

Step 3:

设置单元格间的横向间距

eg:

- (CGFloat) collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
return 2.0f;
}

Step 4:

设置纵向的行间距

eg:

- (CGFloat) collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 2.0f;
}

step 5:

通过调整inset使单元格顶部和底部都有间距(inset次序: 上，左，下，右边)

eg:

- (UIEdgeInsets) collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(2.0f, 0.0f, 2.0f, 0.0f);
}

Answer 3

Step 1:
在你的视图控制器头文件中实现UICollectionViewFlowLayout协议
eg:
@interface XXViewController : UICollectionViewController<UICollectionViewFlowLayout>

...

@end

Step 2:
设置每个单元格的大小
eg:

- (CGSize) collectionView:(UICollectionView *)collectionView
　　layout:(UICollectionViewLayout *)collectionViewLayout
　　sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
　　return CGSizeMake(104.0f, 104.0f);
}

Step 3:
设置单元格间的横向间距
eg:
- (CGFloat) collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
return 2.0f;
}

Step 4:
设置纵向的行间距
eg:
- (CGFloat) collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 2.0f;
}

step 5:
通过调整inset使单元格顶部和底部都有间距(inset次序: 上，左，下，右边)
eg:
- (UIEdgeInsets) collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(2.0f, 0.0f, 2.0f, 0.0f);
}