UICollectionView中使用 UICollectionViewFlowLayout进行布局(模仿苹果相册)
现在都知道,在初始化UICollectionView的时候,必须要传入一Layout对象,进行布局管理。这也是collectionview和tableview的明显区别,通过collectionviewLayout,可以对collectionview进行更加强有力的控制。
自定义个UICollectionViewFlowLayout,重新里面的几个方法。
方法一: 每次滑动collectionview都会调用此方法,询问是否重新layout。如果returen Yes;则会调用方法二和方法三。
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{
//
return YES;
}
方法二:
-(void)prepareLayout{
[super prepareLayout];
//在这里,你可以在layout之前做一些其他的改动。或者什么都不做
}
方法三:在这个方法中,你可以获取到所有准备重新刷新的cell的一个布局属性:UICollectionViewLayoutAttributes,通过这个attributes,你可以改变cell的size,frame,alpha等等的布局属性。
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
//调用父类的方法获取。
NSArray *array = [super layoutAttributesForElementsInRect:rect];
// 计算collectionView最中心点的x值
CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;
// 在原有布局属性的基础上,进行微调
for (UICollectionViewLayoutAttributes *attrs in array) {
// cell的中心点x 和 collectionView最中心点的x值 的间距
CGFloat delta = ABS(attrs.center.x - centerX);
// 根据间距值 计算 cell的缩放比例
CGFloat scale = 1 - delta / self.collectionView.frame.size.width;
// 设置缩放比例
attrs.transform = CGAffineTransformMakeScale(scale, scale);
}
return array;
}
方法四:每次手滑动完后,都会调用。是手离开屏幕的一瞬间调用。返回一个最终的偏移量,如果想要改动的话,在这里去设置。如果不改动,直接返回proposedContentOffset就可以了。
-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity{
return proposedContentOffset;
}
下面是我做的一个效果图,cell没有放图片上去,直接用了颜色标记:同样的道理,瀑布流是如此。不对之处,希望多多指教

UICollectionView中使用 UICollectionViewFlowLayout进行布局(模仿苹果相册)的更多相关文章
- iOS流布局UICollectionView系列七——三维中的球型布局
摘要: 类似标签云的球状布局,也类似与魔方的3D布局 iOS流布局UICollectionView系列七——三维中的球型布局 一.引言 通过6篇的博客,从平面上最简单的规则摆放的布局,到不规则的瀑 ...
- 举一反三 willDisplayCell在UICollectionView中的一些应用
一.UICollectionViewCell动画 上一篇博客写仿58同城实现UITableViewCell动画,同样UiCollectionView中也能用,上一个是从右到左的动画还比较好弄, 但如果 ...
- CSharpGL(26)在opengl中实现控件布局/渲染文字
CSharpGL(26)在opengl中实现控件布局/渲染文字 效果图 如图所示,可以将文字.坐标轴固定在窗口的一角. 下载 CSharpGL已在GitHub开源,欢迎对OpenGL有兴趣的同学加入( ...
- 怎样在UICollectionView中添加Header和footer
---恢复内容开始--- 怎样在UICollectionView中添加Header和footer 转载于http://my.oschina.net/zboy/blog/221525 摘要 来自-htt ...
- 记一次UICollectionView中visibleCells的坑
记一次UICollectionView中visibleCells的坑 项目的要求是这样的 其实也是一个轮播图,而已,所以依照轮播图的实现原理,这里觉得也很简单,还是利用UICollectionView ...
- 在ListView中使用多个布局
要想在一个ListView中使用多个布局文件,比如一个信息List包含了一个信息标题和每个信息对应的时间. 关键的步骤是实现Adapter类的getItemViewType 和getViewTypeC ...
- <转载>网页设计中的F式布局
地址:http://www.uisdc.com/understanding-the-f-layout-in-web-design 网页设计中的F式布局 今天我们来重点介绍网页设计中的F式布局.传统的布 ...
- Delphi接口的底层实现(接口在内存中仍然有其布局,它依附在对象的内存空间中,有汇编解释)——接口的内存结构图,简单清楚,深刻 good
引言 接口是面向对象程序语言中一个很重要的元素,它被描述为一组服务的集合,对于客户端来说,我们关心的只是提供的服务,而不必关心服务是如何实现的:对于服务端的类来说,如果它想实现某种服务,实现与该服务相 ...
- DirectX11--HLSL中矩阵的内存布局和mul函数探讨
前言 说实话,我感觉这是一个大坑,不知道为什么要设计成这样混乱的形式. 在我用的时候,以row_major矩阵,并且mul函数以向量左乘矩阵的形式来绘制时的确能够正常显示,并不会有什么感觉.但是也有人 ...
随机推荐
- Swing布局管理器介绍
创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://zhangjunhd.blog.51cto.com/113473/128174 当选 ...
- python征程3.1(列表,迭代,函数,dic,set,的简单应用)
1.列表的切片. 1.对list进行切片.'''name=["wangshuai","wangchuan","wangjingliang", ...
- 跨平台日志清理工具 Log-Cutter v2.0.1 正式发布
Log-Cutter 是JessMA开源组织开发的一个简单实用的日志切割清理工具.对于服务器的日常维护来说,日志清理是非常重要的事情,如果残留日志过多则严重浪费磁盘空间同时影响服务的性能.如果用手工方 ...
- 今天思考一个问题,PHP const和static的区别
static关键字在类中是,描述一个成员是静态的,static能够限制外部的访问,因为static后的成员是属于类的,是不属于任何对象实例,其他类是无法访问的,只对类的实例共享,能一定程序对该成员尽心 ...
- canvas学习之API整理笔记(二)
前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...
- viewport理解
viewport预备知识 dpr === dppx dpr:device pixel ratio 设备像素比 dppx:Number of dots per px unit 每像素有多少点 . 1dp ...
- sqlite索引的原理
引言 这篇文章,里面讲到对于一个41G大小.包含百万条记录的数据库进行查询操作,如果利用了索引,可以把操作耗时从37s降到0.2s. 那么什么是索引呢?利用索引可以加快数据库查询操作的原理是什么呢? ...
- iOS多线程之8.NSOPeration的其他用法
本文主要对NSOPeration的一些重点属性和方法做出介绍,以便大家可以更好的使用NSOPeration. 1.添加依赖 - (void)addDependency:(NSOperation * ...
- iOS角度与弧度转换
在iOS中图片的旋转单位为弧度而不是角度,所以经常会在两者之间进行转换 弧度转角度 #define RADIANS_TO_DEGREES(radians) ((radians) * (180.0 / ...
- css选择器的使用详解
-.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选 ...