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下载