CYC-集合视图 UICollectionView的简单使用

UICollectionView集合视图
类似于UiTableview   是一种新的数据展示方式, 比起之前使用button或者是两套自定义cell 来布局 展示图片的方式  使用起来更加的简单方便!

创建集合视图的步骤:

1. 使用系统的布局UICollectionViewFlowLayout

2.设置代理,设置数据源 

3. 设置自定义cell

// 记得调用你写的方法

- (void)viewDidLoad {

    [self addSubviews];

    [super viewDidLoad];

    // Do any additional setup after loading the view.

}

首先 第一步 创建一个集合视图

- (void)addSubviews

{

   //  UICollectionViewLayout 是一个抽象类 本身没有具体功能 其功能是由其子类来实现的

     // 创建一个Item 布局(网格状布局)

    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];

    // 行边距(相对于 上下滑动) 如果左右着滑 就是列边距

    flowLayout.minimumLineSpacing = 30;

    // 列边距(相对于 上下滑动) 如果左右滑动 就是行边距

    flowLayout.minimumInteritemSpacing = 30;

    // 设置item的宽高

    [flowLayout setItemSize:CGSizeMake(150, 200)];

    // 设置item的滑动方向(默认是竖直滑的(上下))

    [flowLayout setScrollDirection:(UICollectionViewScrollDirectionVertical)];

    // 设置item的内边距

    [flowLayout setSectionInset:UIEdgeInsetsMake(20, 20, 20, 20)];

    // 设置表头

    [flowLayout setHeaderReferenceSize:CGSizeMake(0, 100)];

    // 设置表尾

    [flowLayout setFooterReferenceSize:CGSizeMake(0, 100)];

   //  初始化 集合视图

    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];

    // 设置代理

    collectionView.dataSource = self;

    collectionView.delegate = self;

    // 显示视图

    [self.view addSubview:collectionView];

    [collectionView release];

    [flowLayout release];

 

  // 注册 你要的cell

    // identifier 重用标识符 要一致

   //  <#(Class)#> 你的cell 是那个类 就添那个类的

    // 使用系统的 就注册系统的 如果自定义的花 就注册自定义的

    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"MyCell"];

   // 注册表头

    [collectionView registerClass:[UICollectionViewCell class] forSupplementaryViewOfKind: UICollectionElementKindSectionHeader withReuseIdentifier:@"MyHederView"];

    // 注册表尾

    [collectionView registerClass:[UICollectionViewCell class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"MyFooterView"];

}

接下来 开始实现代理方法

#pragma mark - dataSource

// 必须要实现的两个方法 跟tableView一样

// 返回每个分区的item数

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

{

    return 10;

}

// 返回分区数 跟tableView一样 默认就一个分区

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView

{

    return 1;

}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

    

    // 返回每个item的方法

    // 标识符

    // 这个方法里面 包括了咱们之前写的一堆

    // 必须有一步 必须要注册cell

    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"MyCell" forIndexPath:indexPath];

    // 系统没有想tableview 一样 给咱们提供布局方式

    // 咱们要使用 一般都是使用自定义cell

    collectionView.backgroundColor = [UIColor whiteColor];

    cell.contentView.backgroundColor = [UIColor yellowColor];

 //  cell.backgroundColor = [UIColor greenColor];

    

    return cell;

}

最后 设置表头 表尾  可以使用Label 也可以使用 UIImageView

// 设置表头表尾 同代理方法 来实现

- (UICollectionReusableView *) collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath

{

    // 判断返回表头还是表尾

    // 应为参数是 字符串的 判断相同 不能等号

    if([kind isEqualToString:UICollectionElementKindSectionHeader]) {

        // 返回表头 需要去复印集合中得到

        UICollectionReusableView *headerView  = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier: @"MyHederView"forIndexPath:indexPath];

        // 价格颜色

        headerView.backgroundColor = [UIColor redColor];

        return headerView;

    

    }else {

        

        // 返回表尾

        UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"MyFooterView"forIndexPath:indexPath];

        

        footerView.backgroundColor = [UIColor blueColor];

        

        return footerView;

    }

        

}