iOS - UICollectionView cell间距调整

记录UICollectionView cell间距调整方法

啥东西不经常用就会忘记,以后要做好笔记. (⊙o⊙)

• 实例化了一个CollectionView

    UICollectionViewFlowLayout* layout = [[UICollectionViewFlowLayout alloc]init];
        layout.minimumLineSpacing      = kLineSpacing;
        layout.minimumInteritemSpacing = kItemSpacing;
        layout.scrollDirection         = UICollectionViewScrollDirectionVertical;
        
        _cusCollectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT) collectionViewLayout:layout];
        _cusCollectionView.backgroundColor = [UIColor whiteColor];
        _cusCollectionView.delegate   = self;
        _cusCollectionView.dataSource = self;
        
        [_cusCollectionView registerClass:[DC_CustomizeView class]
 forCellWithReuseIdentifier:CustomizeCelliIdentify];

---

• 定义的一些值

static NSString *CustomizeCelliIdentify = @"CustomizeCelliIdentify";

static const CGFloat kLineSpacing = 5.f;   //列间距 |
static const CGFloat kItemSpacing = 8.f;   //item之间的间距  --
static const CGFloat kCellMargins = 5.f;   //左右缩进
static const NSInteger kRowNumber = 4;     //列数
static const CGFloat kCellHeight  = 80.f;  //Cell高度

---

• 常用的协议方法

//MARK: - UICollectionDatasoure

//显示几个section
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}

//每个section中显示多个item
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 12;
}

//配置单元格的方法
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    DC_CustomizeView* cell = [collectionView dequeueReusableCellWithReuseIdentifier:CustomizeCelliIdentify forIndexPath:indexPath];
    cell.title = [NSString stringWithFormat:@"%td - %td",indexPath.section,indexPath.item];
    cell.editing = YES;
    return cell;
}

//MARK: - UICollectionDelegate

//每个单元格的大小size
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake((SCREEN_WIDTH-kItemSpacing*(kRowNumber-1))/kRowNumber, kCellHeight);
}

• 以上代码写出的效果如下:

我是效果~~~

以上代码,可以看到我设置item行间距是8,列间距是5,我还想设置左右的缩进.就要用到其他的协议方法.

重点来了~~~

1. 调整item之间行 行(横)间距

   

   图是拿的别人?

调用方法如下:

• UICollectionViewFlowLayout的minimumInteritemSpacing(推荐这个,尽量少用协议)

• 协议方法

     //每个item之间的间距
     - (CGFloat)collectionView:(UICollectionView *)collectionView 
layout:(UICollectionViewLayout*)collectionViewLayout 
minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
           return kItemSpacing;
}

1. 调整item之间的 列(纵)间距

   

   图是拿的别人?

调用方法如下:

• UICollectionViewFlowLayout的minimumLineSpacing(推荐这个,尽量少用协议)

• 协议方法

     //每个item之间的间距
     - (CGFloat)collectionView:(UICollectionView *)collectionView 
layout:(UICollectionViewLayout*)collectionViewLayout
 minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
      return kLineSpacing;
}

1. 调整item 的大小

• UICollectionViewFlowLayout的itemSize

• 协议方法

     //每个单元格的大小size
     - (CGSize)collectionView:(UICollectionView *)collectionView 
layout:(UICollectionViewLayout*)collectionViewLayout 
sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
         return CGSizeMake(width,height);
}

1. 调整内容的边距(cell的左右上下缩进)

   

   图是拿的别人?

• UICollectionViewFlowLayout的sectionInset

• 协议方法:

   //边距设置:整体边距的优先级，始终高于内部边距的优先级
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView
 layout:(UICollectionViewLayout *)collectionViewLayout 
insetForSectionAtIndex:(NSInteger)section
{
 return UIEdgeInsetsMake(kSectionMargin, kSectionMargin, kSectionMargin, kSectionMargin);//分别为上、左、下、右
}

以上几个协议都出自 UICollectionViewDelegateFlowLayout

//item的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
//内容整体边距设置
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
//item 列间距(纵)
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
//item 行间距(横)
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
//headerview的size
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;
//footer的size
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;

以上方法都有对应的属性:

@property (nonatomic) CGFloat minimumLineSpacing;
@property (nonatomic) CGFloat minimumInteritemSpacing;
@property (nonatomic) CGSize itemSize;
@property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0); // defaults to CGSizeZero - setting a non-zero size enables cells that self-size via -preferredLayoutAttributesFittingAttributes:
@property (nonatomic) UICollectionViewScrollDirection scrollDirection; // default is UICollectionViewScrollDirectionVertical
@property (nonatomic) CGSize headerReferenceSize;
@property (nonatomic) CGSize footerReferenceSize;
@property (nonatomic) UIEdgeInsets sectionInset; 

我加上内容的整体边距(缩进)之后,效果如下:

我是有缩进的效果~

结语:

记录就到这里了,collectionview中item的间距应该都全了.以后再也不愁忘记了 ~~

作者：态度哥
链接：https://www.jianshu.com/p/40914d5708af
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。