iOS 之UICollectionView
一. 什么是集合视图
UICollectionView是继承于UIScrollView的类的一个视图,称之为集合视图.和UITableView共同作为开发中常常使用的两个视图.
二. 创建UICollectionView
UICollectionView的实现跟tableView不一样的地方在于Item的布局稍微麻烦一些,需要用UICollectionViewLayout类来描述视图的布局,常用系统提供的UICollectionViewFlowLayout类,也可以自定义UICollectionViewLayout.
创建UICollectionViewFlowLayout对象
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.itemSize = CGSizeMake(165, 250); // 设置每个item的大小
flowLayout.minimumLineSpacing = 15; // 每个item之间的最小行间距
flowLayout.minimumInteritemSpacing = 15; // 每个item之间的最小列间距
flowLayout.sectionInset = UIEdgeInsetsMake(15, 15, 15, 15); // 设置分区间隔 四个参数分别为上,左,下,右.
flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical; // 设置UICollectionView的滑动方向.
flowLayout.headerReferenceSize = CGSizeMake(100,100); //头部引用的尺寸
flowLayout.footerReferenceSize = CGSizeMake(100,100); // 尾部引用的尺寸
初始化一个UICollectionView对象
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
UICollectionView的实例化对象与UITableView的一样,也需要遵守两个协议,UICollectionViewDataSource和UICollectionViewDelegate.遵守了这两个协议后,UICollectionView才能正常显示.
UICollectionView的cell必须要经过注册才能使用,(系统提供的UICollectionViewCell上是没有任何子控件的,所以在项目中需要自定义cell).UICollectionView与UITableView一样有两个必须实现的方法,返回多少个item,指定每个item的样式.
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section; 返回分区有多少个item的方法
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath 创建item的视图对象.
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView 返回有多少个分区.
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath item的点击方法.
分区头,与分区尾共用一个方法,通过kind来区分是需要分区头,还是分区尾
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
分区头注册:
[self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
分区尾注册:
[self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];
每个cell的点击方法
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath;
三. 布局协议
UICollectionViewDelegateFlowLayout是对UICollectionViewDelegate的扩展.
返回分区头的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
返回分区尾的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
四. 自定义UICollectionViewLayout
系统给的提供的类UICollectionViewLayout布局不能实现瀑布流的效果,若想实现瀑布流的效果,需要自定义UICollectionViewLayout类,实现瀑布流效果.
1. 创建一个继承于UICollectionViewLayout的类,声明一个代理协议.
2. 在接口文件中声明需要提供给外界使用的属性.(item的大小,内边距,item的间距,有多少列,代理人)
3. 在.m文件中声明一些不需要提供给外界的属性.(获取item的总数数量,用来保存每一列的高度,用来保存每一个item计算好的属性(x,y,w,h) , 保存每个Item的X值,保存每个Item的Y值,记录最短的列,获取最长的索引,获取最短的索引).
4. 数据源使用懒加载的方式
5. 实现获取最长列的方法
6. 实现获取最短列的方法
7. 实现给每一列添加top高度
8. 查找最短列,并设置相关属性
9. 找出最短的列,并设置相关属性
10. 在实现文件中必须要的三个方法(准备布局,计算每个item的大小,返回所有的Item的位置和大小)
11. 准备布局
12. 计算每个Item的大小
13. 返回每个Item的布局
五. 从网络获取图片,加载到ImageView的控件上.
获取Json文件路径,将json文件转化成为NSData类型的对象
对data进行json解析:
// 一个*的参数是为了取值,**则是赋值
NSError *error; // 错误对象
// 若解析有错误会将错误信息保存在error内
self.mArr = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:&error];
// 获取本cell对应的图片网址
NSDictionary *dict = self.mArr[indexPath.item];
// 获取网址
NSString *imageURL = [dict objectForKey:@"thumbURL"];
// 字符串转URL
NSURL *url = [[NSURL alloc] initWithString:imageURL];
// 设置ImageView的contentMode使得图片不失帧
cell.imageView.contentMode = UIViewContentModeScaleAspectFit;
[cell.imageView sd_setImageWithURL:url]; // 通过ImageView的类目提供的方法.
