iOS开发主流控件说明之collectionView
UICollectionView简介：
•在iOS中，要实现九宫格数据展示，最常用的做法就是使用UICollectionView
•UICollectionView继承自UIScrollView，因此支持垂直滚动或水平滚动，而且性能极佳
•设置UICollectionView的dataSource、delegate
•UICollectionView多组数据和单组数据的展示
•UICollectionView、UICollectionViewFlowLayout的常见属性
•UICollectionViewCell三种注册方式（Class、Nib、storyboard）
•自定义UICollectionViewFlowLayout布局
•UICollectionView在iOS6中推出得，也是UIKit视图类中的一颗新星。它和UITableView共享API设计，但也在UITableView上做了一些扩展。UICollectionView最强大、同时显著超出UITableView的特色就是其完全灵活的布局结构
•UITableView和UICollectionView都是由dataSoure和delegate驱动的。他们为其显示的子视图集扮演为愚蠢的容器，对他们真实的内容毫不知情。
•UICollectionView进一步抽象了。它将其子视图的位置，大小和外观的控制权委托给一个单独的布局对象。通过提供一个自定义布局对象，你几乎可以实现任何你能想象到的布局。布局继承自UICollectionViewLayout这个抽象基类。iOS6中以UICollectionViewFlowLayout类的形式提出了一个具体的布局实现。
•flowlayout可以被用来实现一个标准的gridview，这可能是在collectionview中最常见的使用案例了。尽管大多数人都这么想，但是Apple很聪明，没有明确的命名这个类为UICollectionViewGridLayout。而使用了更为通用的术语flowlayout，这更好的描述了该类的能力：它通过一个接一个的放置cell来建立自己的布局，当需要的时候，插入横排或竖排的分栏符。通过自定义滚动方向，大小和cell之间的间距，flowlayout也可以在单行或单列中布局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)CGFloatminimumLineSpacing;
2.cell之间的最小列间距@property(nonatomic)CGFloatminimumInteritemSpacing;
3.cell的尺寸@property(nonatomic)CGSizeitemSize;
4.cell的预估尺寸@property(nonatomic)CGSizeestimatedItemSize;
5.UICollectionView的滚动方向,默认是垂直滚动@property(nonatomic)UICollectionViewScrollDirectionscrollDirection;
6.HeaderView的尺寸@property(nonatomic)CGSizeheaderReferenceSize;
7.FooterView的尺寸@property(nonatomic)CGSizefooterReferenceSize;
8.分区的四边距@property(nonatomic)UIEdgeInsetssectionInset;
9.设置是否当元素超出屏幕之后固定页眉视图位置，默认NO@property(nonatomic)BOOLsectionHeadersPinToVisibleBounds;
10.设置是否当元素超出屏幕之后固定页脚视图位置，默认NO@property(nonatomic)BOOLsectionFootersPinToVisibleBounds
自定义布局的常用方法
1.UICollectionView将要显示时准备布局,每当布局更新时,调用该方法做布局前的准备-(void)prepareLayout;
2.创建指定索引的cell的布局属性-(UICollectionViewLayoutAttributes*)layoutAttributesForItemAtIndexPath:(NSIndexPath*)indexPat;
3.返回UICollectionView内所有的控件的布局属性
4.-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect;
5.自定义布局时一定要实现此方法来返回UICollectionView的contentSize,内容尺寸,UICollectionView的滚动范围-(CGSize)collectionViewContentSize;
瀑布流简介
•瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格
瀑布流特点
1.琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列
2.唯美：图片的风格以唯美的图片为主
3.操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前
瀑布流应用
•瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量，而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作
•瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式，巧妙的利用视觉层级，视线的任意流动又缓解了视觉疲劳
使用瀑布流的网站
1.电商导购，如想去网、蘑菇街和美丽说、好享说，依托于淘宝平台
2.兴趣图谱分享，如知美、花瓣等
3.细分垂直领域，如针对吃货的零食控、针对家居行业的他部落等
瀑布流的优缺点
•优点
–有效的降低了界面复杂度，节省了空间：我们不再需要臃肿复杂的页码导航链接或按钮了
–对触屏设备来说，交互方式更符合直觉：在移动应用的交互环境当中，通过向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮
–更高的参与度：以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中
•缺点
–有限的用例：无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容
–额外的复杂度
–再见了，页脚
–SEO：集中在一页当中动态加载数据，不利于SEO，对于网站而言，存在一定的风险
–页面的数量：如果网站需要通过更多的内容页面展示更多的相关信息(包括广告)是很重要的策略，那么单页无限滚动的方式就不适用了
1. 用UICollectionView仿UITableView
UITableView默认分为两种样式
是否有头尾标签
如果没有的—>
普通样式:即使分组也看不出效果
分组样式:组和组之间有一个空白的间隔
如果有标签—>
普通样式: 头标签始终处于界面的最上方,直到被下一个头标签替代
分组样式: 头标签随着界面的移动而移动
要用UICollectionView仿一个普通样式的UITableView
关键: item没有办法加约束,而通过layout的图形界面中又没有办法设置不同屏幕下的尺寸,所以需要通过代码设置
注意: UICollectionView的头尾,如果没有实现代理方法,只有宽高起作用,内部的属性 内容都不显示
显示为UITableView带有头标签的普通样式
self.flowLayout.sectionHeadersPinToVisibleBounds = YES;
2. 无限轮播
1. 滚动的方向
2. 最小间距
3. 分页功能
4. 取消滚动条
5. 取消弹簧效果
5. UILabel显示当前第几页
6. 无限循环
3. 相册效果
3.1 如果发现控件是按照一条线的方式进行排列的,就是一个线性布局
3.2 使用了一个UICollectionView 宽度—>屏幕的宽 高->屏幕的1/3高
3.3 内部控件的滚动方向—>水平
3.4 设置行间距
需要优化的:
1. 滚动的方向
2. itemSize
3. 取消滚动条
4. 无限循环
5. 弹簧效果
6. 图片放大
重点:自定义layout实现
最好是继承自 UICollectionViewFlowLayout而不要继承子UICollectionViewLayout
itemSize等一些设置,都在flowLayot中,如果是继承子UICollectionViewLayout那所有的关于如何设置itme大小,间距都需要自己去做
7. 如何判断contentOffset是正负
contentOffset是父控件的属性
而滚动的时父控件,内部的控件,这个时候,去看相对于内部控件来说,父控件移动的方向
8. 让图片自动居中
当滚动停止的时候,判断哪个图片距离屏幕最近 就让它居中
关键都是:如何去计算哪个控件距离屏幕中心点最近
1. 获取屏幕的中心点
2. 获取控件的中心点
9. 使用,一运行就把item的属性都设置完成
计算控件的Y
1.定义一个数组,这个数组中存放的就是itemCount对应的Y
2.有几个itemCount 就存几个Y
3.默认存储的时候,先将所有的Y 都设置为0
4.每添加一个控件,就更新对应位置的最大的Y
5.在获取的时候 就能得到对应的列数
MVC
M :Model V :View Controller
1. 自己要做一件事情,这个事情自己完成不了,要交个别人做,别人没做之前它不知道
