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;
    }
        

}