最近做合创共美的商城项目,遇到发货地址的不配送地区,是做一个弹出框,弹出框的布局是根据地名字数长短不齐的标签。

本来也可以用tableview来做的。只不过多建几个tableviewcell就可以了。因为除了需要动画效果,所有的collection view都可以用tableview来做。

但是觉得还是需要做一下。因为以前弄过的都很模糊了。

所以先下了个demo。苹果开发者上面的sample demo-CollectionViewTransition:

     

这是个带动画效果的。

collectionview的cell先结合在一起,同样的中心点,动画的时候以不同的起始角度旋转动画,改变中心点size或frame。

动画参数:

以上一次的中心点加一个量。

当然这两种layout转换也需要定义一个UICollectionViewTransitionLayout

并让collectionview知道。

。。。。。。。。。。。。。。。。。。。。

然而,我并不需要动画效果。所以只需定义一个UICollectionViewLayout就行。

然后一个一个的cell的frame赋值就可以了。

在它的

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

方法里获取每个cell 的属性:

UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];

修改每个attrs的frame或中心点size,像这样:

最后别忘了return一下collection view的size大小,防止拉不动。大小需要调试到合适的大小。

然后赋给viewcontroller的collection view就可以了。

在这个方法里fo.length指字符串地名的长度。大于3个字宽度就给102,小于等于就给80。总长度fje大于collectionview的宽度减去当前的cell宽度时就conn++,换到下一行。

其中SizeModel是为了方便传数组过去建的。

效果就是这样:

至于每个地名标签的黑色边框,给每个cell加一下约束就好了。因为本身的底色时深灰色的,露出一点就时边框了。哈哈哈哈哈

UICollectionView的水平流水布局自定义layout的更多相关文章

  1. UICollectionView左对齐流水布局、右对齐流水布局

    在平时使用的app中会经常碰到一些规格选择,筛选,标签等页面,这些页面的布局展示通常是左对齐流水布局.实现类似这样的左对齐流水布局有多种方式,如果选项少的话可以直接用UIButton实现.现在我们有一 ...

  2. UICollectionView Layout自定义 Layout布局

    from:   http://www.tuicool.com/articles/vuyIriN 当我们使用系统自带的UICollectionViewFlowLayout无法实现我们的布局时,我们就可以 ...

  3. swift - uicollectionView自定义流水布局

    TYWaterFallLayout 不规则流水布局 - swift3.0 配图 使用方法 //创建layout let layout = TYWaterFallLayout() layout.sect ...

  4. iOS开发自定义流水布局

    //集成UICollectionViewFlowLayout 自己写的布局 //  SJBFlowLayout.m //  自定义流水布局 // //  Created by zyyt on 16/7 ...

  5. UICollectionLayout布局 —— UIKit之学习UICollectionView记录二《流水布局》

    重点知识 一. 加载collectionView注意事项 1.创建collectionView,有两种方式 :一种是xib和一种是纯代码:设置代理和数据源,注册cell,配置流水布局的属性,如上.下. ...

  6. 自定义 Layout布局 UICollectionViewLayout

    from:   http://www.tuicool.com/articles/vuyIriN 当我们使用系统自带的UICollectionViewFlowLayout无法实现我们的布局时,我们就可以 ...

  7. UICollectionView之自定义Layout

    #import <UIKit/UIKit.h> @interface WQViewController : UIViewController - (id)initWithFrame:(CG ...

  8. iOS开发——高级篇——流水布局UICollectionViewFlowLayout的基本使用

    之前看到过的一篇文章 对collectionView的使用总结的非常好:“iOS6新特征:UICollectionView介绍” 流水布局在现在的应用中很常见了,简单的研究了下,实现下面的功能 那我这 ...

  9. 无废话ExtJs 入门教程十六[页面布局:Layout]

    无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...

随机推荐

  1. 如何使用eslint

    npm i -g eslint 安装 eslint 即可看到基本的使用参数 eslint官网提供配置文件 eslint --env browser --global $ --rule "no ...

  2. tomcat启动很慢 停留在 At least one JAR was scanned for TLDs yet contained no TLDs.

    部署项目时候,发现启动特别慢,要等好几分钟,这不正常啊.然后每次部署都停留在 At least one JAR was scanned for TLDs yet contained no TLDs. ...

  3. 并发包交换数据Exchanger

    /** * * @描述: 用于实现两个人之间的数据交换,每个人完成一定的事务后想与对方交换数据,第一个先拿出数据的人一直等待 * 直到第二个人拿到数据 到来时,才能彼此交换数据. * @作者: Wnj ...

  4. SQL Server ->> FileTable

    FileTable是SQL Server 2012的新特性之一.它是基于SQL Server 2008的FILESTREAM特性上而来的,允许我们把Windows文件存储在SQL Server中,让S ...

  5. STL算法分类记忆

    STL算法主要是我们强大的标准库中以迭代器或数值或函数对象为参数预先定义好的一系列算法操作. 在STL算法分类中首先要提的就是两个普遍存在的后缀: _if _copy 其中这两个后缀的作用分别是:一. ...

  6. eclipse通过maven进行打包并且对hdfs上的文件进行wordcount

    在eclipse中配置自己的maven仓库 1.安装maven(用于管理仓库,jar包的管理) -1.解压maven安装包 -2.把maven添加到环境变量/etc/profile -3.添加mave ...

  7. Oracle日常性能查看

    判断回滚段竞争的SQL语句:(当Ratio大于2时存在回滚段竞争,需要增加更多的回滚段)select rn.name, rs.GETS, rs.WAITS, (rs.WAITS / rs.GETS) ...

  8. 薄弱的交互页面之新浪微博到博客的储存型xss漏洞

    首先分享一片博文到微博,然后 在微博评论xss code 最后回到博客点击举报就触发xss了 点击举报 Xss之2 首先还是分享一片博文到微博,然后评论xsscode 回到我的博客个人中心,查看评论 ...

  9. mongodb分片集群(无副本集)搭建

    数据分片节点#192.168.114.26#mongo.cnfport=2001dbpath=/data/mongodb/datalogpath=/data/mongodb/log/mongodb.l ...

  10. oracle中PLSQL存储过程中如何使用逗号分隔的集合(逗号分隔字符串转换为一个集合)

    原文: https://blogs.oracle.com/aramamoo/entry/how_to_split_comma_separated_string_and_pass_to_in_claus ...