iOS UICollectionView瀑布流

UICollectionView和UITableView一样,在项目里会经常使用,下面我就简单介绍下UICollectionView的一些基本属性和使用方法.

我不仅铺了UICollectionView,还尝试铺了一下UICollectionView的表头,不需要的可以不铺.

//在viewController里铺一个collectionView,并设置collectionView的表头,collectionView的表头是需要自定义的

//引入collectionView的自定义表头的类的头文件  #import "CollectionReusableView.h"

//定义两个宏:屏幕宽和屏幕高
#define SCREEN_WIDTH [[UIScreen mainScreen] bounds].size.width
#define SCREEN_HEIGHT [[UIScreen mainScreen] bounds].size.height

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

@end

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    //要知道每行代码为何写,要知道每行代码是干嘛的

    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    //section内置大小(距离每个分区的上下左右大小)
    flowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
    //item大小(默认大小为10,如果超过10,无需定义,会按照item大小算出,若比10小,就可以定义)
    flowLayout.minimumInteritemSpacing = 5;//列间距
    flowLayout.minimumLineSpacing = 5;//行间距
    //item大小(itemSize大小都一样,是这样写,且不使用代理方法返回大小)
//    flowLayout.itemSize = CGSizeMake((SCREEN_WIDTH - 30) / 3, 200);

    //预估大小(itemSize大小不一样时候写,节省时间,提高代码效率,提高流畅度)
    flowLayout.estimatedItemSize = CGSizeMake(((SCREEN_WIDTH - 30) / 3 + (SCREEN_WIDTH - 20))/2, 200);
    //设置Header大小
    flowLayout.headerReferenceSize = CGSizeMake((SCREEN_WIDTH), 100);
    //设置Header是否跟着移动
//    flowLayout.sectionHeadersPinToVisibleBounds = YES;
    //设置Footer大小
    flowLayout.footerReferenceSize = CGSizeMake(SCREEN_WIDTH, 50);
    //设置Footer是否跟着移动
//    flowLayout.sectionFootersPinToVisibleBounds = YES;

    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:flowLayout];
    collectionView.delegate = self;
    collectionView.dataSource = self;
    [self.view addSubview:collectionView];
    //注册cell
    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"UICollectionViewCell"];
    collectionView.backgroundColor = [UIColor whiteColor];

    //UICollectionView的Header/Footer 同cell一样遵循重用机制
    //注册头部
    [collectionView registerClass:[CollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"CollectionReusableView"];
    //注册底部
    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"UICollectionReusableView"];
    //设置允许多选
    collectionView.allowsMultipleSelection = YES;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 6;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *itemId = @"UICollectionViewCell";
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:itemId forIndexPath:indexPath];
    if (cell.isSelected) {
        cell.backgroundColor = [UIColor greenColor];
    }else{
        cell.backgroundColor = [UIColor lightGrayColor];
    }
    return cell;
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 3;
}
//collectionView的Header/Footer学名:增补视图
//collectionView学名:集合视图
//tableView学名:表视图
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    if (kind == UICollectionElementKindSectionHeader) {
        CollectionReusableView *reuseableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"CollectionReusableView" forIndexPath:indexPath];
        reuseableView.backgroundColor = [UIColor purpleColor];
        //想要在Header/Footer里写视图必须自定义
        return reuseableView;
    }else{
        UICollectionReusableView *reuseableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"UICollectionReusableView" forIndexPath:indexPath];
        reuseableView.backgroundColor = [UIColor orangeColor];
        return reuseableView;
    }
}
//如果每个cell的大小都是相同的 就不用写这个方法
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    if (indexPath.section == 0) {
        return CGSizeMake((SCREEN_WIDTH - 30) / 3, 200);
    }else{
        return CGSizeMake(SCREEN_WIDTH - 20, 200);
    }
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    //根据indexPath获取对应的cell
    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
    cell.backgroundColor = [UIColor greenColor];
}
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath{
    //根据indexPath获取对应的cell
    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
    cell.backgroundColor = [UIColor lightGrayColor];
}

头视图的类里.m

@interface CollectionReusableView ()

@property (nonatomic,retain)UILabel *label;

@end

@implementation CollectionReusableView

- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        [self createSubView];
    }
    return self;
}
- (void)createSubView{

    self.label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
    //不能这样写frame,Label的坐标是相对于父视图,这样坐标就不是从(0,0)开始的
//    self.label = [[UILabel alloc] initWithFrame:self.frame];
    self.label.textColor = [UIColor whiteColor];
    self.label.font = [UIFont systemFontOfSize:20];
    self.label.text = @"123";
    [self addSubview:self.label];

}
@end