• 问题总会出现,不过解决问题的方法也会出现!!!

UICollectionView

UICollectionView 小雨 2707次浏览 已收录 0个评论

什么是UICollectionView

• 在iOS中,要实现九宫格数据展示,最常用的做法就是使用UICollectionView
UICollectionView继承自UIScrollView,因此支持垂直滚动或水平滚动,而且性能极佳

UICollectionView简介

UICollectionView在iOS6中推出得,也是UIKit视图类中的一颗新星。它和UITableView共享API设计,但也在UITableView上做了一些扩展。UICollectionView最强大、同时显著超出UITableView的特色就是其完全灵活的布局结构
UITableView和UICollectionView都是由dataSoure和delegate驱动的。他们为其显示的子视图集扮演为愚蠢的容器,对他们真实的内容毫不知情。

UICollectionViewFlowLayout简介

UICollectionView进一步抽象了。它将其子视图的位置,大小和外观的控制权委托给一个单独的布局对象。通过提供一个自定义布局对象,你几乎可以实现任何你能想象到的布局。布局继承自UICollectionViewLayout这个抽象基类。iOS6中以UICollectionViewFlowLayout类的形式提出了一个具体的布局实现。

flow layout可以被用来实现一个标准的grid view,这可能是在collection view中最常见的使用案例了。尽管大多数人都这么想,但是Apple很聪明,没有明确的命名这个类为UICollectionViewGridLayout。而使用了更为通用的术语flow layout,这更好的描述了该类的能力:它通过一个接一个的放置cell来建立自己的布局,当需要的时候,插入横排或竖排的分栏符。通过自定义滚动方向,大小和cell之间的间距,flow layout也可以在单行或单列中布局cell。

如何展示数据

UICollectionView需要layout和数据源(dataSource) 来显示数据,
UICollecitonView会向数据源查询一共有多少行数据以及每一个显示什么数据等,在查询每一个显示什么数据前要确定设置了layout而且itemSize不能小于{0,0}
没有设置layout布局对象程序会崩溃
没有设置数据源和布局对象的UICollectionView只是个空壳
凡是遵守UITableViewDataSource协议的OC对象,都可以是UICollectionView的数据源

UICollectionView常用数据源方法

1. 调用数据源的下面方法得知一共有多少组数据
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;
2. 调用数据源的下面方法得知每一组有多少项数据
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;
3. 调用数据源的下面方法得知每一项显示什么内容
- (UICollectionViewCell *)collectionView:(UICollectionView *) collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;

UICollectionView的数据源必须实现第二个方法和第三个方法,第一个方法不实现默认就是1组

UICollectionView的常见属性

1. 布局对象
@property (nonatomic, strong) UICollectionViewLayout *collectionViewLayout;
2. 背景视图,会自动填充整个UICollectionView
@property (nonatomic, strong) UIView *backgroundView;
3. 是否允许选中cell 默认允许选中
@property (nonatomic) BOOL allowsSelection;
4. 是否可以多选 默认只是单选
@property (nonatomic) BOOL allowsMultipleSelection;

UICollectionViewFlowLayout常用属性

1. cell之间的最小行间距
@property (nonatomic) CGFloat minimumLineSpacing;
2. cell之间的最小列间距
@property (nonatomic) CGFloat minimumInteritemSpacing;
3. cell的尺寸
@property (nonatomic) CGSize itemSize;
4. cell的预估尺寸
@property (nonatomic) CGSize estimatedItemSize;
5. UICollectionView的滚动方向,默认是垂直滚动
@property (nonatomic) UICollectionViewScrollDirection scrollDirection;
6. HeaderView的尺寸
@property (nonatomic) CGSize headerReferenceSize;
7. FooterView的尺寸
@property (nonatomic) CGSize footerReferenceSize;
8. 分区的四边距
@property (nonatomic) UIEdgeInsets sectionInset;
9. 设置是否当元素超出屏幕之后固定页眉视图位置,默认NO
@property (nonatomic) BOOL sectionHeadersPinToVisibleBounds;
10. 设置是否当元素超出屏幕之后固定页脚视图位置,默认NO
@property (nonatomic) BOOL sectionFootersPinToVisibleBounds;

自定义布局的常用方法

//UICollectionView将要显示时准备布局,每当布局更新时,调用该方法做布局前的准备
-(void)prepareLayout;
//创建指定索引的cell的布局属性
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPat;
//返回UICollectionView内所有的控件的布局属性
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;
//自定义布局时一定要实现此方法来返回UICollectionView的contentSize,内容尺寸,UICollectionView的滚动范围
-(CGSize)collectionViewContentSize;

瀑布流简介

瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格

瀑布流特点

1. 琳琅满目:整版以图片为主,大小不一的图片按照一定的规律排列
2. 唯美:图片的风格以唯美的图片为主
3. 操作简单:在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前

瀑布流应用

瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作
瀑布流的主要特性便是错落有致,定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式,巧妙的利用视觉层级,视线的任意流动又缓解了视觉疲劳

使用瀑布流的网站

1. 电商导购,如想去网、蘑菇街和美丽说、好享说,依托于淘宝平台
2. 兴趣图谱分享,如知美、花瓣等
3. 细分垂直领域,如针对吃货的零食控、针对家居行业的他部落等

瀑布流的优缺点

 优点

有效的降低了界面复杂度,节省了空间:我们不再需要臃肿复杂的页码导航链接或按钮了
对触屏设备来说,交互方式更符合直觉:在移动应用的交互环境当中,通过向上滑动进行滚屏的操作已经成为最基本的用户习惯,而且所需要的操作精准程度远远低于点击链接或按钮
更高的参与度:以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上,从而让他们更乐于沉浸在探索与浏览当中

缺点

有限的用例:无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容
额外的复杂度
再见了,页脚
SEO:集中在一页当中动态加载数据,不利于SEO,对于网站而言,存在一定的风险
页面的数量:如果网站需要通过更多的内容页面展示更多的相关信息(包括广告)是很重要的策略,那么单页无限滚动的方式就不适用了

UICollectionView

在sotryboard中用Aut oLayout布局自定义的cell

// 给cell设置个预估的高度(如果每一行的cell高度不一样时建议给cell设置个预估的度,可以提升cell的性能,具体可以打印cell返回高度的代理方法测试)
self.tableView.estimatedRowHeight = 44;
// 让行高根据cell内部控件的约束自动计算
self.tableView.rowHeight = UITableViewAutomaticDimension;

注意点:pictureView底边距离contentView的底部有8个点的间距这个约束不能少,cell要通过它来确定自身的高度,但是多了这一根线,pictureView 也多一个约束,有冲突,所以我们应该把pictureView的高改为不等关系后,它就要通过添加上下间的间距约束,来明确picture的高

UICollectionView简单代码演示,介绍数据和代理方法及cell的创建

// 必须用此dequeueReusableCellWithReuseIdentifier:forIndexPath:来返回创建cell

/**
eason: 'could not dequeue a view of kind: UICollectionElementKindCell with identifier cell - must register a nib or a class for the identifier or connect a prototype cell in a storyboard
必须提前给cell注册一个重用标识
注册cell的三种方式:
1> 用nib(xib)来注册cell,表示cell如何去创建, 在注册同时必须给cell设置重用标识
2> 用类(纯代码)来注册cell,表示cell用代码来创建,在注册同时必须cell设置重用标识
3> 在storyboard中给cell,设置重用标识时会同时注册cell
*/

纯代码实现

/** 常见错误
错误1> ICollectionView must be initialized with a non-nil layout parameter
实例化(创建)UICollectionView的同时必须指定一个非空的layout
用UICollectionViewLayout这个类直接创建出来的布局对应就是一个空的布局,里面什么也没有
一般情况用UICollectionViewFlowLayout(流水布局,它创建出来有默认的itemSize,和行间距等等)
*/

/** 错误警告
negative or zero item sizes are not supported in the flow layout
UICollectionViewFlowLayout 不支持负得或为0尺寸cell
// 当itemSize等于 CGSizeZero 数据源方法返回每一个cell的方法不会执行,说明只有cell有尺寸时才能返回cell
layout.itemSize = CGSizeZero;
*/
// 用class来注册 cell(告诉collectionView中的cell如何创建),并给cell添加重用标识

[collectionView registerClass:[CZAppCell class] forCellWithReuseIdentifier:ID];

用xib实现

// 加载xib
UINib *nib = [UINib nibWithNibName:@"CZAppCell" bundle:nil];
// 通过xib来注册,告诉collectionView如何去创建cell,并指定重用标识
[self.collectionView registerNib:nib forCellWithReuseIdentifier:ID];

// 实例化xib
CZAppCell *cell = [[nib instantiateWithOwner:nil options:nil] lastObject];
// 根据xib中的cell的尺寸来设置布局属性中cell的尺寸
self.flowLayout.itemSize = cell.bounds.size;

用storyboard实现

给storyboard的cell会只需添加重用标识即可自动注册
UICollectionViewUICollectionView


本博客内容既有转载自网络的内容,也有本作者原创内容,仅供学习与交流之用
如有侵权或者错误之处,请及时在下方留言!
喜欢 (1)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址