UICollectionView 瀑布流 初级

UICollectionView 和UITableView都是UIScrollView的子类  ,UIScrollView类中的方法都可以使用 而且  UICollectionView在学习中与   UITableView 有好多相似之处   可以参考UITableView学习

//和UITableViewController一样有两个协议

@interface RootViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
   
    //UICollectionViewLayout 属于一个抽象类
    //其具体功能是由他的子类 UICollectionViewFlowLayout 网状结构布局
   
   
    [self addUICollectionView];
  
   
}

因为在初始化的时候需要layout  所有先创建一个layout,并给它的属性赋值

注意:UICollectionView 在初始化的时候必须有layout   不然会报错  就算在跳转界面的时候也是

- (void)addUICollectionView

{

    //创建一个网状结构的布局
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    //设置网状结构的具体属性
    //最小行间距
    layout.minimumLineSpacing = 20;
    //最小列间距
    layout.minimumInteritemSpacing = 20;
    //item大小
    layout.itemSize = CGSizeMake(150, 200);
    //表头size
    layout.headerReferenceSize = CGSizeMake(150, 300);
    //表尾size
    layout.footerReferenceSize = CGSizeMake(150, 300);
    //滚动方向 默认是竖着
    layout.scrollDirection = UICollectionViewScrollDirectionVertical;
    //内边距
    layout.sectionInset = UIEdgeInsetsMake(30, 30, 30, 30);
    //设置item强制size
    //layout.estimatedItemSize = CGSizeMake(10, 20);
   
   
    //创建CollectionView
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:layout];
   
    //设置代理与数据源代理
    collectionView.dataSource = self;
    collectionView.delegate = self;
   
    //设置背景颜色(背景颜色是黑色)
    collectionView.backgroundColor = [UIColor whiteColor];
   
   
    //显示视图
    [self.view addSubview:collectionView];
    [collectionView release];
    [layout release];

   

   //与UITableView 中不同的是  由于在cell 的重用池上  所用的方法不同 所以要先在前面给cell注册一下 确保使用正确

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

   

 //与cell相似

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

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

}

#pragma mark -- 代理方法
//返回每个分区有多少行
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 20;
}

//返回每个索引下UICollectionViewCell的样式
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    //重用池中有可以用的 就拿去用(返回给你)
    //如果没有  就创建一个
    //必须注册一下 要使用的标识符的cell 才能使用

    //系统才知道 要从重用池中 取出那个类型的cell

//与UITableView 不同 直接调用方法  系统已经帮你写好 不用自己在nil的时候再初始化  不过必须先在前面注册

    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"MyCell" forIndexPath:indexPath];
   
    cell.backgroundColor = [UIColor cyanColor];
   
    return cell;
}

//设置表头和表尾
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    //通过kind来判断返回的是表头类型还是表尾类型
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        //判断表头
        // 去重用池中找 判断一下  有就用 没有就建
        // UICollectionElementKindSectionHeader 表头类型
        //可重用的View 分为两种  一种表头  一种表尾
        UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"MyHeaderView" forIndexPath:indexPath];
       
        //设置颜色
        headerView.backgroundColor = [UIColor purpleColor];
        return headerView;
    }
    else
    {

        //表尾

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

        //设置颜色

        footerView.backgroundColor = [UIColor greenColor];

        return footerView;

    }

}