[特斯拉组件]iOS 高性能 PageController无标题文章

1.组件介绍

Page是企鹅FM研发的分页组件,包括支持分页非交互切换(通过方法调用导航切换)和交互切换(屏幕的手势滑动),多个分页Controller和View的管理。

1.1需求背景

为什么弃用UIPageViewController,首先介绍一下UIPageViewController,这是系统为开发者定制的分页组件,提供了两种分页切换的效果,一是滑动 二是翻页。且提供了前后切换的回调。

a) UIPageViewController在iOS8以下的系统运行是有问题的,可以参考stackFlow上的症状描述https://stackoverflow.com/questions/12939280/uipageviewcontroller-navigates-to-wrong-page-with-scroll-transition-style/12939384#12939384

This is actually a bug in UIPageViewController. It occurs only with

the scroll style (.Scroll) and only after calling

setViewControllers:direction:animated:completion: with animated:YES.

Thus there are two workarounds:

Don’t use UIPageViewControllerTransitionStyleScroll.

Or, if you call setViewControllers:direction:animated:completion:, use animated:NO.

To see the bug clearly, call

setViewControllers:direction:animated:completion: and then, in the

interface (as user), navigate left (back) to the preceding page

manually. You will navigate back to the wrong page: not the preceding

page at all, but the page you were on when

setViewControllers:direction:animated:completion: was called.

The reason for the bug appears to be that, when using the scroll

style, UIPageViewController does some sort of internal caching. Thus,

after the call to setViewControllers:direction:animated:completion:, it

fails to clear its internal cache. It thinks it knows what the preceding

page is. Thus, when the user navigates leftward to the preceding page,

UIPageViewController fails to call the dataSource method

pageViewController:viewControllerBeforeViewController:, or calls it with

the wrong current view controller.

大意是说使用.Scroll的时候,UIPageViewController做了内部缓存的排序,当调用

setViewControllers:direction:animated:completion:

时 它认为自己知道了前一个的分页存在,当调用前一个页面的时候,就不会去调用dataSource的方法。

b)

UIPageViewController的DataSource和Delegate的接口过于简单,对于比较复杂的情况(比如除了分页以外还有其他View的情况下)无法处理。参照下面的例图,我有一个tab下面有小黄条,跟着手势横向滑动的同时也横向滑动,这里系统的UIPageViewController无法支持。其外,我还需要子页面纵向滑动时候去修改Cover和Tab的frame。所以UIPageViewController无法满足比较复杂的需求。

c) 低配的机器会产生卡顿问题,因为系统的UIPageViewController,在快速切换的时候,会释放掉不用的页面,所以在快速回切的时候会造成卡顿,可以参考下面的性能测试。

综上所述,弃用了系统的UIPageViewController。

1.2使用说明

使用非常简单,继承组件的类,实现相应的delegate和datasourc就可以了。

Page的例图如下:

页面层次关系如下:

图中由一个图片,3个栏目 (详情,节目,评论)和一个List组成。可以分为三个层次,Cover,Tab和Page。

Page组件层次关系如下,

图中的ShowListController是节目分页,AlbumListController是专辑分页.

2.组件架构设计

2.1 架构介绍

类图如下:

简要说明下各个协议的作用:

FMPageDataSource,  提供子页面,子页面的个数,子页面展示的frame给PageController。

FMPageDelegate,  提供页面交互切换和非交互切换的回调给上层以及页面的纵向滑动和横向滑动的contentoffset给上层。

FMTabDataSource,  提供TabView的具体展示效果。

FMTabDelegate,  提供TabView的点击响应给上层。

FMCoverController,  提供CoverView给CoverController.

其中,FMTabController默认遵循FMTabDataSource,FMTabDelegateSource,FMPageDataSource,FMPageDelegate协议。FMCoverController遵循FMCoverDatasource协议。

2.2 接口设计

接口遵循高内聚和低耦合的特性,只把Delegate和DataSource开放给上层,同时做接口分离,把Page,Tab,Cover特性的分离。 代码如下:

@interfaceFMTabController : FMBusinessViewController @interfaceFMCoverController : FMTabController

2.3 Child页面的生命周期管理和切换。

