最主要的工作是重写一个ContainerViewCotroller
,自定定义新ViewCotroller被push进来、旧ViewCotroller被pop移除后,后如何排版,以及其中动画如何展示等问题。
以push新ViewCotroller为例子
-(void)pushViewController:(UIViewController*)newVC animated:(bool)animated{
UIViewController* oldVC = 获得最倒数第一个ViewController
[self pushOldViewController:oldVC newViewController: newVC animated: animated]
}
- (void)pushOldViewController:(UIViewController*)oldVC
newViewController:(UIViewController*)newVC
animated:(BOOL)animated {
...
[oldVC beginAppearanceTransition:NO animated:animated];
//1.将新的Viewcontroller.view加入到根viewcontroller.view
WrapperView* newWrapperView =
[self appendWrapperViewWithViewController:newVC
wrapperFrame:[self newViewControllerBeginFrame]
toView:self.view
animated:animated];
newVC.view.frame = [self childViewFrame];
newWrapperView.delegate = self;
//2. 把新的Viewcontroller添加为子Viewcontroller
[self addChildViewController:newVC];
//3. 进场动画
[UIView animateWithDuration:0.35
animations:^{
newWrapperView.frame = [super newViewControllerEndFrame];
;
}
completion:^(BOOL finished) {
//4. 进场动画结束
[oldVC endAppearanceTransition];
[newVC didMoveToParentViewController:self];
}];
}
退场
- (able UIViewController*)popViewControllerAnimated:(BOOL)animated {
//1.移除倒数第一个Viewcontroller
[lastViewController willMoveToParentViewController:nil];
[lastViewController beginAppearanceTransition:NO animated:animated];
//2.倒数第二个Viewcontroller即将显示
[secondToLastViewController beginAppearanceTransition:YES animated:animated];
//3.退场动画
[UIView animateWithDuration:0.35
animations:^{
lastWrapper.frame = [self newViewStartFrame];
secondToLastWrapper.frame = [self rightViewFrame];
}
completion:^(BOOL finished) {
//4.移除旧Viewcontroller.view
[lastWrapper removeFromSuperview];
[lastViewController endAppearanceTransition];
[lastViewController removeFromParentViewController];
// 5.倒数第二个ViewController显示
[secondToLastViewController endAppearanceTransition];
}];
}
这部分功能很核心的工作是,在进场/退场后,依次调用相关函数,这些函数Viewcontroller的生命周期事件至关重要。
更详细接口文档:https://developer.apple.com/documentation/uikit/view_controllers/creating_a_custom_container_view_controller
https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/ImplementingaContainerViewController.html
2.原生界面改造
在横竖屏切换时,会导致ViewController.view
触发重绘。使用原生进行布局的页面需要保持所有的view都是相对布局。这里推荐使用autolayout方式,这样既一套代码能完美的兼容iPhone/iPad
具体的工作有:
• 弃用
[UIScreen main].bound.size
,改为ViewController.view.size
作为当前布局宽高 仅仅支持单屏(iPhone)时,[UIScreen main].bound.size = ViewController.view.size
但在iPad多屏横屏时[UIScreen main].bound.size ≠o ViewController.view.size
• 将绝对布局改为相对布局,即使用autolayout
• 感知横竖屏的切换事件
3. H5界面适配
H5本身已经有非常好的适配不同屏幕大小的特性,但可能在一些特殊的场景上不排除因为历史原因专为iOS适配hardcode
• 感知横竖屏的切换事件
4. Flutter业务技术改造
界面技术改造
flutter业务因为原生就本身支持不同屏幕大小的适配。FlutterViewController.view
会在界面重排时重新触发界面的重绘。从dart层布局层面代码无需特别调整。
横竖屏的切换时有不同的展示逻辑,正常监听didChangeMetrics
即可
@override
void didChangeMetrics {
setState( { _lastSize = WidgetsBinding.instance.window.physicalSize; });
}
引擎层技术改造
这是本次iPad适配中的重头戏。因为闲鱼中大部分核心基础业务都是基于Flutter进行开发。让多个Flutter界面顺畅运行在iPad,绕不过的问题。
先回到闲鱼的终端路由架构。
闲鱼路由系统是基于flutter_boost进行搭建。而flutter_boost的原理则是多个界面共享同一个引擎,这一实现的有几个好处
• 优化内存,同一时刻Flutter引擎只提供给最前的视图即可
• 多个Flutter视图因为运行在同一个Dart Isolate的缘故,数据能互相访问(单例等)
• 绑定到Isolate的Flutter插件、messagechannel都只有一份
但正是这些“优点”,同一时刻只能存在一个Flutter引擎,导致两个Flutter视图左右无法同屏。
那是否可以给每个视图(ViewController/Activity)创建一个flutter引擎?这种方案也出现如下问题
业务问题
• 每个Flutter引擎会创建两份原生plugin实例,如原生plugin的实现是基于单例则会出现紊乱
• 创建多个Flutter引擎增加非常多的性能开销
性能问题
如不复用Flutter引擎,除此外还有其他场景也会导致内存激增
• 混合栈中存在多个flutter界面
• 原生tab中存在多个Flutter界面
• 多个Flutter views同时存在,比如列表中每个cell都是Flutterview
那官方Flutter引擎是否类的方案?
Flutter官方在2020年也推出了轻量级多引擎的技术方案: http://flutter.dev/go/multiple-engines
轻量级多引擎方案使用的场景
• 混合栈应用中多个flutter界面
• 原生tab中存在多个Flutter界面
• 多个Flutter views同时存在,比如列表中每个cell都是Flutterview
方案的初衷是在底层对某些如下的资源/类进行共享:
1. Threads Host(线程)
2. Skia Contexts (Skia绘制上下文)
3. Graphics Contexts (图像绘制上下文本)
4. Image Caches (图片缓存)
5. Isolate Groups (Dart的isolate)
6. Fonts (字体)
这个方案中需要注意点是,两个引擎中的isolate是不共享的。
这种方案正因为各个界面/view中的因为不共享isolate的缘故。引擎之间的变量是无法共享的。随之绑定到isolate的对象也存在有多份。
为能和原来闲鱼的整个逻辑兼容,使业务平滑无感迁移,多引擎共享isolate方案势在必行。
基于共享isolate的Flutter多引擎方案
修改后c 侧代码
引擎A和引擎B有各自的 shell
,Engine
,Window
对象实例,且不同的引擎使用application_id 来标记。 他们之间共享isolate。
Application
这里我们称创建出来的多个引擎称为不同Application,每个引擎用不同ApplicationId标识。
不同Application使用自己的渲染管线,这样就达到了不同引擎的渲染流程既互不影响。 但有因为运行在同一个isolate下,业务代码自己的单例、数据等能互相访问。