前言
iOS9马上要发布了 为了我司APP的兼容性问题 特意把手上的iOS Mac XCode都升级到了最新的beta版 然后发现iOS9的多任务管理器风格大变 变成了下面这种样子
<img id="aimg_A0mHn" class="zoom" file="http://cc.cocimg.com/api/uploads/20150803/1438572758102623.gif" lazyloadthumb="1" border="0" alt="" />
我忽然想起来之前的**提到我最爱的UI控件iCarousel要实现类似这种效果其实是很简单的 一时兴起就花时间试验了一下 效果还不错 所以接下来我就介绍一下iCarousel的高级用法: 如何使用iCarousel的自定义方式来实现iOS9的多任务管理器效果
模型
首先来看一下iOS9的多任务管理器究竟是什么样子
<img id="aimg_KCKCm" class="zoom" height="569" file="http://cc.cocimg.com/api/uploads/20150803/1438572789606303.jpg" border="0" alt="" />
然后我们简单的来建个模 这个步骤很重要 将会影响我们之后的计算 首先我们把东西摆正
<img id="aimg_wb2Mw" class="zoom" file="http://cc.cocimg.com/api/uploads/20150803/1438573117663857.png" lazyloadthumb="1" border="0" alt="" />
然后按比例用线分割一下
<img id="aimg_H77X7" class="zoom" file="http://cc.cocimg.com/api/uploads/20150803/1438573127252488.png" lazyloadthumb="1" border="0" alt="" />
这里可以看到 如果我们以正中间的卡片(设定序号为0)为参照物的话 最右边卡片(序号为1)的位移就是中心卡片宽度的4/5 最左边的卡片(序号为-2)的位移就是中心卡片的宽度的2/5 注意:这两个值的确定对我们非常重要
而大小*的缩放 就按照线性放大**就行了 由于计算很简单 这里就不多赘述了
细心的人可能会注意到 其实iOS9中的中心卡片 并不是居中的 而是靠右的 那么我们再把整体布局调整一下
<img id="aimg_r3jVw" class="zoom" file="http://cc.cocimg.com/api/uploads/20150803/1438573136363450.png" lazyloadthumb="1" border="0" alt="" />
这样就差不多是iOS9的样子了
原理
接着我们来了解一下iCarousel的基本原理
iCarousel支持如下几种内置显示类型(没用过的同学请务必使用pod try iCarousel来运行一下demo)
iCarouselTypeLineariCarouselTypeRotaryiCarouselTypeInvertedRotaryiCarouselTypeCylinderiCarouselTypeInvertedCylinderiCarouselTypeWheeliCarouselTypeInvertedWheeliCarouselTypeCoverFlowiCarouselTypeCoverFlow2iCarouselTypeTimeMachineiCarouselTypeInvertedTimeMachine
具体效果图可以在官方Github主页上看到 不过这几种类型虽然好 但是也无法满足我们现在的需求 没关系 iCarousel还支持自定义类型
iCarouselTypeCustom
这就是我们今天的主角
还是代码说话 我们先配置一个简单的iCarousel示例 并使用iCarouselTypeCustom作为其类型
[size=1em]16 |
楼主
标题置顶
标题高亮