1.UIScrollView支持分页效果,手势处理及交互操作多个回调方法可以实现页面的切换效果。

2.生命周期管理有两种方式 a.频繁地add/remove ChildController b.使用下面的代码实现生命周期的管理:

1)shouldAutomaticallyForwardAppearanceMethods2)beginAppearanceTransition: animated:3)endAppearanceTransition

a.会产生一个重大缺陷,就是频繁切换的卡顿问题。

b.不需要频繁地去调用add/remove,1)方法避免了 add/remove产生的生命周期,2)和3)保证了开发者可以自己控制ChildController的生命周期。

Page的生命周期图如下:

初次或者reloadPage

交互切换和非交互切换

2.4 性能问题扩展

以下通过Iphone5 模拟器 10.3系统,与UIPageViewController做了性能上的对比。

UIPageViewController 快速切换内存占用情况

UIPageViewController 快速切换GPU占用情况

Page组件快速切换内存占用情况

Page组件快速切换GPU占用情况

从上图中内存占用图标的波动情况可以看出UIPageViewController在快速切换的时,会尽可能快地释放掉不用的controller及其view(主要是view)以保证内存占用较小,所以图标指标先才会频繁的波动,与UIPageViewController作对比,Page组件用空间换时间的策略避免页面卡顿。

3.技术实现的难点

从技术上看,可以分为以下四个点:

3.1 接口的设计。

接口的设计,是整个架构的核心,如果开始设计不好,会导致后续的扩展就是加属性和加方法,导致代码越来越庞大,以致无法维护,所以尽量保证简洁,职能单一,可扩展。

起初为了让delegate和datasource可以从Controller分离出去,把delegate和datasource都暴露了出去,但这样相当于多了5个属性,对于上层来说并不便于理解这些接口,仿照UITableViewController,由继承的方式实现这些协议,让接口更加简洁。

3.2 页面纵向滑动跟随Tab和Cover一起滑动。

通过上面的动态图,可以知道,Page组件有这样一个功能,子页面纵向滑动会跟随Tab和Cover一起向上滑动,其中cover的滑动的实现是监听ChildController的ScrollView的contentOffset,修改Tab的height或y。Scrollview的滑动有一个难点,怎样保证ScrollView的向下滑动的反弹处紧贴Tab,而Scrollview又可以向上滑动到导航栏。

首先Scrollview的可见范围是整屏的,也就是设置frame为整屏,Scrollview滑动的范围,就由ContentInset,ContentOffset

共同决定。因为我们知道UIScrollView的滑动范围会紧贴scrollView的bounds。所以首先,修改ContentInset的Top为-tabH-tabY,可以保证向下滑动到Tab的下边缘处反弹,又由于frame是整屏的,向上滑动时候就可以滑动导航栏,代码如下:

scrollView.contentInset =  UIEdgeInsetsMake([self.dataSource pageTop], contentInset.left, contentInset.bottom, contentInset.right);scrollView.frame = CGRectMake(0,0,Screen_Width,Screen_Height)

其中的pageTop就是tab的下边缘处。

3.3 不相邻页面切换的问题

不相邻页面的非交互切换会闪过中间的页面,产生不好的用户体验,本组件的解决方法是

非交互切换,模拟切换的动画,这里需要考虑的一个复杂情况是第一次动画还未结束就开始第二次,这时候需要提前结束第一次动画。修改后的效果图如下,

3.4 平衡性能的问题。

因为Page要管理多个controller和view,如果子页面到1000,甚至10000个怎样去处理。比如微信阅读的一本书就可能有10000页。所以这里如果全部都保存就可能产生一个问题,内存会不会过大。

观察UIPageViewController,它到一定的内存限制,会主动去释放很久没翻过的页面。所以这里,可以使用LRUCache的机制,只保存一定数量的页面。由于本应用并不涉及到过多的子页面,考虑的时间花销和内存,全部保存了所有页面。

demo地址:https://github.com/xichen744/SPPage

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,012评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,589评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,819评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,652评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,954评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,381评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,687评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,404评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,082评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,355评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,880评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,249评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,864评论 3 232
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,007评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,760评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,394评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,281评论 2 259

推荐阅读更多精彩内容