iOSDay34之UICollectionView

1. 什么是集合视图

  在iOS6.0之后, 苹果推出了一个新的继承于 UIScrollView 的视图, UICollectionView , 也被称之为 集合视图. 和 UITableView 共同作为在开发中非常常用的两个视图, 常常作为项目的主界面出现

2. 创建 UICollectionView 

 1> UICollectionView 的实现

  UICollectionView 的实现跟 tableView 不一样的地方在于 Item 的布局稍微复杂一点, 需要用 UICollectionViewLayout 类来描述视图的视图的布局. 我们在项目中常用的是系统提供的 UICollectionViewFlowerLayout 类, 也可以自定义 UICollectionViewLayout

 2> 创建 UICollectionViewFlowerLayout

 1     // 1. 定义 collectionView 的样式
 2
 3     self.myFlowLayout = [UICollectionViewFlowLayout new];
 4     // 设置属性
 5     // 给定Item的大小
 6     self.myFlowLayout.itemSize = CGSizeMake((kWidth - 40) / 3, kWidth / 3);
 7     // 每两个Item之间的最小间隙(垂直滚动)
 8     self.myFlowLayout.minimumInteritemSpacing = 10;
 9     // 每两个Item之间的最小间隙(水平滚动)
10     self.myFlowLayout.minimumLineSpacing = 10;
11     // 设置滚动方向
12     self.myFlowLayout.scrollDirection = UICollectionViewScrollDirectionVertical; // 垂直方向
13 //    self.myFlowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal; // 水平方向
14     // 设置视图的内边距(上左下右)
15     self.myFlowLayout.sectionInset = UIEdgeInsetsMake(20, 10, 10, 10);
16
17     // 布局头视图尺寸
18     self.myFlowLayout.headerReferenceSize = CGSizeMake(0, 50);
19
20     // 布局尾视图尺寸
21     self.myFlowLayout.footerReferenceSize = CGSizeMake(0, 50);

 3> 初始化 UICollectionView

1     // 2.布局 collectionView
2     // 创建对象并指定样式
3     self.collectionView = [[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:self.myFlowLayout];
4
5     self.collectionView.backgroundColor = [UIColor cyanColor];
6
7     [self addSubview:self.collectionView];

 4> 设置代理

    // 设置代理
    self.rootView.collectionView.delegate = self;
    self.rootView.collectionView.dataSource = self;

 5> 注册cell

    // 第一步:注册cell
    [self.rootView.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:identifier_cell];

 6> 代理方法

  ① UICollectionView 和 UITableView 一样有两个必须实现的代理方法

   返回多少个 Item 

1 // 设置每个分区有多少个Item
2 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
3 {
4     return 10;
5 }

   指定每个 Item 的样式

 1 // 返回每一个Item的cell对象
 2 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
 3 {
 4     RootCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier_cell forIndexPath:indexPath];
 5
 6     cell.backgroundColor = [UIColor redColor];
 7
 8     if (0 == indexPath.section) {
 9         cell.photoImage.image = [UIImage imageNamed:@"1"];
10     }
11     if (1 == indexPath.section) {
12         cell.photoImage.image = [UIImage imageNamed:@"2"];
13     }
14     if (2 == indexPath.section) {
15         cell.photoImage.image = [UIImage imageNamed:@"3"];
16     }
17
18     return cell;
19 }

   RootCell 为自定义 Cell  

  ② 选择实现的代理方法

   UICollectionView 有很多可以选择实现的代理方法,例如:

  • 设置分区个数:
1 // 返回分组个数
2 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
3 {
4     return 3;
5 }
  • Item点击方法
1 // 点击Item
2 - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
3 {
4     SecondViewController *secondVC = [SecondViewController new];
5
6     [self.navigationController pushViewController:secondVC animated:YES];
7 }
  • 返回头部, 尾部视图的样式

   UICollectionView 不能像 UITableView 一样直接指定头部和尾部视图, 需要注册使用, 最大的好处是添加了重用机制。

 1     // 注册头视图
 2     [self.rootView.collectionView registerClass:[HeaderReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];
 3
 4     // 注册尾视图
 5     [self.rootView.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView"];
 6 // 返回头视图和尾视图
 7 - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
 8 {
 9     // 判断是头视图还是尾视图
10     if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
11
12         HeaderReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"headerView" forIndexPath:indexPath];
13
14 //        headerView.backgroundColor = [UIColor redColor];
15
16         switch (indexPath.section) {
17             case 0:
18                 headerView.headerLabel.text = @"学生期";
19                 break;
20             case 1:
21                 headerView.headerLabel.text = @"生活期";
22                 break;
23             case 2:
24                 headerView.headerLabel.text = @"程序员";
25                 break;
26             default:
27                 break;
28         }
29         return headerView;
30     }
31
32     UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView" forIndexPath:indexPath];
33     footerView.backgroundColor = [UIColor lightGrayColor];
34
35     return footerView;
36 }

  效果图:

  

