iOS流布局UICollectionView系列三——使用FlowLayout进行更灵活布局

简介:

iOS流布局UICollectionView系列三——使用FlowLayout进行更灵活布局

一、引言

        前面的博客介绍了UICollectionView的相关方法和其协议中的方法,但对布局的管理类UICollectionViewFlowLayout没有着重探讨,这篇博客介绍关于布局的相关设置和属性方法。

UICollectionView的简单使用:http://my.oschina.net/u/2340880/blog/522613   

UICollectionView相关协议方法:http://my.oschina.net/u/2340880/blog/522613

通过layout的设置,我们可以编写更加灵活的布局效果。

二、将九宫格式的布局进行升级

        在第一篇博客中,通过UICollectionView,我们很轻松的完成了一个九宫格的布局,但是如此中规中矩的布局方式,有时候并不能满足我们的需求,有时我们需要每一个Item展示不同的大小,代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
- ( void )viewDidLoad {
     [super viewDidLoad];
     // Do any additional setup after loading the view, typically from a nib.
     UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
     layout.scrollDirection = UICollectionViewScrollDirectionVertical;
     UICollectionView *collect = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, 320, 400) collectionViewLayout:layout];
     collect.delegate=self;
     collect.dataSource=self;
     
     [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;
}

效果如下:

现在的布局效果是不是炫酷了许多。

三、UICollectionViewFlowLayout相关属性方法

        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;

这个UICollectionViewScrollDirection的枚举如下:

?
1
2
3
4
typedef  NS_ENUM(NSInteger, UICollectionViewScrollDirection) {
     UICollectionViewScrollDirectionVertical, //水平布局
     UICollectionViewScrollDirectionHorizontal //垂直布局
};


设置头视图尺寸大小

@property (nonatomic) CGSize headerReferenceSize;


设置尾视图尺寸大小

@property (nonatomic) CGSize footerReferenceSize;


设置分区的EdgeInset

@property (nonatomic) UIEdgeInsets sectionInset;

这个属性可以设置分区的偏移量,例如我们在刚才的例子中添加如下设置:

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

效果如下,会看到分区的边界闪出了20像素


下面这两个方法设置分区的头视图和尾视图是否始终固定在屏幕上边和下边

@property (nonatomic) BOOL sectionHeadersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);

@property (nonatomic) BOOL sectionFootersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);

四、动态的配置layout的相关属性UICollectionViewDelegateFlowLayout

        上面的方法在创建FlowLayout时静态的进行设置,如果我们需要动态的设置这些属性,就像我们例子中的,每个item的大小会有差异,我们可以通过代理来实现。

        UICollectionViewDelegateFlowLayout是UICollectionViewDelegate的子协议,其中常用方法如下,我们只需要实现我们需要的即可:

动态设置每个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;


目录
打赏
0
0
0
0
34
分享
相关文章
iOS页面布局:UIScrollView的布局问题
iOS页面布局:UIScrollView的布局问题
115 8
iOS 用一个布局来解决嵌套问题—— UICollectionViewCompositionalLayout
iOS 用一个布局来解决嵌套问题—— UICollectionViewCompositionalLayout
iOS 用一个布局来解决嵌套问题—— UICollectionViewCompositionalLayout
iOS布局中的抗被拉伸、抗压缩优先级
iOS布局中的抗被拉伸、抗压缩优先级
803 0
IOS15上纯代码布局之导航控制器的导航条为透明的问题
IOS15上纯代码布局之导航控制器的导航条为透明的问题
246 0
IOS使用纯代码布局替换掉默认的storyboard
IOS使用纯代码布局替换掉默认的storyboard
123 0
iOS开发:设置UICollectionView不同大小的item的方法
在iOS开发过程中,UICollectionView的使用作为iOS开发者来说都不陌生,但是要想完美的玩转UICollectionView的所有使用的技巧,还是需要了解很多的。本篇博文来分享一下关于UICollectionView设置不同大小item的方法,为的是迎合产品的需求,方便记录为了以后查看使用,分享给有需要的人。
1033 0
iOS开发:设置UICollectionView不同大小的item的方法
iOS第三方左对齐布局类——UICollectionViewLeftAlignedLayout
iOS第三方左对齐布局类——UICollectionViewLeftAlignedLayout
523 0
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
147 67
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。

热门文章

最新文章

  • 1
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    47
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    19
  • 3
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    59
  • 4
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    32
  • 5
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    13
  • 6
    iOS各个证书生成细节
    16
  • 7
    iOS7应用开发7:自定义视图、手势操作
    1
  • 8
    IOS小工具以及精彩的博客
    507
  • 9
    iOS - Swift NSPoint 位置
    1
  • 10
    iOS开发-UIScrollView原理
    655
  • 1
    iOS各个证书生成细节
    16
  • 2
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    59
  • 3
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    32
  • 4
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    47
  • 5
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    40
  • 6
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    32
  • 7
    uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
    147
  • 8
    【05】2025年1月首发完整版-篇幅较长-苹果app如何上架到app store完整流程·不借助第三方上架工具的情况下无需花钱但需仔细学习-优雅草央千澈详解关于APP签名以及分发-们最关心的一篇来了-IOS上架app
    279
  • 9
    app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
    99
  • 10
    深入探索iOS开发中的SwiftUI框架
    149
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等