在iOS上实现Cover Flow (一)

原创 2012年01月18日 09:42:22

miracle_of_thinking原创,欢迎转载!原文地址:

http://blog.csdn.net/miracle_of_thinking/article/details/7208344

转载时请在明显处注明,谢谢!

Cover Flow是iOS应用中一种较为常用的图像展示效果,如果你了解iOS的Core Animation的话,那么本文对你来说应该不难。让我们先来看一下实现效果吧:


我们将其封装为UICoverFlowView类,它的使用非常简单:你只需指定想要展示的image数组、两侧显示的张数、显示的尺寸等,然后在任何想用到它的地方实例化并作为subView加入即可。

当然,cover flow不仅可以用于展示图像,还可以展示不同的view,如UITableView、UIImageView、UITextField、UIWebView等。你可以根据需求对其进行扩充。

下面跟大家分享一下我的做法!

 

一、思路

       我们从用户指定的image数组出发,目标是通过coverflow的形式将该数组中的image进行遍历浏览,当前显示的image处于正中间,已浏览或未浏览的image处于两侧。

       实现Cover Flow的要点是当用户向左或向右滑动image时,让各个image到达正确的位置,并及时删除超出显示范围的image,添加空缺的image。如下图,此刻左右两侧都已经显示满了,用户向左滑动后,每张图片都应向左移动一个位置,并且删除最左侧的图片,在最右侧加入下一张图片。


       类似地,当用户向右滑动后,最右侧的image应当删除,并在最左侧加入新的image。不过事情没这么简单,上面考虑的仅仅是两侧都显示满的情况。当刚开始浏览或者是浏览到最后几张图片的时候,两侧就会出现空缺的情形,此时就不可以删除或添加新image了。

       这就引发了两个问题:1、如何移动每张图片到指定的坐标,并更新它们的角度、z轴深度等;2、如何判断是否应该删除两侧的image或者在两侧添加新的image。

       解决问题1的办法有多种,本文采用的方式是预先设置模板层。如下图,templete的作用是事先计算每个位置上CALayer的position、zPosition、transform等。每当用户滑动图片后,每个layer就可以根据templete来进行调整。


       解决问题2的关键在于每次整体左移或右移时,判断first image及last image是否超出templete的范围,这部分工作在于数组下标的计算。上图中计算templete的left以及right部分时,要比实际两侧显示的image张数多1。这样做的原因是,避免用户滑动image后最左侧或最右侧的image超出显示范围。

       好了,大致思路就是这样,接下来让我们动手实现吧!


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

iOS-coverFlow效果简单实现

首先你需要PageFlowView的头文件和实现文件。下载地址在https://github.com/kejinlu/PagedFlowView1 #import "PagedFlowView.h" ...

在iOS上实现Cover Flow (四)

四. 关键处理– 你离成功不远了 好了,我们终于要处理用户的pan手势了,这非常简单: - (void) handlePanFrom:(UIPanGestureRecognizer*)recogn...

在iOS上实现Cover Flow (二)

miracle_of_thinking原创,欢迎转载!原文地址: http://blog.csdn.net/miracle_of_thinking/article/details/7208400...

在iOS上实现Cover Flow (三)

miracle_of_thinking原创,欢迎转载!原文地址: http://blog.csdn.net/miracle_of_thinking/article/details/7208415...

Cover flow基本原理及Tapku实现方法

Cover flow基本原理及Tapku实现方法    Cover flow是苹果首创的将多首歌曲的封面以3D界面的形式显示出来的方式。如下图所示: 从图中可以看到...

Cover Flow基本原理及Tapku实现方法

from: http://www.cocoachina.com/bbs/read.php?tid=73570&page=19 Cover Flow基本原理及Tapku实现方法 Co...

Cover flow基本原理及Tapku实现方法

Cover flow是苹果首创的将多首歌曲的封面以3D界面的形式显示出来的方式。如下图所示: 从图中可以看到,显示在中间的图片为目标图片,两侧的图片在y轴都旋转了一定的角度,并且每两张图片之...

Cover flow基本原理及Tapku实现方法

Cover flow基本原理及Tapku实现方法    Cover flow是苹果首创的将多首歌曲的封面以3D界面的形式显示出来的方式。如下图所示: 从图中可以看到...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)