iOS UICollectionView

前言

UICollectionView 是iOS控件的一种，在iOS6.0之后出现的。这个控件用的比较少，其作用和用法和UITableView很相似，一般用来实现瀑布流的布局。

用法

一、使用步骤

1、首先需要创建一个流式布局管理器，布局管理器有两种类型：水平布局和垂直布局；

UICollectionViewScrollDirectionVertical //垂直平布局 UICollectionViewScrollDirectionHorizontal //水平布局

2、创建一个UICollectionView 和一个自定义的UICollectionViewCell，并使两种关联起来。

[collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"cellid"];

3、实现UICollectionView的代理方法。

二、代码示例

1、ViewController.m 中的代码：

#import "ViewController.h" #import "CollectionViewCell.h" @interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout> @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //创建一个流式布局管理器 UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init]; //垂直布局 layout.scrollDirection = UICollectionViewScrollDirectionVertical; //设置每个item的大小 layout.itemSize = CGSizeMake(self.view.frame.size.width/3, self.view.frame.size.width/3); //设置行间距 layout.minimumInteritemSpacing = 0; //设置列间距 layout.minimumLineSpacing = 0; UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layout]; collectionView.delegate = self; collectionView.dataSource = self; collectionView.backgroundColor = [UIColor whiteColor]; //关联UICollectionView 和 UICollectonViewCell [collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"Identifier"]; [self.view addSubview:collectionView]; } #pragma mark - UICollectionViewDataSource //返回分区个数 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { return 1; } //返回每个分区的item个数 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return 10; } //返回每个item -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{ CollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Identifier" forIndexPath:indexPath]; cell.title.text = [NSString stringWithFormat:@"标题%ld",(long)indexPath.row]; return cell; } #pragma mark - UICollectionViewDelegate //点击某个item - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { NSLog(@"你点击了%ld",(long)indexPath.row); } @end

2、自定义UICollectionViewCell中的代码：

import <UIKit/UIKit.h> @interface CollectionViewCell : UICollectionViewCell @property (nonatomic, strong) UILabel *title; @end #import "CollectionViewCell.h" @implementation CollectionViewCell - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { _title = [[UILabel alloc] initWithFrame:CGRectMake(0, 20, self.frame.size.width, 20)]; _title.textAlignment = NSTextAlignmentCenter; [self addSubview:_title]; self.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1]; } return self; } @end

3、效果图如下：

拓展

1、行间距和列间距的设置

//设置行间距 layout.minimumInteritemSpacing = 0; //设置列间距 layout.minimumLineSpacing = 0;

这两句代码如果不写，系统会默认的把行间距和列间距设置为10。

2、设置item的大小

系统提供了两种方法去设置item的大小

(1)通过itemSize属性设置，这种方法设置的所有item大小都是一样的

//设置每个item的大小 layout.itemSize = CGSizeMake(self.view.frame.size.width/3, self.view.frame.size.width/3);

(2)通过UICollectionViewDelegateFlowLayout委托方法设置，这种方法可以设置每个item的大小不一样

#pragma mark - UICollectionViewDelegate //定义每个Item 的大小 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { return CGSizeMake(self.view.frame.size.width/3, self.view.frame.size.width/3); }

3、设置UICollectionView的边缘边距

//设置UICollectionView的边缘 -(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section { return UIEdgeInsetsMake(0, 0, 0, 0); }

这个需要和item大小一起设置，才能达到想要的效果。

4、添加头部和尾部

需要先注册头部和尾部视图

//注册collectionView的头部视图 [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"UICollectionViewHeader"]; //注册collectionView的尾部视图 [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"UICollectionViewFooter"]; //注册尾视图

设置头部和尾部的具体内容

//创建头视图 - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath { NSString *reuseIdentifier; if ([kind isEqualToString:UICollectionElementKindSectionFooter ]){ reuseIdentifier = @"UICollectionViewFooter"; }else{ reuseIdentifier = @"UICollectionViewHeader"; } UICollectionReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:reuseIdentifier forIndexPath:indexPath]; if ([kind isEqualToString:UICollectionElementKindSectionHeader]){ UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 20)]; label.text = @"头部"; [view addSubview:label]; }else if ([kind isEqualToString:UICollectionElementKindSectionFooter]){ UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 20)]; label.text = @"尾部"; [view addSubview:label]; } return view; }

设置头部和尾部的高度

//设置section头视图的大小 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section { return CGSizeMake(0, 20); } //设置section尾视图的大小 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section { return CGSizeMake(0, 20); }

Demo下载