iOS流水布局UICollectionView简单使用

引

开发中我们最常看到的可能是表视图UITableView了，但其实还有一个视图也很常见，特别是一些图片、商品、视频的展示界面，用UICollectionView来展现往往会更加方便。

本文就介绍纯用代码创建UICollectionView的简单示例，效果如下图：

实现

如图所示，视图由一个个方块组成，每个方块中有一张图片以及一个标题文字。

如果熟悉UITableView的话，其实很多地方都是类似的，甚至可以说UITableView是一种特殊的UICollectionView，正如正方形是一种特殊的矩形一样，UITableView就是一种每行只放一个方块的UICollectionView嘛。其实看代码的也会发现两者之间有着惊人的相似。

自定义Cell

根据UITableView的经验。首先看每个方块，也就是每个cell怎么呈现，这里的cell明显是自定义的，我们用一张图片填满cell，同时在底部居中的位置放置一个label。所以我们创建一个继承自UICollectionViewCell的类用来自定义我们的cell，代码如下：

// CollectionViewCell.h

@interface CollectionViewCell : UICollectionViewCell

@property (nonatomic, strong) UIImageView *image;// 图片
@property (nonatomic, strong) UILabel *label;// 文字

@end

// CollectionViewCell.m

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        int x = arc4random() % 10;// [0, 10)的随机数
        NSLog(@"%d", x);

        // 图片
        self.image = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
        self.image.image = x >= 5 ? [UIImage imageNamed:@"boy.jpg"] : [UIImage imageNamed:@"girl.jpg"];
        [self.contentView addSubview:self.image];

        // 文字
        self.label = [[UILabel alloc] initWithFrame:CGRectMake(10, frame.size.height - 25, frame.size.width - 20, 20)];
        self.label.text = x >= 5 ? @"鬼助" : @"百姬";
        self.label.textColor = [UIColor whiteColor];
        self.label.textAlignment = NSTextAlignmentCenter;
        [self.contentView addSubview:self.label];

    }
    return self;
}

我们将图片和label放在.h文件是为了便于在控制器中去直接操作要显示的图片和文字，不过这里我们是直接在cell自身里确定要显示什么的。为了显得真实一点，我用了一个随机数来决定每个cell显示的图片和文字，这样在呈现的时候就不会太过千篇一律。

控制器

接着我们来创建UICollectionView，UICollectionView和UITableView的相同之处在于它们都是由DataSource填充内容并有Delegate来管理响应的，并且都实现了循环利用的优化。不同之处在于UICollectionView需要一个布局参数来决定cell是如何布局的，默认是流水布局，也就是我们最常见的形式，也就是上面图里的形式；此外，UICollectionView除了垂直滚动，还可以设置为水平滚动，只需要改变布局参数的设置就可以了；UICollectionView的cell只能通过注册来确定重用标识符，什么叫注册，我们还是看代码：

- (void)viewDidLoad {
    [super viewDidLoad];

    // cell的布局方式，默认流水布局（UICollectionViewFlowLayout）
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    // 设置滚动方式为水平，默认是垂直滚动
//    [layout setScrollDirection:UICollectionViewScrollDirectionHorizontal];

    // 初始化UICollectionView
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, SCREENWIDTH, SCREENHEIGHT) collectionViewLayout:layout];
    collectionView.backgroundColor = [UIColor colorWithRed:235.0/255.0 green:235.0/255.0 blue:235.0/255.0 alpha:1];
    // 注册cell，此处的Identifier和DataSource方法中的Identifier保持一致，cell只能通过注册来确定重用标识符
    [collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"myCell"];
    collectionView.delegate = self;
    collectionView.dataSource = self;
    [self.view addSubview:collectionView];
}

既然我们将delegate和dataSource都设为了自己，那就要记得去遵循UICollectionViewDelegate和UICollectionViewDataSource协议。

代码中注释了一行，就是用来设置滚动方向为水平的，效果如下：

同样的内容，滚动方式变化后，呈现的效果也会变化。

接下来就是对于DataSource和Delegate的设置，这和UITableView非常像，DataSource决定显示的效果，Delegate处理点击等响应，直接看代码：

#pragma mark - UICollectionView DataSource
// section数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

// section内行数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 10;
}

// 每个cell的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(nonnull UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(nonnull NSIndexPath *)indexPath {
    return CGSizeMake(SCREENWIDTH/2 - 2, SCREENWIDTH/2 - 2);
}

// 垂直间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(nonnull UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
    return 4;
}

// 水平间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(nonnull UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
    return 2;
}

// cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath {
    CollectionViewCell *cell = (CollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"myCell" forIndexPath:indexPath];
    return cell;
}

#pragma mark - UICollectionView Delegate 
// 点击cell响应
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    CollectionViewCell *cell = (CollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];
    NSLog(@"%@", cell.label.text);
}

结

以上，就是一个简单的UICollectionView的使用方式，就像UITableView可以简单也可以做的非常多样，UICollectionView也是一种乍看很平常但可以容纳非常多想象力的布局方式，只要善加利用就可以做出很好的效果，当然，什么时候用UICollectionView，什么时候用UITableView，还是要根据具体需求来定。

---

示例工程：https://github.com/Cloudox/CollectionViewDemo
版权所有：http://blog.csdn.net/cloudox_