风云的专栏

心之所愿, 无所不能

在iOS上实现Cover Flow (一)

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
下一篇在iOS上实现Cover Flow (二)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