复杂 Activity UI 界面模块化重构实践

您的点赞和关注是我坚持写作的最大动力，本人正在寻找测试开发的工作机会，欢迎微信联系: gyx764884989

需求背景

我们的需求是有一个类似微信多人通话，发言窗口的布局可能有不同的样式

1. 两个人的时候发言窗口是等分的样式
2. 三个人是品字形
3. 四个人是田字型
4. 也有可能有一个大窗口，然后有一系列小窗口围绕在周围
5. 也有可能是一个大窗口，一个小窗口，然后小窗口覆盖在大窗口之上

遇到的问题

1. 目前我们是会议室 Activity 中，有一个 FrameLayout, 通过 addView() 和 removeView() 的方法将不同的发言者窗口添加或移除
2. 二分屏，三分屏，四分屏的代码都在一个类中，维护性也不是很好
3. 多种会议模式的 View、Controler 都集中写在 MultiSpeakerView, 不利于代码的理解与维护

要实现的目标

1. 保留 MultiSpeakerView 作为父容器，使其可以根据业务模式进行拆分，例如（驾驶模式、演讲者模式、画廊模式）
2. 模式自身具备完整的模块生命周期，同时还可以感知 Activity 的生命周期，各个模式间解耦、各个模式与大的页面（MultiSpeakerView）解耦
3. 创建统一的监听会议事件监听接口，方便接收 ButelOpenSDK 的通知事件
4. 模块化的拆分与 MVP 等架构方式的拆分并不冲突。开发者可以在某个模式里运用 MVP 或 MVVM 的架构方式，来对页面的逻辑进行进一步的拆分以提升代码复用性，使模块逻辑变得更加清晰。
5. 模块管理器可以方便的对已有模块进行管理，例如增加新模块，删除已有模块，更新模块（支持批量操作），增加或删除模块会自动触发对应的模块生命周期变化

核心类

1. MultiSpeakerView，根视图容器，FrameLayout
2. ModeManager (模式管理器), 其决定了如何创建、更新、恢复及销毁模式，还有如何将模式添加到页面中
3. MeetingModeLifeCycler 负责监听 Activity 生命周期，然后及时将 Activity 生命事件推送给各个模式
4. xxxMode ，模块，类似一个 Activity, 有完整的生命周期，如模块业务复杂可进一步进行 MVP 或 MVVM 设计模式进行拆分

模块图

类图

充分利用了面向接口编程的设计范式，整个模块化框架通过接口来交互及规范行为，接口的多样化实现以达成多态。

MultiSpeakerView 初始化模式时序图

模块间的通信

每个模块会持有 ModeManagerInterface, 假如需求模块 A 中触发事件，需要隐藏模块 A ,显示 B, 则可以在 A 中调用 ModeManagerInterface 的 removeMode(A) 和 addMode(B) 即可。

参考

• 浅探美团点评的模块化框架 Shield
• Shield——开源的移动端页面模块化开发框架