随意细解：UI -- 集合视图

集合视图

UICollectionView是一种新的数据展示方式，需要使用一个类描述集合视图的布局和行 - UICollectionViewLayout

创建集合视图的步骤

1. 使用系统的布局UICollectionViewFlowLayout
2. 设置代理，设置数据源
3. 设置自定义Cell

UICollectionViewFlowLayout布局

创建ViewController

// 创建一个网状结构布局
 UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
 // 设置网状结构的juice属性
// 最小行间距
layout.minimumLineSpacing = 50;
// 最小列间距
layout.minimumInteritemSpacing = 20;
// 设置item的大小
layout.itemSize = CGSizeMake(140, 200);
// 表头size
layout.headerReferenceSize = CGSizeMake(100, 200);
// 表尾size
 layout.footerReferenceSize = CGSizeMake(100, 200);
// 滚动方向 默认是竖着滑动
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
// 内边距
layout.sectionInset = UIEdgeInsetsMake(30, 30, 30, 30);

// 设置item强制size
// layout.estimatedItemSize = CGSizeMake(10, 20);

设置代理，设置数据源

遵守协议

@interface RootViewController () <UICollectionViewDataSource, UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>

创建collectionView、设置代理、注册Cell

 // 创建collectionView
    UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:layout];

    // 设置代理与数据源代理
    collectionView.delegate = self;
    collectionView.dataSource = self;

    // 设置背景颜色（默认是黑色）
    collectionView.backgroundColor = [UIColor cyanColor];

    // 显示视图
    [self.view addSubview:collectionView];
    [layout release];

    // 注册要使用的cell
    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"MyCell"];

    // 注册表头
    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];

    // 注册表尾
    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView"];

代理方法

// 返回每个分区 有多少个Item
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 10;
}

// 返回每个索引下UICollectionViewCell的样式
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    // 重用池中又可以用得就拿去用（返回给你）
    // 如果没有就创建一个
    // 必须注册一下要使用的标识符的cell 才能使用
    // 系统才知道要从重用池中取出哪个类型的cell
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"MyCell" forIndexPath:indexPath];

    cell.backgroundColor = [UIColor yellowColor];

    return cell;

}

// 设置表头和表尾
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    // 判断返回表头类型还是表尾类型
    if ([kind isEqualToString: UICollectionElementKindSectionHeader]) {
        // 表头
        // 相当于去重用池中去找 判断一下 有就用，没有就建
        // UICollectionElementKindSectionHeader 表头的类型
        // 可重用的view 分为2种： 表头 和 表尾
        UICollectionReusableView *headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView" forIndexPath:indexPath];

        headView.backgroundColor = [UIColor greenColor];

        return headView;

    }else{
        UICollectionReusableView *footView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView" forIndexPath:indexPath];

        footView.backgroundColor = [UIColor grayColor];
        return footView;
    }

}

自定义Cell

自定义的Cell要继承自UICollectionReusableView
在初始化方法中添加控件