滑动tableView表单时cell图片的视差效果实现分析
2015-12-22 11:22
260 查看
最近在朋友的项目中看到了一个效果,在一个列表中,cell均显示为一张大图,在滑动tableView时,cell上的图片也跟着滑动,类似于一种有视差的视窗效果,截图示例如下:
第一张图(注意圣诞老人的位置):
第二张图(注意圣诞老人的位置):
第三张图(注意圣诞老人的位置):
以上是tableView向上滑动时,不同位置对应的cell背景图三种不同的显示位置,我们发现再向上滑动tableView的过程中,cell的背景图也跟着向上显示的更多了(向下的效果也是如此);
一开始看到时觉得这个效果很漂亮,比较适合于大图展示的表单中使用,但还是没想明白,“近水楼台”,向朋友请教了一下,仅需要这样一段代码:
看了半天,终于是想明白了,下面就解释一下原理,方便解释我画了一张图:
左边这张图作为一个tableView,其中阴影部分显示为一个cell;
右边这张图是一个cell,其中横向的矩形区域是cell的size,竖向的矩形区域是图片的显示区域,可以看出该图片的上下约束均为负值;
我们设定参数如下:
1)tableView的显示区域高度:L;
2)tableView显示区域高度的中心点P_Center 距离 当前阴影cell的上边距距离UpLine(注意这里的cell的frame是相对于tableView的父视图的,且要求该父视图的纵向的高度同tableView的高度):l;
3)cell上图片上约束值H1和下约束值H2的和(H1和H2只是初始值,在cell加载之后的实际显示过程中,可以通过cell的frame来控制显示的位置变化,即H1和H2会不断变化):H;
4)cell上图片的中心点image_center距离cell中心点p_center的距离:h;
这样就有了上图中下边的关系,从而得到了一个线性关系;
那么再让我们回来看看这段代码:(有几点说明:该段代码是cell的实例方法,第一个参数是cell所在的tableView,第二个参数是tableView所在的父视图,要求同上)
1)第一句代码我们转换了一下坐标,联合第二句代码我们求出了l,即distanceFromCenter;
2)第三句代码我们求出了H,即distance;
3)第四句代码就是上图中我们得出的线性关系,一个等比例的公式,move就是我们的h,l和h在计算过程中同符号;
4)之后的几句代码就是利用h这个偏移,重新修改图片的orgin.y的值,为了动态变化,该段代码需要在ViewController中的-(void)scrollViewDidScroll:(UIScrollView *)scrollView;代理方法中调用(一个for循环就行,当然,你很可能会用到这句代码NSArray * visibleCells = [tableView visibleCells];);
这样就搞定了。
总结:一直以为写界面不就是一层一层往上放嘛,设置设置属性,分析了这段代码之后发现并非如此,界面的层次关系其实可以给我们很多发挥的空间,希望在控件的使用上多多进益吧。
特别感谢我的朋友,使这篇blog成为可能。
第一张图(注意圣诞老人的位置):
第二张图(注意圣诞老人的位置):
第三张图(注意圣诞老人的位置):
以上是tableView向上滑动时,不同位置对应的cell背景图三种不同的显示位置,我们发现再向上滑动tableView的过程中,cell的背景图也跟着向上显示的更多了(向下的效果也是如此);
一开始看到时觉得这个效果很漂亮,比较适合于大图展示的表单中使用,但还是没想明白,“近水楼台”,向朋友请教了一下,仅需要这样一段代码:
看了半天,终于是想明白了,下面就解释一下原理,方便解释我画了一张图:
左边这张图作为一个tableView,其中阴影部分显示为一个cell;
右边这张图是一个cell,其中横向的矩形区域是cell的size,竖向的矩形区域是图片的显示区域,可以看出该图片的上下约束均为负值;
我们设定参数如下:
1)tableView的显示区域高度:L;
2)tableView显示区域高度的中心点P_Center 距离 当前阴影cell的上边距距离UpLine(注意这里的cell的frame是相对于tableView的父视图的,且要求该父视图的纵向的高度同tableView的高度):l;
3)cell上图片上约束值H1和下约束值H2的和(H1和H2只是初始值,在cell加载之后的实际显示过程中,可以通过cell的frame来控制显示的位置变化,即H1和H2会不断变化):H;
4)cell上图片的中心点image_center距离cell中心点p_center的距离:h;
这样就有了上图中下边的关系,从而得到了一个线性关系;
那么再让我们回来看看这段代码:(有几点说明:该段代码是cell的实例方法,第一个参数是cell所在的tableView,第二个参数是tableView所在的父视图,要求同上)
1)第一句代码我们转换了一下坐标,联合第二句代码我们求出了l,即distanceFromCenter;
2)第三句代码我们求出了H,即distance;
3)第四句代码就是上图中我们得出的线性关系,一个等比例的公式,move就是我们的h,l和h在计算过程中同符号;
4)之后的几句代码就是利用h这个偏移,重新修改图片的orgin.y的值,为了动态变化,该段代码需要在ViewController中的-(void)scrollViewDidScroll:(UIScrollView *)scrollView;代理方法中调用(一个for循环就行,当然,你很可能会用到这句代码NSArray * visibleCells = [tableView visibleCells];);
这样就搞定了。
总结:一直以为写界面不就是一层一层往上放嘛,设置设置属性,分析了这段代码之后发现并非如此,界面的层次关系其实可以给我们很多发挥的空间,希望在控件的使用上多多进益吧。
特别感谢我的朋友,使这篇blog成为可能。
相关文章推荐
- OC中assign、copy 、retain等关键字的含义
- 记录一下这两天遇到的问题以及犯的愚蠢错误
- Nginx安全配置研究
- ASP.NET Web API与Owin OAuth:调用与用户相关的Web API(非第三方登录)
- 【课堂笔记】:哈工大软件学院项目管理期末考试复习概要
- Python学习笔记4--列表
- Android版添加phonegap-银联支付插件教程
- VIM 命令使用大全
- 工作日志
- iOS Simulator 返回沙河目录
- a 标签中调用js的几种方法 文章摘自他人
- swift 2
- 고 해서: 表示在做B的各种理由中, A是代表性的理由
- 开发报错调试总结
- Php开发完全跨站点跨域名单点(SSO)同步登录和注销
- 如何修改jar文件的内容
- 分享好的技术博客
- my sql分页 SQLServer分页 oracle分页
- 解决RadioButton默认选中时调用setOnCheckedChangeListener的问题
- mysql 分组取最新的一条记录(整条记录)