阅读 904

复杂 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, 有完整的生命周期,如模块业务复杂可进一步进行 MVPMVVM 设计模式进行拆分

模块图

类图

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

MultiSpeakerView 初始化模式时序图

模块间的通信

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

参考

关注下面的标签,发现更多相似文章
评论