IOS UI学习 UICollectionView

UICollectionView概述 集合视图

UICollectionView类似于UITableView，都是通过继承UIScrollView，实现管理单元格（cell）。

相比UITableView，它对 cell 的管理更加灵活。

UICollectionViewLayout 是用来管理集合视图 cell 布局的类，

通常我们用它的子类 UICollectionViewFlowLayout 来对单元格 (cell)进行布局管理。

定义UICollectionView

 1 { 2 UICollectionView * _collectionV; 3 } 

创建布局管理类

 1 UICollectionViewFlowLayout * flow = [[UICollectionViewFlowLayout alloc] init]; 

设置 UICollectionView 集合视图的滚动方向

UICollectionViewScrollDirectionVertical为垂直滚动

UICollectionViewScrollDirectionHorizontal 为横向滚动

 1 flow.scrollDirection = UICollectionViewScrollDirectionHorizontal; 

创建 UICollectionView 集合视图

1 _collectionV = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 180) collectionViewLayout:flow];
2 //第一个参数 为 frame 第二个为一个布局管理类对象 这点与UITableView不同

要实现 UICollectionView 集合视图对cell的一些操作，需要设置代理并实现代理的一些功能，UICollectionView 集合视图一共有两个代理 

UICollectionViewDataSource 和  UICollectionViewDelegate

同样，布局管理也有一个代理  UICollectionViewDelegateFlowLayout

需要在 .h文件 或 interface(匿名类别) 中遵守协议 

 1 @interface RootViewController () <UICollectionViewDataSource , UICollectionViewDelegate , UICollectionViewDelegateFlowLayout> 2 3 @end 

接下来要设置代理

 1 _collectionV.delegate = self; 2 _collectionV.dataSource = self; 

与UItableView 不同，设置cell时，需要提前注册cell ，对于 Header (组头) 和 Footer (组尾)也是同样如此

1 //需要提前注册cell
2     //MyCell 为我的自定制的集成 UICollectionViewCell的一个子类
3     //@“cell”为重定义修饰符
4     [_collectionV registerClass:NSClassFromString(@"MyCell") forCellWithReuseIdentifier:@"cell"];

注册 Header(组头)  Footer  (组尾)

1 //注册 组头 UICollectionElementKindSectionHeader
2     [_collectionV registerClass:NSClassFromString(@"MyHeader") forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
3     
4     //注册 组尾 UICollectionElementKindSectionFooter
5     [_collectionV registerClass:NSClassFromString(@"MyFooter") forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];

UICollectionView 正常创建完毕后，就是实现其协议方法，以完成其管理cell的功能

UICollectionView 协议方法

UICollectionViewDataSource协议方法

设置cell 单元格的数目

1 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
2 {
3     return 15;
4 }

创建cell 

 1 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
 2 {
 3     
 4     static NSString * str = @"cell";
 5     //从队列中取出
 6     MyCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:str forIndexPath:indexPath];
 7     
 8     cell.backgroundColor = [UIColor yellowColor];
 9     
10     cell.label.text = [NSString stringWithFormat:@"第%ld个",indexPath.row];
11     cell.imageV.image = [UIImage imageNamed:[NSString stringWithFormat:@"10_%ld.jpg",indexPath.row]];
12     return cell;
13 }

设置分区 section 个数

 1 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView 2 { 3 return 1; 4 } 

 

UICollectionViewDelegateFlowLayout 布局管理相关协议方法

设置cell的宽 高

PS:左右两边的cell参考点分别在左上角 和 右上角

1 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
2 {
3     return CGSizeMake(80, 100);
4 }

设置cell距离其它视图的距离  四个参数 分别 是 上 左 下 右

1 -(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
2 {
3     return UIEdgeInsetsMake(1, 1, 1, 1);
4 }

设置 Header 的宽 高

1 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
2 {
3     return CGSizeMake(60, 100);
4 }

设置 Footer 的宽 高

1 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
2 {
3     return CGSizeMake(60, 100);
4 }

UICollectionViewDelegate 协议方法

选中cell是要做的操作

1 - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
2 {
3     //code 操作
4 }

取消选中cell的要做的操作

1 - (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath
2 {
3     //code 操作
4 }

 

 

未完待续  

共勉

 

 

posted @ 2015-09-16 19:55  cccccy  阅读(190)  评论(0)  编辑  收藏  举报