IOS流水布局UICollectionView使用FlowLayout進行自由靈活組合

UICollectionView是日常最常用開發(fā)組件之一，其重要程度不亞于UITableViewController。例如抖音作品展示頁，圖標展示頁。直播展示頁。淘寶展示頁。抖音上滑動，下滑動，基本上都是UICollectionView，對UICollectionView不熟悉的，需要跳到它的頭文件看一下。蘋果把最重要的 屬性通通放在最前面，英語不認識的，要查一下。

// // ViewController.m // UICollectionDemo // // Created by lujun on 2021/10/26. //#import "ViewController.h" static NSString * const cellId = @"cellid"; @interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource> @end @implementation ViewController - (void)viewDidLoad {[super viewDidLoad];//流水布局，必須要創(chuàng)建一種布局給他UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];layout.scrollDirection = UICollectionViewScrollDirectionVertical;//layout.minimumLineSpacing = 2;//行與行之間的間距最小距離// layout.minimumInteritemSpacing = 2; //列與列之間的間距最小距離layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);UICollectionView *collect = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:layout];collect.delegate=self;collect.dataSource=self;//彈簧效果collect.bounces = YES;//注冊Cell[collect registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:cellId];[self.view addSubview:collect]; } //設置每個item的大小，雙數(shù)的為50*50 單數(shù)的為100*100 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{if (indexPath.row%2==0) {return CGSizeMake(50, 50);}else{return CGSizeMake(100, 100);} } //代理相應方法 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{return 1; } -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{return 100; } -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellId forIndexPath:indexPath];cell.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];return cell; }@end

效果

UICollectionViewFlowLayout是流水布局，可以跳到它的頭文件，查看它的成員屬性和方法。

設置行與行之間的間距最小距離

@property (nonatomic) CGFloat minimumLineSpacing;

設置列與列之間的間距最小距離

@property (nonatomic) CGFloat minimumInteritemSpacing;

設置每個item的大小

@property (nonatomic) CGSize itemSize;

設置每個Item的估計大小，一般不需要設置

@property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0);

設置布局方向，是一個枚舉，有水平，也有豎直方向

@property (nonatomic) UICollectionViewScrollDirection scrollDirection;

設置頭視圖尺寸大小

@property (nonatomic) CGSize headerReferenceSize;

設置尾視圖尺寸大小

@property (nonatomic) CGSize footerReferenceSize;

設置分區(qū)的EdgeInset

@property (nonatomic) UIEdgeInsets sectionInset;

這個屬性可以設置分區(qū)的偏移量，例如我們在剛才的例子中添加如下設置

layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);

效果如下，會看到分區(qū)的邊界閃出了20像素
下面這兩個方法設置分區(qū)的頭視圖和尾視圖是否始終固定在屏幕上邊和下邊

@property (nonatomic) BOOL sectionHeadersPinToVisibleBounds; @property (nonatomic) BOOL sectionFootersPinToVisibleBounds;

動態(tài)的配置layout的相關屬性UICollectionViewDelegateFlowLayout
就要使用代理方法（或者說是協(xié)議），根據(jù)條件去判斷。
動態(tài)設置每個Item的尺寸大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

動態(tài)設置每個分區(qū)的EdgeInsets

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;

動態(tài)設置每行的間距大小

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;

動態(tài)設置每列的間距大小

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;

動態(tài)設置某個分區(qū)頭視圖大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;

動態(tài)設置某個分區(qū)尾視圖大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;

學習IOS最有效的辦法就是多看頭文件，看蘋果怎么去定義的，怎么聲明頭文件的。提供了什么類方法，或者對象方法，看看它的父類是誰，繼承誰身上，那么父類的屬性就全部得到了。
git地址如下。
https://e.coding.net/lujun1/iossnapkit/IOSUICollectionDemo.git

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的IOS流水布局UICollectionView使用FlowLayout进行自由灵活组合的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。