自定义 UICollectionViewLayout

在2012年的WWDC大会上,苹果发布了UICollectionView,这种控件在布局上给了我们很大的帮助。虽然在delegate和datasource这两个代理上,UICollectionView和UITableView很像,但在布局上,UICollectionView使用的是UICollectionViewLayout,而UITableView直接使用系统提供的样式就行了。

本文将使用【瀑布流】来进行UICollectionViewLayout讲解。

环境信息:

Mac OS X 10.10.2

xcode 6

iOS 8.1

正文:

我们先来看看常见的、比较炫酷的UICollectionView布局(图片摘自猫神博客):

UICollectionView
UICollectionView
UICollectionView
UICollectionView
UICollectionView
UICollectionView

一、UICollectionViewLayout基础知识

如果要自定义UICollectionViewLayout,需要实现以下几个方法,按初始化layout后,系统执行顺序排列


// 初始化layout后自动调动,可以在该方法中初始化一些自定义的变量参数
- (void)prepareLayout;

// 设置UICollectionView的内容大小,道理与UIScrollView的contentSize类似
- (CGSize)collectionViewContentSize;

// 初始Layout外观,返回所有的布局属性
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;

// 根据不同的indexPath,给出布局
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;

二、瀑布流

1. 首先来看下最终效果

UICollectionView瀑布流
UICollectionView瀑布流

2. 逻辑与原理

逻辑其实很简单,就是给出每一个cell的坐标。想要定位一个控件,需要CGRectMake四个参数,下面就来分析下这四个参数:

  • y : 首先我们看到的这个demo是两列的,所以肯定有两个Y轴起始点,分为左侧和右侧。
  • x : 然后除Y轴不同外,左侧和右侧的X轴也不相同。
  • width : 关于width我们可以通过一行两列,然后每一个cell的间距来得到。
  • height: height是在collectionView中定义的,layout获得不到,所以我们选择用代理,在collectionView中设置。

3. 需要的定义的变量


@property (assign, nonatomic) CGFloat leftY; // 左侧起始Y轴
@property (assign, nonatomic) CGFloat rightY; // 右侧起始Y轴
@property (assign, nonatomic) NSInteger cellCount; // cell个数
@property (assign, nonatomic) CGFloat itemWidth; // cell宽度
@property (assign, nonatomic) CGFloat insert; // 间距

4. 代理的定义


@protocol CustomCollectionViewLayoutDelegate 

@required
 - (CGSize)collectionView:(UICollectionView *)collectionView collectionViewLayout:(CustomCollectionViewLayout *)collectionViewLayout sizeOfItemAtIndexPath:(NSIndexPath *)indexPath;

@end

@property (assign, nonatomic) id layoutDelegate;

5. 方法的实现



- (void)prepareLayout {

    [super prepareLayout];
    // 初始化参数
    _cellCount = [self.collectionView numberOfItemsInSection:0]; // cell个数,直接从collectionView中获得
    _insert = 10; // 设置间距
    _itemWidth = SCREEN_WIDTH / 2 - 3 * _insert; // cell宽度
}

- (CGSize)collectionViewContentSize {
    
    return CGSizeMake(SCREEN_WIDTH, MAX(_leftY, _rightY));
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    
    _leftY = _insert; // 左边起始Y轴
    _rightY = _insert; // 右边起始Y轴
    
    NSMutableArray *attributes = [[NSMutableArray alloc] init];
    
    for (int i = 0; i < self.cellCount; i ++) {
        
        NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
        [attributes addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
    }
    
    return attributes;
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    // 获取代理中返回的每一个cell的大小
    CGSize itemSize = [self.layoutDelegate collectionView:self.collectionView collectionViewLayout:self sizeOfItemAtIndexPath:indexPath];
    
    // 防止代理中给的size.width大于(或小于)layout中定义的width,所以等比例缩放size
    CGFloat itemHeight = floorf(itemSize.height * self.itemWidth / itemSize.width);
    
    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    
    // 判断当前的item应该在左侧还是右侧
    BOOL isLeft = _leftY < _rightY;
    
    if (isLeft) {
        
        CGFloat x = _insert; // x轴起始位置为0
        attributes.frame = CGRectMake(x, _leftY, _itemWidth, itemHeight);
        _leftY += itemHeight + _insert; // 设置新的Y起点
    }
    
    if (!isLeft) {
        
        CGFloat x = _itemWidth + 2 * _insert;
        attributes.frame = CGRectMake(x, _rightY, _itemWidth, itemHeight);
        _rightY += itemHeight + _insert;
    }
    
    return attributes;
}

三、Demo下载地址

https://github.com/saitjr/WaterFlowLayoutDemo.git

《自定义 UICollectionViewLayout》有2个想法

  1. 你好,请问,我修改了SCREEN_WIDTH / 2 – 3 * _insert 为 SCREEN_WIDTH / 3 – 4 * _insert,包括代理里的SCREEN_WIDTH / 2 – 3 * 10 为SCREEN_WIDTH / 3 – 4 * 10,还是只显示两列cell,请问还有别的地方需要设置吗?

    1. 文章只是实现的一种瀑布流的思路,并没有做多列适配。两列需要记录左列、右列的高度值,如果三列的话,应该就要记录三列的高度。

发表评论

电子邮件地址不会被公开。