使用 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