澳门永利m5900cc

澳门永利m5900cc

  • 专访:小小“包宝宝” 浓浓中国味儿——访皮克斯首位华人女导演石之予 2019-02-23
  • 德国就是个典型的社会主义国家 2019-02-23
  • 植树大神教你如何10秒钟种一棵树 2019-02-23
  • 手机厂商拼抢线下阵地 2019-02-23
  • 新华时评:建设一支生态环境保护铁军 2019-02-23
  • 地级市政府电子服务能力综合指数排行 2019-02-23
  • 美国7月核心通胀率升至近十年来最高水平 2019-02-23
  • 1935年南京政府“以攻为守”的对日战略收获了怎样的成效? 2019-02-23
  • 安置点“黑板报”表谢意 2019-02-23
  • 陆军:实兵实弹对抗演练 提升作战能力 2019-02-23
  • 大鱼漫画:我们能在2022年世界杯见到中国队吗? 2019-02-23
  • 国务院部长、委员会主任、中国人民银行行长、审计长进行宪法宣誓 2019-02-23
  • 想多吃还不发胖?科学家找到防止体重增加的物质 2019-02-23
  • Itrust互联网信用认证 2019-02-23
  • 图解:香港推出“科技人才入境计划” 什么人可以参与? 2019-02-23
  • 登录 立即注册
    金钱:

    澳门永利m5900cc

    JPLiquidLayout 简单易用的流式布局

    [复制链接]
    来自: Rogue24 分类: iOS精品源码 上传时间: 2018-8-16 14:23:26
    Tag:

    项目介绍:

    JPLiquidLayout

    简介

    澳门永利m5900cc www.alfanarrealestate.com 流式布局:按顺序排列,元素宽高比保持不变,每行高度相同并且不超过最大列数。
    GitHub地址:https://github.com/Rogue24/JPLiquidLayout

    功能介绍:
        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:"返回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]];

    image

    1. 删(demo中为点击删除)

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

    image

    1. 改(demo中为点击替换)

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

    image

    安装

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

    pod 'JPLiquidLayout'

    反馈地址

    邮箱:zhoujianping24@hotmail.com

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

    相关源码推荐:

    我来说两句
    *滑动验证:
    所有评论(5)
    bug是啥 2018-8-20 10:30:00
    支持,感谢,祝code4app越来越好~
    回复
    Wsdtg 2018-8-20 10:30:08
    code4app好的内容真的很多~赞
    回复
    A7472 2018-8-20 10:30:13
    小弟学习了~支持,支持
    回复
    Yf8546 2018-8-20 10:30:35
    膜拜大神~
    回复
    码农创新者 2018-8-20 10:30:45
    不错不错,楼主辛苦了。。。
    回复
    android小哥 2018-8-20 10:30:56
    感谢分享,code4app有你更精彩
    回复
    青丝萦剑舞 2018-8-20 10:34:31
    楼主威武啊,澳门永利m5900cc有你更给力!
    回复
    code4app热心网友 2018-8-20 11:58:24
    楼主用心了,内容非常精彩。
    回复
    code4app热心网友 2018-8-20 12:33:27
    精华内容,楼主V5!
    回复
    提取码:  下载次数:6 状态:已购或VIP 售价:0(原价:15)金钱 下载权限:初级码农 
    244 0 6
    联系我们
    首页/微信公众账号投稿

    帖子代码编辑/版权问题

    QQ:435399051,742864542

    如何获得代码达人称号?

    代码贡献英雄榜
    用户名 下载数
    通过邮件订阅最新 澳门永利m5900cc 信息
    上一条 /4 下一条
    联系我们
    关闭
    合作电话:
    13802416937
    Email:
    435399051@qq.com
    商务市场合作/投稿
    问题反馈及帮助
    联系我们

    广告投放| Github|申请友链|手机版|澳门永利m5900cc ( 粤ICP备15117877号-1 )

    快速回复 澳门永利m5900cc 返回列表