JPLiquidLayout 版本 0.1.1

JPLiquidLayout 版本 0.1.1

×

由 RoguePing 维护。

JPLiquidLayout 版本 0.1.1

  • 作者
  • ZhouJianPing

JPLiquidLayout

CI Status Version License Platform

简介

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

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

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

image

  • 相册照片应用：

image

如何使用

一. ViewModel形式

  1. viewModel需要遵循JPLiquidLayoutProtocol协议（用于记录元素的位置信息，如frame）；
  2. 然后使用JPLiquidLayoutTool计算所有元素的位置；
  3. collectionView需要使用UICollectionViewFlowLayout布局，并且需要在"- (CGSize)collectionView:layout:sizeForItemAtIndexPath:"返回viewModel中计算好的的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]];

image

  1. 删（在demo中为点击删除）
[self.collectionView deleteItemsAtIndexPaths:@[indexPath]];

image

  1. 改（在demo中为点击替换）
[self.collectionView reloadItemsAtIndexPaths:@[indexPath]];

image

安装

JPLiquidLayout可以通过CocoaPods安装，只需将以下行添加到您的Podfile中：

pod 'JPLiquidLayout'

反馈地址

邮箱：[email protected]

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

许可协议

JPLiquidLayout遵循MIT许可协议。更多信息请参阅LICENSE文件。