UICollectionView 01 - 基础布局篇

一，代码：

1.布局方式设置，创建UICollectionView

- (void)initailContentView {
    //导航
    self.navigationBar = ({
        CGFloat X = 0.0f;
        CGFloat Y = 0.0f;
        CGFloat W = [UIScreen mainScreen].bounds.size.width;
        CGFloat H = 44.f;
        
        UIView *view = [[UIView alloc]initWithFrame:CGRectMake(X, Y, W, H)];
        view;
    });
    [self.view addSubview:self.navigationBar];
    
    //表视图
    self.listView = ({
        CGFloat X = 0.0f;
        CGFloat Y = CGRectGetMaxY(self.navigationBar.frame);
        CGFloat W = [UIScreen mainScreen].bounds.size.width;
        CGFloat H = ([UIScreen mainScreen].bounds.size.height - Y);
        
        //初始化layout
        UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
        //设置布局方式为竖直布局 系统默认竖直布局
        layout.scrollDirection = UICollectionViewScrollDirectionVertical;
        //设置同一列中间隔的cell最小间距
        layout.minimumInteritemSpacing = 5.f;
        //设置最小行间距
        layout.minimumLineSpacing = 5.f;
        //每个分区的上，左，下，右的缩进量
        layout.sectionInset = UIEdgeInsetsMake(10.f, 10.f, 10.f, 10.f);
        //设置每个item的大小
        CGFloat itemW = (W - layout.minimumLineSpacing - layout.sectionInset.left - layout.sectionInset.right)/2.f;
        CGFloat itemH = 80.f;
        layout.itemSize = CGSizeMake(itemW, itemH);
        
        //创建UICollectionView
        UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(X, Y, W, H) collectionViewLayout:layout];
        
        collectionView.delegate = self;
        collectionView.dataSource = self;
        collectionView.showsVerticalScrollIndicator = NO;
        collectionView.showsHorizontalScrollIndicator = NO;
        collectionView.backgroundColor = [UIColor whiteColor];
        collectionView;
    });
    [self.view addSubview:self.listView];
    //注册cell
    [self.listView registerClass:CustomCollectionViewCell.class forCellWithReuseIdentifier:NSStringFromClass(CustomCollectionViewCell.class)];
    //注册header
    [self.listView registerClass:CustomCollectionReusableView.class forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"CustomCollectionReusableViewHeader"];
    
}

2.遵循代理 并实现数据源代理方法

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return self.dataSource.count;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return  self.dataSource[section].items.count;
}

- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    CustomCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass(CustomCollectionViewCell.class) forIndexPath:indexPath];
    cell.model = self.dataSource[indexPath.section].items[indexPath.item];
    return cell;
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    
}

///分区头
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        CustomCollectionReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"CustomCollectionReusableViewHeader" forIndexPath:indexPath];
        header.title = self.dataSource[indexPath.section].name;
        return  header;
    } else {
        return [CustomCollectionReusableView new];
    }
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section {
    return  CGSizeZero;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {
    return CGSizeMake(CGRectGetWidth(collectionView.frame), 40.f);
}

3.自定义UICollectionViewCell

#pragma mark - Initail Methods

- (void)initailContentView {
    self.titleLbl = ({
        CGFloat X = 0.0f;
        CGFloat W = CGRectGetWidth(self.frame);
        CGFloat H = 20.f;
        CGFloat Y = (CGRectGetHeight(self.frame) - H);
        
        UILabel *lbl = [[UILabel alloc]initWithFrame:CGRectMake(X, Y, W, H)];
        lbl.textColor = [UIColor blackColor];
        lbl.font = [UIFont systemFontOfSize:15 weight:UIFontWeightRegular];
        lbl;
    });
    [self addSubview:self.titleLbl];
    
    self.headerView = ({
        CGFloat X = 0.0f;
        CGFloat Y = 0.0f;
        CGFloat W = CGRectGetWidth(self.frame);
        CGFloat H = CGRectGetMinY(self.titleLbl.frame);
        
        UIView *view = [[UIView alloc]initWithFrame:CGRectMake(X, Y, W, H)];
        view.backgroundColor = [UIColor blueColor];
        view;
    });
    [self addSubview:self.headerView];
}

- (void)setModel:(CustomItemModel *)model {
    _model = model;
    self.titleLbl.text = model.name;
}

二，示例/demo

基础布局篇