iOS那些“垃圾”的轮播
2016-12-09 09:38
246 查看
轮播视图通常也叫Banner,90%以上App都会用到的一个控件,网上有很多开源代码,但是至今我觉得比较好的一个是SDCycleScrollView,因为他解决了我接下来要吐槽的两个问题。
通常实现定时自动滚动Banner的思路大体有三种:
3个`UIImageView`
N+2个`UIImageView`思路
N * section(个人不推荐,因为这将代码写死了,当有个无聊的人真的滚动到最后一个section时,程序就会crash了)
前两种思路又分为用UIScrollView和UICollectionView实现,个人没有用过第一种思路,都是第二种,本文也是基于第二种思路,这两种思路的中心思想其实都是运用了视觉误差。
具体思路请跳转
中文
英文
快速滑动时卡顿
先来看看那些“垃圾”Banner
卡顿问题一(3个UIImageView思路)
通过卡顿频率,我猜想这两个项目的Banner思路应该一样,用的三个UIImageView。
不知道你是否看得到动图中卡顿的问题,如果你手机上恰好装了这两个App,可以自己试一下,很简单,只要快速滑动就可以复现问题。
但是这两个的PageControl还是处理得很好的,能实时滚动到相应的位置。
卡顿问题二((N+2)个UIImageView思路)
这个问题不好看出,因为他的卡顿频率比较低,刚好是一组轮播视图的周期。必须在第N+1张时才会复现。想看得清楚的小伙伴,如果自己项目Banner是这个思路可以测试一下自己项目的。
再看看这个PageControl的位置,在你快速滑动时,它是不动的,我猜想他控制PageControl的位置应该是在这个方法里做的
就是这个两个方法其中一个里计算cell位置的判断条件不对
由于这个问题比较难复现,我就用自己的Demo测试的
UICollectionView实现,会自动修复
UIScrollView实现,需手动修复
动图中应该可以清楚的看到滚动视图滚动的坐标不对。
原因
这个具体原因我也不知道,这是所有轮播都会发生的问题,我猜想是跟内部的RunLoop应该有关。
还有的Banner是pageControl和cell联动不及时,比如咸鱼
因为是在这里处理控制pageControl的位置的
UIScrollView 实践经验 详细讲了UIScrollView,并配有Demo
LazyScrollView来自天猫团队,据说天猫首页用的这个,有复杂UI的同学可以学习下
UITableView的Cell复用原理和源码分析和LazyScrollView结合起来学习,肯定有很多收获
最后附上修复以上问题的Demo
通常实现定时自动滚动Banner的思路大体有三种:
3个`UIImageView`
N+2个`UIImageView`思路
N * section(个人不推荐,因为这将代码写死了,当有个无聊的人真的滚动到最后一个section时,程序就会crash了)
前两种思路又分为用UIScrollView和UICollectionView实现,个人没有用过第一种思路,都是第二种,本文也是基于第二种思路,这两种思路的中心思想其实都是运用了视觉误差。
具体思路请跳转
中文
英文
快速滑动时卡顿
先来看看那些“垃圾”Banner
卡顿问题一(3个UIImageView思路)
通过卡顿频率,我猜想这两个项目的Banner思路应该一样,用的三个UIImageView。
不知道你是否看得到动图中卡顿的问题,如果你手机上恰好装了这两个App,可以自己试一下,很简单,只要快速滑动就可以复现问题。
但是这两个的PageControl还是处理得很好的,能实时滚动到相应的位置。
卡顿问题二((N+2)个UIImageView思路)
这个问题不好看出,因为他的卡顿频率比较低,刚好是一组轮播视图的周期。必须在第N+1张时才会复现。想看得清楚的小伙伴,如果自己项目Banner是这个思路可以测试一下自己项目的。
再看看这个PageControl的位置,在你快速滑动时,它是不动的,我猜想他控制PageControl的位置应该是在这个方法里做的
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { }卡顿原因
就是这个两个方法其中一个里计算cell位置的判断条件不对
func scrollViewDidScroll(_ scrollView: UIScrollView) { } func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { }Tab切换卡中间,不能复位
由于这个问题比较难复现,我就用自己的Demo测试的
UICollectionView实现,会自动修复
UIScrollView实现,需手动修复
动图中应该可以清楚的看到滚动视图滚动的坐标不对。
原因
这个具体原因我也不知道,这是所有轮播都会发生的问题,我猜想是跟内部的RunLoop应该有关。
还有的Banner是pageControl和cell联动不及时,比如咸鱼
因为是在这里处理控制pageControl的位置的
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { }简书Banner的pageControl向左手动拖动时又太灵敏。
func scrollViewDidScroll(_ scrollView: UIScrollView) { let page = scrollView.contentOffset.x / scrollView.frame.width if page <= 0.0 { // 向右拉 collectionView?.scrollToItem(at: IndexPath(item: urlStrs.count - 2, section: 0), at: .centeredHorizontally, animated: false) pageControl?.currentPage = urlStrs.count - 3 } else if page >= CGFloat(urlStrs.count - 1) { // 向左 pageControl?.currentPage = 0 collectionView?.scrollToItem(at: IndexPath(item: 1, section: 0), at: .centeredHorizontally, animated: false) } else { let value = page.truncatingRemainder(dividingBy: 1) < 0.5 if value { // cell过半才改变pageControl(简书的Banner应该没有这个判断) pageControl?.currentPage = Int(page) - 1 } } }推荐
UIScrollView 实践经验 详细讲了UIScrollView,并配有Demo
LazyScrollView来自天猫团队,据说天猫首页用的这个,有复杂UI的同学可以学习下
UITableView的Cell复用原理和源码分析和LazyScrollView结合起来学习,肯定有很多收获
最后附上修复以上问题的Demo
相关文章推荐
- IOS学习之番外:开发中的那些琐碎
- 强烈鄙视那些虚伪的垃圾
- 唐巧:iOS应用内支付(IAP)的那些坑
- iOS开发那些-如何打包iOS应用程序
- iOS应用内支付(IAP)的那些坑
- iOS开发那些-如何打包iOS应用程序
- iOS应用内支付的那些坑
- 那些iOS和Android跨平台解决方案
- IOS ARC和垃圾回收机制 基本概念
- 警告那些来我blog的垃圾人tmd别没事就发些垃圾回帖搞乱我页面
- 那些解决了我问题的URL之ios&C#
- iOS面试那些事
- iOS应用内支付(IAP)的那些坑
- 交互设计的那些事:Android、iOS和WP平台的六大差异
- 给那些迷惑于如何做垃圾站的站长们!
- IOS之路-关于目录的那些操作
- IOS 图片轮播和开始的指导界面
- iOS学习笔记4 - 垃圾回收初涉
- IOS开发(一)——写在前面的垃圾话
- iOS开发中那些高效常用的宏