App Store iPad 端首页无限循环轮播效果实现思路

公司做的是 iPad 端的软件,iPad 端软件因为屏幕比较宽,所以轮播图一般和 App Store for iPad (如下图) 上的风格保持一致!
IMG_0001.jpg
github 上面关于轮播的一般都是适用于 iPhone 风格的,如图下:
image.png
不适用 iPad 风格,所以我还是自己去实现这种效果,下面分享一下实现思路:

讲到无限轮播图,我们第一思路是:使用UICollectionView来显示所有的图片,然后把 pagingEnabled 属性设置为 YES,再加个定时器,就可以实现轮播的效果!要实现循环轮播的话,思路如下:
如图:我们要实现无限循环轮播5张图片,分别为图1,图2,图3,图4,图5!我们需要两张冗余的图片,在图1之前放一张图5,在图5之后放一张图1。


image.png
  • 我们在显示之前,先静默滑动到第二张图片,也就是我们要的图1;
  • 当我们向右滑动到下图红框的图5,滑动结束后,我们静默滑动到右边的图5,这样我们又可以左右滑动。
  • 当我们向左滑动到最后红框的图1,滑动结束后,我们静默滑动到左边的图1,这样我们又可以左右滑动。
  • 最终给用户的效果就是无限循环轮播的效果
这种效果全屏的图形是没问题的,但是如果要实现 iPad 上的那种效果的话,不可行!

原因:上述方法中虽然我们可以通过以下方法来改变最终我们滑动结束后的位置!

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset;

但是当我们把pagingEnabled属性设置为 YES 之后,以上方法就不起作用了,因为我们设置必须是一页一页显示,然而我们要的效果是一页显示中间一个完整图形,旁边两个半图形,这种效果达不到!

左思右想,既然使用已有的控件行不通,不如自己实现这种效果,

实现思路如下:

  • 我们先自定义一个 Cell 视图,在 Cell 上面有一个 UIImageView,和一个 UILabel!
  • 然后创建5个Cell 视图,如下图
image.png
  • 初始化上图内容
  • 为他们的父视图添加左右滑动手势
  • 左滑手势事件: 首先图1的 frame 设置为图5的 frame,然后图2,图3,图4,图5做向左移动上图红线距离的动画,我们实现了向左滑动的效果!
  • 右滑手势事件: 首先图5的 frame 设置为图1的 frame,然后图1,图2,图3,图4做向右移动上图红线距离的动画,我们实现了向右滑动的效果!
  • 如果有超过5张图片需要显示,我们可以统一处理:
    • 向左滑动时图片数组向后移动一位,超出则到第一位,即我们可以使用(currentIndex + 1) % imageCount 来求数组下标,获取显示图片
    • 向右滑动时图片数组向前移动一位,小于0则到到最后一位,即我们可以使用(currentIndex + imageCount - 1) % imageCount 来求数组下标,获取显示图片
  • 以上机制我们实现了无论需要轮播多少个图片我们都只需创建5个视图通过 frame 变换,移动动画,我们实现了真正的无限循环轮播
跪求Star
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 222,104评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,816评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,697评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,836评论 1 298
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,851评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,441评论 1 310
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,992评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,899评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,457评论 1 318
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,529评论 3 341
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,664评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,346评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,025评论 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,511评论 0 24
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,611评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,081评论 3 377
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,675评论 2 359

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,121评论 4 61
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,303评论 25 707
  • 种一亩花田 酿一壶老酒 听一曲琴音 品一盏茗茶 守一份约定 等一眼回眸 岁月静好 只待你来 共赴一世清欢 野草诗会...
    姝瑾儿阅读 691评论 49 44
  • 迭代器的作用: 就是用于抓取集合中的元素 迭代器的方: hasNext() 问是否有元素可遍历。如果有元素可以...
    小小机器人阅读 229评论 0 0
  • 我时常沉溺在自己的世界里 以物喜,以已悲 有时候高兴的像个疯子 有时候难过的像个小丑 很多情绪千结百绕般 你越是理...
    倾花似雪阅读 249评论 1 4