複雜 Activity UI 介面模組化重構實踐

0xCAFEBOY發表於2020-03-30

您的點贊和關注是我堅持寫作的最大動力,本人正在尋找測試開發的工作機會,歡迎郵件聯絡(log.v@qq.com)

需求背景

我們的需求是有一個類似微信多人通話,發言視窗的佈局可能有不同的樣式

  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 設計模式進行拆分

模組圖

複雜 Activity UI 介面模組化重構實踐

類圖

充分利用了面向介面程式設計的設計正規化,整個模組化框架通過介面來互動及規範行為,介面的多樣化實現以達成多型。

複雜 Activity UI 介面模組化重構實踐

MultiSpeakerView 初始化模式時序圖

複雜 Activity UI 介面模組化重構實踐

模組間的通訊

每個模組會持有 ModeManagerInterface, 假如需求模組 A 中觸發事件,需要隱藏模組 A ,顯示 B, 則可以在 A 中呼叫 ModeManagerInterfaceremoveMode(A)addMode(B) 即可。

參考

相關文章