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

本来也可以用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. mysql if函数使用例子

    1.场景一 有时查询数量a 同时查询过滤后的数量b 2. 代码 SELECT count(id) as total_count, count( IF ( date(order_time) = DATE ...

  2. Apache Phoenix on CDH 5

    We are happy to announce the inclusion of Apache Phoenix in Cloudera Labs. [Update: A new package fo ...

  3. 关联函数 map 的基本用法

    1.map简介 map是一类关联式容器.它的特点是增加和删除节点对迭代器的影响很小,除了那个操作节点,对其他的节点都没有什么影响.对于迭代器来说,可以修改实值,而不能修改key. 2.map的功能 自 ...

  4. 一、flex布局教程:语法篇

    本文转自阮一峰大师的教程,此处做记录,方面后面自己学习使用~   布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  5. Java常用开发组件介绍

    1.Lombok的使用 http://www.cnblogs.com/ywqbj/p/5711691.html 2.Guava的使用 http://www.yiibai.com/guava/

  6. 微软智能云的核心DNA

    你知道吗? 今天,微软智能云平台运行于全球30个区域,体量超过了两大云服务商亚马逊和谷歌的总和: 今天,在全球范围内超过85%的财富五百强企业都使用了微软Azure云服务,而中国部分的用户也达到了六万 ...

  7. 记一次JVM调优之旅(斗争full gc)

    俗话说技多不压身,当年苦读<深入理解JVM>还专门整理了笔记,现在就用上了- 笔记 http://www.cnblogs.com/syjkfind/p/3901774.html [症状]  ...

  8. linux:相关命令以及笔记

    首先,在linux 或者 unix里没有任何的反馈就叫成功,例如: (1)命令执行成功的样子:返回了登录用户信息 (2)命令执行失败的样子:没有返回任何东西 1.按键出现状况 解决:可以使用ctrl+ ...

  9. postgraSql支持View可以修改的两种方法。

    http://www.postgresqltutorial.com/postgresql-views/ Creating PostgreSQL updatable views – gives you ...

  10. July 19th 2017 Week 29th Wednesday

    Rather than envy others, it is better to speed up their own pace. 与其羡慕他人,不如加快自己的脚步. The envy of othe ...