流式布局 JPLiquidLayout

流式布局：流水方式排列，元素宽高比保持不变，能完整展示每个元素，每行高度相同且不会超过最大列数。

框架地址：JPLiquidLayout

流式布局的相册

功能介绍：
    1. 多种参数可自定义化；
    2. 包含ViewModel和CollectionViewLaout两种形式的使用；
    3. CollectionViewLaout形式下包含单个元素的增、删、改动画效果
    4. 简单易用。

注意：
    1. 目前仅支持垂直方向
    2. CollectionViewLaout形式下目前仅支持单个section的情况；
    3. CollectionViewLaout形式下的动画效果目前仅支持单个元素的。

• 画面展示：

Demo

• 相册照片应用：

自定义的相册

如何使用

一. ViewModel 形式

1. viewModel 得遵守 协议（用于记录元素的位置信息，如 frame）；
2. 然后使用 JPLiquidLayoutTool 计算所有元素的位置；
3. collectionView 得使用 UICollectionViewFlowLayout 布局，并且需要在 - (CGSize)collectionView:layout:sizeForItemAtIndexPath: 返回 viewMdeol 中计算好的 cellSize。

// 在UICollectionViewDelegateFlowLayout的代理方法中返回viewModel的cellSize
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    JPCollectionViewCellViewModel *cellVM = self.cellVMs[indexPath.item];\
    return cellVM.jp_itemFrame.size;
}

二. JPLiquidLayout 形式

1. JPLiquidLayout 是继承于 UICollectionViewFlowLayout 的布局子类，使用 JPLiquidLayout 作为 collectionView 的 collectionViewLayout；
2. 不需要 JPLiquidLayoutTool 进行计算，内部已进行计算。

// 初始化配置
- (instancetype)initWithCollectionViewLayout:(UICollectionViewLayout *)layout {
    if (self = [super initWithCollectionViewLayout:layout]) {
        if ([layout isKindOfClass:JPLiquidLayout.class]) {
            JPLiquidLayout *liquidLayout = (JPLiquidLayout *)layout;

            // 配置基本参数
            liquidLayout.sectionInset = UIEdgeInsetsMake(8, 8, 8, 8);
            liquidLayout.minimumLineSpacing = 2;
            liquidLayout.minimumInteritemSpacing = 2;

            // 配置其他参数
            liquidLayout.maxCol = 4;
            liquidLayout.maxWidth = [UIScreen mainScreen].bounds.size.width - liquidLayout.sectionInset.left - liquidLayout.sectionInset.right;
            liquidLayout.baseHeight = liquidLayout.maxWidth * 0.5;
            liquidLayout.itemMaxWhScale = 16.0 / 9.0;

            // 配置回调block，用于获取相应的图片宽高比
            __weak typeof(self) weakSelf = self;
            liquidLayout.itemWhScale = ^CGFloat(NSIndexPath *indexPath) {
                __strong typeof(weakSelf) strongSelf = weakSelf;
                if (!strongSelf || strongSelf.picModels.count == 0) return 1;
                    return [strongSelf.picModels[indexPath.item] picWhScale];
            };
        }
        self.picModels = [NSMutableArray array];
    }
    return self;
}

ViewModel 和 JPLiquidLayout 的对比

• ViewModel 形式：图片数量很多时（例如相册照片有几千张的情况下）使用 ViewModel 形式效果更优，JPLiquidLayout 形式会有些许卡顿（后续优化），每次数据发生变化都需要使用 JPLiquidLayoutTool 进行计算更新布局；
• JPLiquidLayout 形式：代码会更简洁，只需要初始化时配置好参数，后续不需要别的操作。

增、删、改三种动画效果

• 使用 ViewModel 形式使用系统自带的方法即可；
• 使用 JPLiquidLayout 形式，则需要设置 singleAnimated 属性为 YES（默认就为 YES），同样使用系统自带的方法即可；
• 目前只支持单个元素的增删改动画，后续添加多个组合的动画和挪动动画。

1. 增（demo中为点击添加）

[self.collectionView insertItemsAtIndexPaths:@[indexPath]];

单个增加效果

2. 删（demo中为点击删除）

[self.collectionView deleteItemsAtIndexPaths:@[indexPath]];

单个删除效果

3. 改（demo中为点击替换）

[self.collectionView reloadItemsAtIndexPaths:@[indexPath]];

单个刷新效果

安装

JPLiquidLayout 可通过CocoaPods安装，只需添加下面一行到你的podfile：

pod 'JPLiquidLayout'

反馈地址

邮箱：[email protected]

博客：https://www.jianshu.com/u/2edfbadd451c