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

标签: ios
312人阅读 评论(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.代理方法,就懒得写了

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

查看评论

手把手教你做一个 C 语言编译器(9):总结

恭喜你完成了自己的 C 语言编译器,本章中我们发一发牢骚,说一说编写编译器值得注意的一些问题;编写编译器时遇到的一些难题。 本系列: 手把手教你做一个 C 语言编译器(0):前言手把手教你...
  • benpaobagzb
  • benpaobagzb
  • 2016-03-07 23:48:38
  • 1303

《手把手教你读财报》- 读书总结

本书的特色 以贵州茅台2013年财报为线索,引领全书,读起来不至于太枯燥。 理论+实践,很好的典范! 贵州茅台,业务比较单一,财报比较好理解。...
  • FansUnion
  • FansUnion
  • 2016-08-10 17:17:37
  • 2847

[4] Word 手把手教你写毕业论文-1

本文从前到后的介绍了使用word排版长文档诸如论文等的详细步骤,包括最开始的页面布局,到多级列表,样式链接,页码页眉页脚,续下一篇页面布局 大小,页边距(为了方便双面打印,奇数页和偶数页要设置不同...
  • yangfeng2014
  • yangfeng2014
  • 2016-04-13 08:01:43
  • 472

手把手教你构建自己的LINUX系统(高清完整版)

  • 2017年09月25日 08:26
  • 229.13MB
  • 下载

手把手教你安卓入门(二)

我们就开始正式开发“计算器”应用
  • anddlecn
  • anddlecn
  • 2016-05-23 20:59:27
  • 10488

基于IntelliJ IDEA编译器编写maven+Spring MVC+MyBatis(SSM)项目(二)

从零开始,使用IntelliJ IDEA创建spring + SpringMVC + MyBatis项目,和创建过程中遇见的问题。...
  • qq_16550381
  • qq_16550381
  • 2017-07-18 09:58:47
  • 478

【爬虫】手把手教你写网络爬虫(1)

从零开始写爬虫,初学者的速成指南!
  • JDJRdata
  • JDJRdata
  • 2017-06-23 11:10:20
  • 3960

手把手教你写电商爬虫-第一课 找个软柿子捏捏

话说现在基本上大家都在网上买东西,国家经济数据已经可以在网络购物的数据中略微窥见一二,再加上目前B2B行业的持续火爆,大有把所有交易搬到网上来的趋势,这个系列教程就来讲讲如果爬取这些大量的电商交易的数...
  • youmumzcs
  • youmumzcs
  • 2016-05-11 15:13:42
  • 16845

手把手教你学Ztree

https://note.wiz.cn/pages/manage/biz/payRead.html?kb=3fe9d146-6498-4882-b75c-f533442aba5b
  • huaweitman
  • huaweitman
  • 2017-06-21 17:51:07
  • 832

手把手教你构建自己的Linux系统.pdf

  • 2015年02月01日 09:07
  • 45.38MB
  • 下载
    个人资料
    等级:
    访问量: 3万+
    积分: 569
    排名: 9万+
    文章分类
    最新评论