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
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。