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

UICollectionView是日常最常用開發組件之一，其重要程度不亞于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];//流水布局，必須要創建一種布局給他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的大小，雙數的為50*50 單數的為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;

設置分區的EdgeInset

@property (nonatomic) UIEdgeInsets sectionInset;

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

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

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

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

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

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

動態設置每個分區的EdgeInsets

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

動態設置每行的間距大小

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

動態設置每列的間距大小

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

動態設置某個分區頭視圖大小

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

動態設置某個分區尾視圖大小

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

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。