关闭

手把手教你使用UICollectionView写公司的项目

标签: ios
140人阅读 评论(0) 收藏 举报
分类:
111648725-292f3328ae785a0f

公司的UI图

在很多app中都有这样通用的页面,一直没有机会使用UICollectionView,只是简单的看过他的使用方法。今天公司美工出图,使用了他,并且遇到了好多的坑。记录一下过程,不确定使用的方法是不是最优的,如果有更好的方案,一起讨论,一起进步

理论篇

一.UICollectionViewLayout是做什么的?

1.1 在创建UITableView的时候,使用的是- (instancetype)initWithFrame:(CGRect)frame style:(UITableViewStyle)style用于判断是普通还是分组
1.2 UICollectionViewLayout实际的作用是一样的,是用来设置cell的布局的,初始化collectionView的时候,一定要给他设置这个属性,否者不会显示。UICollectionViewFlowLayoutUICollectionViewLayout的子类,给collectionView赋值的时候,一定要使用 UICollectionViewFlowLayout初始化。
1.3 UICollectionViewFlowLayoutUICollectionViewLayout的关系就像是UIGestureRecognizerUITapGestureRecognizer的一样。一个是父类,一个是子类。使用的时候都用子类

二. UICollectionViewLayout的属性
121648725-d5b8bc2bfc641f24

每一个绿色款都是cell

如果都是固定的,建议生成layout对象的时候,设置全局属性,(其布局很有意思,当你的cell设置大小后,一行多少个cell,由cell的宽度决定)

minimumLineSpacing 属性详解

131648725-c42e0a3a8bb44ad5

绿色是minimumLineSpacing最新行间距
141648725-b3db6d63d29f88fd

蓝色是实际的行间距
151648725-6c50b49cece25a8c

在实际开发过程中,很可能行间距会是不同的

sectionInset 属性详解

161648725-03bb059124d1b684

sectionInset的配图,每个组装有很多的cell,默认该属性是0,如图
171648725-f2403f83f67f398c

但是有的是时候我们会往里面切图,整个组往里面切,里面的cell也跟着移动

注意,我刚才说的,如果所有的cell都是一样尺寸,我们可以设置初始化layout之后,直接赋值,如果想我们公司那样,随意可能改变,建议看看下边的代理方法

三. UICollectionViewLayout的代理方法

3.1 过去我们使用UITableView的时候,直接声明数据源方法,和代理方法,
3.2 使用UICollectionView的时候,也要声明两个。
1.UICollectionViewDelegateFlowLayout
2.UICollectionViewDataSource
因为1中包含了3.UICollectionViewDelegate,所以可以省略3

四. UICollectionView的组头和组尾(页眉和页脚)
181648725-81eb0f19e60dbaeb

组头和足尾

1.UICollectionView中非常明确是以为单位,可以设置组的组头和尾巴,这里的头尾还可以复用
2.复用的时候,首先头尾view要继承于
UICollectionReusableView,然后注册(分为nib和class两种)
3.用的时候通过collectionView去dequeue一下获取,和cell的思路一样
4.可以使用上文中的layout属性直接设置组头和组尾的size,也可以使用代理方法,去设置

五. UICollectionView的数据源方法

和tableview的数据源方法一样,想要成为其数据源,然后声明数据源

六. UICollectionView的代理方法

实战篇

一. 将设计图分解成合理结构
191648725-f8613bb43bd66377

被分解后的设计图

分解原因及说明

0.创建控制器(继承自UICollectionViewController),然后创建基本的layout,给某些固定的数据赋值


1.说了一顿,特意说明,UICollectionView是很强调这个概念,有组头组尾这两个概念,但一直没有提到tableHeaderView这样的控件,所以我们将1(轮播图)+2(两个按键view)+ 间隔+3(精选动态)封装成第一组的headerView(封装的类名是THFineAdView),继承自UICollectionReusableView(继承自UIView,没啥功能,除了复用)


2.将5也集成字UICollectionReusableView封装一下


3.封装完毕之后,要去注册一下,注册的使用,分为nib,和class注册


3.1 第一组的headerView是同纯代码封装的,所以注册的时候这样

3.2 第二组的headerView使用的是nib方式,所以也要注册一下

3.3 (模块4和模块5之间的间隙,模块6和模块7之间的间隙)可以通过sectionInset来实现,但是我认为成为组1,组2的sectionFooter更加靠谱一些。那就注册一下

注意 UICollectionElementKindSectionHeader这个代表头的意思,如果注册尾巴,使用UICollectionElementKindSectionFooter
注册的三个方法应该写在一起

4.调用组头和组尾

5.调用组头和组尾的高度

设置头和尾的size,要用两个代理方法,使用代理方法的好处在于可以分情况判断

6.数据源方法

7.在使用自定义cell之前一定要注册,否者不能复用,给系统造成很大的压力,经常卡顿

8.如何自定义cell

他的自定义非常简单,就几个方法

如果是xib加载的话,最多有个awakeFromNib和view的一样使用

9.代理方法,就懒得写了

如果各位同行有什么好的建议,可以告诉我,我会虚心接受,再次修改本文的,一起进步~ 顺便给有个好文章,可以看看 参考文档

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:28223次
    • 积分:448
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:78篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论