iOS之瀑布流demo练习

作者: 阿拉斯加的狗 | 来源:发表于2016-10-15 18:59 被阅读299次

DEMO示例展示

demo展示.gif
  • 对于瀑布流的实现是对于自定义UICollectionViewLayout进行item的自定义排布

1<在实现其中的几个必要的方法

/** 
 *   准备布局
 */
- (void)prepareLayout{
}

/**
 *   决定cell的排布
 */
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
}

/**
 *   布局item的具体位置
 */
- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
}

/**
 *   布局的滚动范围
 */
- (CGSize)collectionViewContentSize{
}
  • 上述就是瀑布流布局的四个核心的方法.在其中的方法中进行布局计算item的大小跟位置放在所在相应的布局上根据每次返回的最低高度进行布局.

  • 所以这就要求我们获取item的所在布局的那一列所在的高度,获取到item的大小X.Y的值就能获取到他的frame

/** 存到所有cell的布局 */
@property (nonatomic,strong)NSMutableArray *attsArray;
/** 存放所有列的当前高度 */
@property (nonatomic,strong)NSMutableArray *columnHeights;
  • 定义了两个属性用来计算所在列的cell的最大Y值 依次遍历获取数值.

/**
 *   布局item的具体位置
 */
- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {

    UICollectionViewLayoutAttributes *atts = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    
    //布局item
    CGFloat collectionViewW = self.collectionView.frame.size.width;
    
    CGFloat W = (collectionViewW - self.edgeInsets.left - self.edgeInsets.right - (self.columnCount - 1) * self.columnMargin) / self.columnCount;
    
    //获取到collectionView的item的最短的那一列
    NSUInteger destColumn = 0;
    CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];
    for (NSUInteger i = 1; i < self.columnCount; i ++) {
        
        //获取i行的高度
        CGFloat columnHeight = [self.columnHeights[i] doubleValue];
        if (minColumnHeight > columnHeight) {
            minColumnHeight = columnHeight;
            destColumn = i;
        }
        
    }
    
    CGFloat X = self.edgeInsets.left + destColumn * (W + self.columnMargin);
    
    CGFloat Y = minColumnHeight;
    if (Y != self.edgeInsets.top) {
        Y += self.rowMargin;
    }
    CGFloat H = [self.delegate waterViewLayout:self heightForItemAtIndex:indexPath.item itemWidth:W];
    
    atts.frame = CGRectMake(X, Y, W, H);
    
    //更新最短的高度
    self.columnHeights[destColumn] = @(CGRectGetMaxY(atts.frame));
    
    return atts;
}

  • 最后是对于计算整个瀑布流的滚动范围也就是contsize的取值范围,也就是获取整个item的最大高度的范围即可

/**
 *   布局的滚动范围
 */
- (CGSize)collectionViewContentSize {

    CGFloat maxColumnHeight = [self.columnHeights[0] doubleValue];
    for (NSUInteger i = 1; i < self.columnCount; i ++) {
        
        //获取i行的高度
        CGFloat columnHeight = [self.columnHeights[i] doubleValue];
        if (columnHeight > maxColumnHeight) {
            maxColumnHeight = columnHeight;
            
        }
        
    }
    
    return CGSizeMake(0, maxColumnHeight + self.edgeInsets.bottom);
}

以上的就是核心的瀑布流的算法.

  • 对于笔者其他的文件也没什么可以展示的,就是一些所在的数据源跟collectionView的布局. 详情可以参照demo的地址.

最后想分享的是这个瀑布流笔者封装了起来留有所在行数的间距跟所在列的接口,不需要以后每次都会重新写自定义流水布局.只许进行测试调用所在列为多少即可.

#import <UIKit/UIKit.h>
@class WKWaterViewLayout;
@protocol WKWaterViewLayoutDelegate <NSObject>

@required
/** 外部所在的尺寸计算布局内的高度 */
- (CGFloat)waterViewLayout:(WKWaterViewLayout *)waterLayout heightForItemAtIndex:(NSUInteger)index itemWidth:(CGFloat)itemWidth;

@optional
/** 瀑布流所在的列数 */
- (CGFloat)columnCountInWaterflowLayout:(WKWaterViewLayout *)waterflowLayout;
/** item的每一列的边距 */
- (CGFloat)columnMarginInWaterflowLayout:(WKWaterViewLayout *)waterflowLayout;
/** item的每一行的边距 */
- (CGFloat)rowMarginInWaterflowLayout:(WKWaterViewLayout *)waterflowLayout;
/** 内边距 */
- (UIEdgeInsets)edgeInsetsInWaterflowLayout:(WKWaterViewLayout *)waterflowLayout;

@end

@interface WKWaterViewLayout : UICollectionViewLayout

@property (nonatomic,weak)id<WKWaterViewLayoutDelegate> delegate;

@end

demo 下载地址:https://github.com/aryehToDog/WK-WaterFlowLaout/tree/master

相关文章

  • iOS之瀑布流demo练习

    DEMO示例展示 对于瀑布流的实现是对于自定义UICollectionViewLayout进行item的自定义排布...

  • iOS瀑布流

    瀑布流Demo 使用UICollectionView实现瀑布流 自定义UICollectionViewLayout...

  • Swift实现UICollectionView支持多 secti

    通过UICollectionViewLayout实现瀑布流 代码如下 调用如下 完整demo链接 瀑布流

  • 瀑布流Demo

  • 瀑布流Demo

    闲言碎语不要讲,直接看demo效果 再来看看整个项目截图吧,很简单 首先我们来了解一下瀑布流,这种形式大多用于电商...

  • iOS之瀑布流

    李老师写的框架,学习学习。

  • kotlin瀑布流demo

    最近学习kotlin,这里用图片展示练习一下 具体怎么配置Android studio的Kotlin环境可以看我的...

  • # 瀑布流实现Demo

    本文仅供自己学习总结,参考! 对于瀑布流,主要就是对UICollectionView的flowLayout的熟练应...

  • UICollectionView 瀑布流demo

    引用方式

  • iOS瀑布流之横-纵瀑布流

    一、开篇 1.瀑布流设计讨论 1.应用场景:在我们app开发中,瀑布流一般应用于大数据展示时,比如淘宝搜索页面、蘑...

网友评论

    本文标题:iOS之瀑布流demo练习

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