美文网首页
UICollectionViewLayout(二)瀑布流

UICollectionViewLayout(二)瀑布流

作者: 木兮_君兮 | 来源:发表于2018-01-25 11:14 被阅读19次

    Github 地址:https://github.com/LeonLeeboy/LBCollectionViewLayout (欢迎点赞哦)

    什么是瀑布流

    类似淘宝首页上的,由上而下,item 的高度不尽相同的collectionView的布局。

    如何实现瀑布流

    前提:

    1. 只有一个section
    2. 自上而下,自左而右
    
    1. 遍历所有的item ,把item 放到最短的一列当中。
    2. item 的size的确定
    3. contentsize 的确定
    具体实现
    回顾:实现UICollectionViewLayout 的五个方法
    1. prepareLayout
    2. collectionViewContentSize
    3. layoutAttributesForElementsInRect
    4. layoutAttributesForItemAtIndexPath
    5. shouldInvalidateLayoutForBoundsChange
    
    1. 继承自UICollectionViewLayout
    LBWaterFlowCollectionViewLayout : UICollectionViewLayout 
    
    1. 在prepareLayout 中提前算好所有的item的LayoutAttributes属性。
     //data , 初始化记录
        for (int i = 0; i < _Colcount; i++) {
            [self.heightDic setObject:[NSNumber numberWithFloat:0.0] forKey:[self indexToKey:i]];
        }
        // attributes
        NSInteger count = [self itemsCount];
        [self.attributesArray removeAllObjects];
        for (int i =0 ; i < count; i++) {
            NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
           UICollectionViewLayoutAttributes *attributes =  [self collectionViewlayoutAttributesWithIndexPath:indexPath];
            [self.attributesArray addObject:attributes];
        }
    
    1. 计算出对应的contentSize
    CGSize contentSize = CGSizeZero;
    contentSize =  CGSizeMake(self.collectionView.frame.size.width, MAX([self getMaxHeight], self.collectionView.frame.size.height));
        return contentSize;
    
    
    1. layoutAttributesForElement中返回
     return self.attributesArray;
    
    1. 允许到达边界重新计算
    - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{
        return YES;
    }
    

    源码永远是最直接的:https://github.com/LeonLeeboy/LBCollectionViewLayout

    相关文章

      网友评论

          本文标题:UICollectionViewLayout(二)瀑布流

          本文链接:https://www.haomeiwen.com/subject/lvasaxtx.html