瀑布流的实现

1.什么是瀑布流?

手机应用界面多数是矩阵排列的,比如掌阅的书架

每一个方格子宽高相等,整整齐齐.据说此种布局容易造成视觉疲劳,于是希望将方格子的位置摆放不要这样整整齐齐,希望每一行的方格子看起来参差不齐,于是就有了瀑布流.如图:

简单的说就是一种摆放控件的样式.

2.如何实现?

可以滚动,可以用Scrollview,tableView,collectionView实现,此处用collectionView,据说collectionView更强大,但是因为初学习,还没能充分体会到.

collectioView的用法大致和tableview相同.不同在于

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

1>此方法中,初次加载此方法在缓存池中找不到可重用单元格,需要注册单元格,不赘述

2>collectionView的frame的设置全部交给一个类来处理了-----UICollectionViewLayout.

这个类专门用来处理UICollectionView的大小,frame等属性.

因为瀑布流实际上就是设置控件的frame,大小等属性,所以需要自定义布局,也就是需要自己写一个类继承自UICollectionViewLayout即可.苹果还封装了一个继承自UICollectionViewLayout的布局,叫做UICollectionViewFlowLayout,这个类新增了处理每一个item的大小,行间距,列间距等属性,但是此处可以不用继承这个类,直接继承UICollectionViewLayout即可,因为我们要用到的方法UICollectionViewLayout都具备.

四个方法

1>- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
此方法用于设置rect范围中所有item的属性

2>- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
此方法用于设置indexpath对应的item的属性

3>- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
返回YES,表示当界面的位置发生改变,自动更新布局,调用第一个方法.

4>- (CGSize)collectionViewContentSize
此方法用于设置可滚动范围.

1)在方法2中计算每一个item的frame;

具体实现如下:

   //返回一个属性
    //计算item的frame
    /**
     *  获取indexpath对应的cell的属性
     */
    UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    //自定义item的frame
    UIEdgeInsets inset = self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
    CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
    NSInteger column = 3;
    CGFloat padding = 10;
    //宽
    CGFloat attrW = (screenW - inset.left - inset.right - padding * (column - 1)) / column;
    //高
//    CGFloat attrH = arc4random_uniform(100);

     NSArray *modelArray = [GoodModel goods];
    GoodModel *goodModel = modelArray[indexPath.item];

    CGFloat attrH = attrW * goodModel.height / goodModel.width;
    //x
    //y
    CGFloat tempMaxY = MAXFLOAT;
    NSInteger lie = 0;
    for (NSInteger i = 0; i < 3; i ++) {
        CGFloat maxY = [self.maxY[i] doubleValue];
        if (maxY < tempMaxY) {
            tempMaxY = maxY;
            lie = i;

        }
    }

    CGFloat attrX = inset.left + (attrW + padding) * lie;
    CGFloat attrY = tempMaxY + padding;

    attr.frame = CGRectMake(attrX, attrY, attrW, attrH);

    //将最大Y值累加
    self.maxY[lie] = @(attrY + attrH);

    return attr;

主要困难是计算X,Y,要计算X,实际上就是九宫格算法,X = 左边距 + 列数 * (item宽+间距);左边距,间距通常是给定的,因而关键在于求item对应的列数.当一行摆满以后,第二行从最短的那个开始摆放,这样不至于最后每一列的item总的宽高相差太大导致的不美观.因此需要获得最短的item(也就是获得最小的最大Y值)对应列数,首先要计算出最小的最大Y值,因而需要遍历每一行的item的最小的最大Y值,因而需要有一个数组存储每一个item的最大Y值,

通过懒加载实现:

- (NSMutableArray *)maxY
{
    if (_maxY == nil) {
        _maxY = [NSMutableArray array];
    }
    return _maxY;
}

初始化为三个元素,值为0.问题是为什么用懒加载?不用行不行?初始化又在哪里初始化?为什么要在此处初始化?

2)当计算好每一个item的属性后,在方法1中返回可见范围属性的集合,实际上就是获取方法2中设置好的每一个item的属性,并添加到数组中,

方法1配合方法3实现滚动自动更新布局,我学习的这种做法很笨,因为在第二个方法中,返回的并不是rect范围内的所有item的属性的结合,而是plist文件中全部item(而不仅仅是界面上的),代码如下:

    //返回属性的数组

    //    [self.maxY removeAllObjects];
    //初始化最大Y值的数组
    for (NSInteger i = 0; i < 3; ++ i) {
        self.maxY[i] = @0;
    }
    //设置属性
    //获取item个数
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    //创建属性数组
    NSMutableArray *attrs = [NSMutableArray array];
    for (NSInteger i = 0; i < count; ++ i) {
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        UICollectionViewLayoutAttributes *attr = [self layoutAttributesForItemAtIndexPath:indexPath];
        [attrs addObject:attr];
    }
    //返回属性的集合
    return attrs;

3)最后,需要重写方法四,设置可滚动范围即可.

3>这些方法的执行顺序:

collectionViewContentSize(第1次)----layoutAttributesForElementsInRect(1)----layoutAttributesForItemAtIndexPath(1-100共100次)----collectionViewContentSize(第2次)----layoutAttributesForElementsInRect(2)----layoutAttributesForItemAtIndexPath(101-200)----

collectionViewContentSize(3)

轻轻滚动界面,

shouldInvalidateLayoutForBoundsChange(1)----

collectionViewContentSize(4)----layoutAttributesForElementsInRect(3)----layoutAttributesForItemAtIndexPath(201-300)

collectionViewContentSize(5)----layoutAttributesForElementsInRect(4)----layoutAttributesForItemAtIndexPath(301-400)

collectionViewContentSize(6)----

shouldInvalidateLayoutForBoundsChange(2)----

collectionViewContentSize(7)----layoutAttributesForElementsInRect(5)----layoutAttributesForItemAtIndexPath(401-500)

collectionViewContentSize(8)----layoutAttributesForElementsInRect(6)----layoutAttributesForItemAtIndexPath(501-600)

collectionViewContentSize(9)

shouldInvalidateLayoutForBoundsChange(3)----

collectionViewContentSize(10)----layoutAttributesForElementsInRect(7)----layoutAttributesForItemAtIndexPath(601-700)

collectionViewContentSize(11)----layoutAttributesForElementsInRect(8)----layoutAttributesForItemAtIndexPath(701-800)

collectionViewContentSize(12)

4>因而可以知道

当初始化的时候方法调用顺序是:

collectionViewContentSize(第1次)---- layoutAttributesForElementsInRect(1)---- layoutAttributesForItemAtIndexPath(1-100共100次)---- collectionViewContentSize(第2次)---- layoutAttributesForElementsInRect(2)----layoutAttributesForItemAtIndexPath(101-200)----

collectionViewContentSize(3)

当滚动界面是调用顺序是:

shouldInvalidateLayoutForBoundsChange----初始化时候的顺序.

然而为什么以这样的顺序调用呢?

由于在方法一中直接返回全部item属性,故而每次调用方法一就会调用很多次(item的个数)方法二,故而此种实现方法效率极低.