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

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

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

其中区头,区尾 是继承 UICollectionReusableView

  1 //
  2 //  HomePageViewController.m
  3 //  MainStoryboard
  4 //
  5 //  Created by mac on 16/4/21.
  6 //  Copyright © 2016年 mac. All rights reserved.
  7 //
  8
  9 #import "HomePageViewController.h"
 10 #import "ZMZScrollView.h"
 11 #import "ZkCollectionViewCell.h"
 12 #import "MyHeaderViewView.h"
 13
 14
 15
 16 #define kScreenWidth [UIScreen mainScreen].bounds.size.width
 17
 18 #define KScreenHeight [UIScreen mainScreen].bounds.size.height
 19
 20 #define ARMCOLOR [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1]
 21
 22 @interface HomePageViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
 23
 24 @property (nonatomic, strong) UICollectionView* collectionView ;
 25
 26 @end
 27
 28 //设置标识
 29 static NSString * indentify = @"indentify";
 30
 31
 32 @implementation HomePageViewController
 33
 34 - (void)viewDidLoad {
 35
 36     [super viewDidLoad];
 37
 38     /**
 39      *  先创建 collectionView 在创建下面的 scrollView
 40      */
 41
 42     [self waterfall];
 43
 44     [self createScrollView];
 45
 46
 47 }
 48 #pragma mark 轮播广告
 49 - (void)createScrollView
 50 {
 51     ZMZScrollView *ZScroller = [[ZMZScrollView alloc]initWithFrame:CGRectMake(0, -200, kScreenWidth, 200)];
 52
 53     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"];
 54
 55     ZScroller.backgroundColor = [UIColor redColor];
 56
 57     [self.collectionView addSubview:ZScroller];
 58
 59 }
 60 -(void)waterfall{
 61
 62     UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
 63     flowLayout.minimumInteritemSpacing = 1.0f;
 64
 65
 66     [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
 67
 68     self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, kScreenWidth, KScreenHeight-64.0f) collectionViewLayout:flowLayout];
 69
 70     self.collectionView.backgroundColor = [UIColor colorWithRed:237 / 255.0f green:237 / 255.0f blue:237 / 255.0f alpha:1.0f];
 71
 72     self.collectionView.contentInset = UIEdgeInsetsMake(200.0f, 0.0f, 0.0f, 0.0f);
 73
 74
 75     self.collectionView.delegate=self;
 76     self.collectionView.dataSource = self;
 77
 78     [self.view addSubview:self.collectionView];
 79
 80 #pragma mark -- 头部大小设置
 81     [flowLayout setHeaderReferenceSize:CGSizeMake(kScreenWidth, 40.0f)];
 82     /**
 83      *  这里还可以设置区尾的大小
 84      */
 85
 86 #pragma mark -- 注册单元格
 87     [self.collectionView registerNib:[UINib nibWithNibName:@"ZkCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:indentify];
 88
 89 #pragma mark -- 注册头部视图
 90     [self.collectionView registerClass:[MyHeaderViewView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView"];
 91
 92     /**
 93      *  这里注册区尾
 94      *
 95      */
 96 }
 97
 98 //设置头部内容
 99 -(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
100 {
101     UICollectionReusableView *reusableView = nil;
102
103     if (kind == UICollectionElementKindSectionHeader) {
104         //定制头部视图的内容
105         MyHeaderViewView * headerV =(MyHeaderViewView *)[collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"HeaderView" forIndexPath:indexPath];
106
107         headerV.titleLab.text =  [NSString stringWithFormat:@"section %ld‘s header",(long)indexPath.section];;
108
109         reusableView = headerV;
110     }
111     /**
112      *  在这里设置区尾  UICollectionElementKindSectionFooter
113      */
114
115     return reusableView;
116 }
117
118
119 #pragma mark - UICollectionViewDelegateWaterfallLayout
120
121 //返回 indexPath 处的 item 的大小。
122 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
123 {
124
125         return CGSizeMake(170.0f, 220.0f);
126
127 }
128 //设定全局的行间距，如果想要设定指定区内Cell的最小行距，
129 -(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
130
131         return 15.0f;
132 }
133
134 //设定collectionView(指定区)的边距
135 - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
136
137     return UIEdgeInsetsMake(0.0f, 0.0f, 0.0f, 0.0f);
138 }
139
140 #pragma mark - UICollectionViewDataSource
141 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
142     return 9;
143 }
144
145 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
146
147     return 2;
148 }
149
150 - (UICollectionViewCell* )collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
151
152         ZkCollectionViewCell* cell =[collectionView dequeueReusableCellWithReuseIdentifier:indentify forIndexPath:indexPath];
153         cell.backgroundColor = [UIColor whiteColor];
154
155         cell.synopsisLabel.text=@"11111";
156         return cell;
157 }
158
159 //点击单元格
160 -(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
161 {
162     NSLog(@"%ld区--%ld单元格",(long)indexPath.section,(long)indexPath.row);
163 }
164
165
166 @end