使用 collectionView 实现表头,区头,区尾

UICollectionView 的使用是跟表的使用是一样,瀑布流的布局会比表的效果更好,这里说一下 collectionView 设置表头, 区头,区尾

设置表头可以约束 collectionView 居上的距离 

其中区头,区尾 是继承 UICollectionReusableView

//
//  HomePageViewController.m
//  MainStoryboard
//
//  Created by mac on 16/4/21.
//  Copyright © 2016年 mac. All rights reserved.
//

#import "HomePageViewController.h"
#import "ZMZScrollView.h"
#import "ZkCollectionViewCell.h"
#import "MyHeaderViewView.h"



#define kScreenWidth [UIScreen mainScreen].bounds.size.width

#define KScreenHeight [UIScreen mainScreen].bounds.size.height

#define ARMCOLOR [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1]

@interface HomePageViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>

@property (nonatomic, strong) UICollectionView* collectionView ;

@end

//设置标识
static NSString * indentify = @"indentify";


@implementation HomePageViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    /**
     *  先创建 collectionView 在创建下面的 scrollView
     */
  
    [self waterfall];
    
    [self createScrollView];
    

}
#pragma mark 轮播广告
- (void)createScrollView
{
    ZMZScrollView *ZScroller = [[ZMZScrollView alloc]initWithFrame:CGRectMake(0, -200, kScreenWidth, 200)];
    
    ZScroller.imageNameArray = @[@"http://upload.chadaodian.com/mobile/special/s0/s0_05134290739539518.jpg",@"http://upload.chadaodian.com/mobile/special/s0/s0_05134291123904050.jpg",@"http://upload.chadaodian.com/mobile/special/s0/s0_05134291206563185.jpg"];
    
    ZScroller.backgroundColor = [UIColor redColor];
    
    [self.collectionView addSubview:ZScroller];
    
}
-(void)waterfall{

    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    flowLayout.minimumInteritemSpacing = 1.0f;
   
    
    [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];

    self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, kScreenWidth, KScreenHeight-64.0f) collectionViewLayout:flowLayout];
    
    self.collectionView.backgroundColor = [UIColor colorWithRed:237 / 255.0f green:237 / 255.0f blue:237 / 255.0f alpha:1.0f];
    
    self.collectionView.contentInset = UIEdgeInsetsMake(200.0f, 0.0f, 0.0f, 0.0f);

    
    self.collectionView.delegate=self;
    self.collectionView.dataSource = self;
    
    [self.view addSubview:self.collectionView];
    
#pragma mark -- 头部大小设置
    [flowLayout setHeaderReferenceSize:CGSizeMake(kScreenWidth, 40.0f)];
    /**
     *  这里还可以设置区尾的大小
     */
    
#pragma mark -- 注册单元格
    [self.collectionView registerNib:[UINib nibWithNibName:@"ZkCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:indentify];
    
#pragma mark -- 注册头部视图
    [self.collectionView registerClass:[MyHeaderViewView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView"];

    /**
     *  这里注册区尾
     *
     */
}

//设置头部内容
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    UICollectionReusableView *reusableView = nil;
    
    if (kind == UICollectionElementKindSectionHeader) {
        //定制头部视图的内容
        MyHeaderViewView * headerV =(MyHeaderViewView *)[collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView" forIndexPath:indexPath];
        
        headerV.titleLab.text =  [NSString stringWithFormat:@"section %ld's header",(long)indexPath.section];;
        
        reusableView = headerV;
    }
    /**
     *  在这里设置区尾  UICollectionElementKindSectionFooter
     */
  
    return reusableView;
}


#pragma mark - UICollectionViewDelegateWaterfallLayout

//返回 indexPath 处的 item 的大小。
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
  
        return CGSizeMake(170.0f, 220.0f);
   
}
//设定全局的行间距，如果想要设定指定区内Cell的最小行距，
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
  
        return 15.0f;
}

//设定collectionView(指定区)的边距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    
    return UIEdgeInsetsMake(0.0f, 0.0f, 0.0f, 0.0f);
}

#pragma mark - UICollectionViewDataSource
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 9;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    
    return 2;
}

- (UICollectionViewCell* )collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    
        ZkCollectionViewCell* cell =[collectionView dequeueReusableCellWithReuseIdentifier:indentify forIndexPath:indexPath];
        cell.backgroundColor = [UIColor whiteColor];
        
        cell.synopsisLabel.text=@"11111";
        return cell;
}

//点击单元格
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"%ld区--%ld单元格",(long)indexPath.section,(long)indexPath.row);
}


@end