3. 布局协议

  布局协议: UICollectionViewDelegateFlowLayout , 它是对 UICollectionViewDelegate 的扩展 

时间: 04-26

iOSDay34之UICollectionView的相关文章

UICollectionView介绍使用

UICollectionView是一种类似于UITableView但又比UITableView功能更强大.更灵活的视图,这是源于它将UICollectionView对cell的布局交给了UICollectionViewLayout,而且允许用户自定义layout来进行布局. 下面是UICollectionView合并内容和布局并生成最终界面的一个流程: 当UICollectionView显示内容时,先从Data source(数据源)获取cell,然后交给UICollectionView.再从U

UIScrollView的delegate方法妙用之让UICollectionView滑动到某个你想要的位置

一个UICollectionView有好多个cell,滑动一下,谁也不知道会停留在哪个cell,滑的快一点,就会多滑一段距离,反之则会滑的比较近,这正是UIScrollview用户体验好的地方. 如果想要UICollectionView停留到某个cell的位置,可以用 - (void)scrollToItemAtIndexPath:(NSIndexPath *)indexPath atScrollPosition:(UICollectionViewScrollPosition)scrollPos

IOS 瀑布流UICollectionView实现

IOS 瀑布流UICollectionView实现 在实现瀑布流之前先来看看瀑布流的雏形(此方法的雏形 UICollectionView) 对于UICollectionView我们有几点注意事项 它和tableView不一样,ContentView的内容完全需要我们自己去添加. 它与tableview相比,他的初始化需要FlowLayout并且大部分操作在其上. UIcollectionView的实用性极强,虽然有时他并不是最好的解决方案,但是它可以很灵活的实现各种效果. 图(一) 如图,模拟器

iOS8 UICollectionView横向滑动demo

在iOS8中,scrollView和加载在它上面的点击事件会有冲突,所以做一个横向滑动的界面最好的选择就是UICollectionView. 这个效果可以用苹果公司提供的官方demo修改而来,下载地址https://github.com/SeniorZhai/LineLayout. 主要介绍涉及到的几个属性,在LineLayout.m文件中: //cell大小 self.itemSize = CGSizeMake(200, 250); //水平滑动 self.scrollDirection =

自定义UICollectionLayout布局 —— UIKit之学习UICollectionView记录一《瀑布流》

一.思路 思路一:比较每一行所有列的cell的高度,从上到下(也就是从第一行开始),从最短的开始计算,(记录下b的高度和索引,从开始计算,依次类推) 思路二:设置上.下.左.右间距和行间距.列间距及列数. 思路三:实现的重要的方法. 二.代码先行. 1.自定义layout类. //入口 #import <UIKit/UIKit.h> @protocol STRWaterLayoutDelegate; @interface STRWaterLayout : UICollectionViewLay

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

公司的UI图 在很多app中都有这样通用的页面,一直没有机会使用UICollectionView,只是简单的看过他的使用方法.今天公司美工出图,使用了他,并且遇到了好多的坑.记录一下过程,不确定使用的方法是不是最优的,如果有更好的方案,一起讨论,一起进步 理论篇 一.UICollectionViewLayout是做什么的? 1.1 在创建UITableView的时候,使用的是- (instancetype)initWithFrame:(CGRect)frame style:(UITableVie

集合视图(UICollectionView)

集合视图的四个组成部分: 单元格:它是集合视图中的一个单元格. 节:它是集合视图中的一个行数据,由多个单元格构成 补充视图:它是节的头和脚 装饰视图:集合视图中的背景图. UICollectionView继承自UIScrollView.有两个协议:UICollectionViewDelegate委托协议和UICollectionViewDataSource数据源协议. UICollectionViewCell是单元格类,它的布局是有UICollectionViewLayout类定义的,它是一个抽

UICollectionView基础

前言 这个控件,看起来与UITableView有点像,而且基本的用法也很相像哦!!! 我们来看看API: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 #pragma mark - UICollectionViewDataSource // 指定Section个数 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { ret

UICollectionView

UICollectionView是Apple在iOS6开始,提供给我们的一个强大的控件.最简单的UICollectionView就是GridView,标准的UICollectionView包含如下几个部分: 1 UICollectionReusableView<SupplementaryView>:可以指定section的Header或者Footer 2 UICollectionViewCell:用于展示内容的主体,对于不同的cell可以指定不同尺寸和不同的内容 再次说明,UICollecti