zoukankan      html  css  js  c++  java
  • ios实现瀑布流

    好多人都会遇到瀑布流的问题,有些瀑布流的高度是不一样的,有些是每个cell的高度是一样的,我这里的写的只要改动一个地方就可以了

    首先自定义继承

    UICollectionViewLayout的类然后再.m文件中布局属性

    /** 默认的列数 */

    static const NSInteger XMGDefaultColumnCount = 2;

    /** 每一列之间的间距 */

    static const CGFloat XMGDefaultColumnMargin = 10;

    /** 每一行之间的间距 */

    static const CGFloat XMGDefaultRowMargin = 10;

    /** 边缘间距 */

    static const UIEdgeInsets XMGDefaultEdgeInsets = {0, 0, 0, 0};

    在类别中定义这几个全局变量

    /** 存放所有cell的布局属性 */

    @property (nonatomic, strong) NSMutableArray *attrsArray;

    /** 存放所有列的当前高度 */

    @property (nonatomic, strong) NSMutableArray *columnHeights;

    接下来就是实现了

    - (NSMutableArray *)columnHeights

    {

        if (!_columnHeights) {

            _columnHeights = [NSMutableArray array];

        }

        return _columnHeights;

    }

    - (NSMutableArray *)attrsArray

    {

        if (!_attrsArray) {

            _attrsArray = [NSMutableArray array];

        }

        return _attrsArray;

    }

    /**

     * 初始化

     */

    - (void)prepareLayout

    {

        [super prepareLayout];

        

        // 清除以前计算的所有高度

        [self.columnHeights removeAllObjects];

        for (NSInteger i = 0; i < XMGDefaultColumnCount; i++) {

            [self.columnHeights addObject:@(XMGDefaultEdgeInsets.top)];

        }

        // 清除之前所有的布局属性

        [self.attrsArray removeAllObjects];

        // 开始创建每一个cell对应的布局属性

        NSInteger count = [self.collectionView numberOfItemsInSection:0];

        for (NSInteger i = 0; i < count; i++) {

            // 创建位置

            NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];

            // 获取indexPath位置cell对应的布局属性

            UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];

            [self.attrsArray addObject:attrs];

        }

    }

    /**

     * 决定cell的排布

     */

    - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect

    {

        return self.attrsArray;

    }

    /**

     * 返回indexPath位置cell对应的布局属性

     */

    - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath

    {

        // 创建布局属性

        UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];

        

        // collectionView的宽度

        CGFloat collectionViewW = self.collectionView.frame.size.width;

        

        // 设置布局属性的frame

        CGFloat w = (collectionViewW - XMGDefaultEdgeInsets.left - XMGDefaultEdgeInsets.right - (XMGDefaultColumnCount - 1) * XMGDefaultColumnMargin) / XMGDefaultColumnCount;

        CGFloat h = 50 + arc4random_uniform(100);

    //     CGFloat h = 40 ;//固定高度为40

        

        

        // 找出高度最短的那一列

        NSInteger destColumn = 0;

        CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];

        for (NSInteger i = 1; i < XMGDefaultColumnCount; i++) {

            // 取得第i列的高度

            CGFloat columnHeight = [self.columnHeights[i] doubleValue];

            

            if (minColumnHeight > columnHeight) {

                minColumnHeight = columnHeight;

                destColumn = i;

            }

        }

        

        CGFloat x = XMGDefaultEdgeInsets.left + destColumn * (w + XMGDefaultColumnMargin);

        CGFloat y = minColumnHeight;

        if (y != XMGDefaultEdgeInsets.top) {

            y += XMGDefaultRowMargin;

        }

        attrs.frame = CGRectMake(x, y, w, h);

        

        // 更新最短那列的高度

        self.columnHeights[destColumn] = @(CGRectGetMaxY(attrs.frame));

        

        return attrs;

    }

    - (CGSize)collectionViewContentSize

    {

        CGFloat maxColumnHeight = [self.columnHeights[0] doubleValue];

        for (NSInteger i = 1; i < XMGDefaultColumnCount; i++) {

            // 取得第i列的高度

            CGFloat columnHeight = [self.columnHeights[i] doubleValue];

            

            if (maxColumnHeight < columnHeight) {

                maxColumnHeight = columnHeight;

            }

        }

        return CGSizeMake(0, maxColumnHeight + XMGDefaultEdgeInsets.bottom);

    }

     好的,下面我们就要在VC中实现

    static NSString * const XMGShopId = @"lxtShop";

    - (void)viewDidLoad {

        [super viewDidLoad];

        

        // 创建布局

        XMGWaterflowLayout *layout = [[XMGWaterflowLayout alloc] init];

        

        // 创建CollectionView

        UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];

        collectionView.dataSource = self;

        [self.view addSubview:collectionView];

        

        // 注册

        [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:XMGShopId];

    }

    #pragma mark - <UICollectionViewDataSource>

    - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

    {

        return 50;

    }

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

    {

        UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:XMGShopId forIndexPath:indexPath];

        

        cell.backgroundColor = [UIColor orangeColor];

        NSInteger tag = 10;

        UILabel *label = (UILabel *)[cell.contentView viewWithTag:tag];

        if (label == nil) {

            label = [[UILabel alloc] init];

            label.tag = tag;

            [cell.contentView addSubview:label];

        }

        label.text = [NSString stringWithFormat:@"%zd", indexPath.item];

        [label sizeToFit];

        

        return cell;

    }

     好了,这样就可以实现了。

  • 相关阅读:
    使用Chrome开发者工具研究JavaScript的垃圾回收机制
    Java JDK目录下的jmap和jhat工具的使用方式
    Java注解@Cacheable的工作原理
    使用Java JUnit框架里的@Rule注解的用法举例
    使用Java JUnit框架里的@SuiteClasses注解管理测试用例
    Java JUnit框架里@Category注解的工作原理
    使用SAP CRM mock框架进行单元测试的设计
    将ABAP透明表的定义(元数据)解析出来导入到剪切板(clipboard)里
    SAP ABAP Netweaver里的胖接口(fat interface)
    关于STM32的FLASH操作【转载】
  • 原文地址:https://www.cnblogs.com/huiyi-520/p/7502832.html
Copyright © 2011-2022 走看看