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

您的點贊和關注是我堅持寫作的最大動力，本人正在尋找測試開發的工作機會，歡迎郵件聯絡（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, 有完整的生命週期，如模組業務複雜可進一步進行 MVP 或 MVVM 設計模式進行拆分

模組圖

類圖

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

MultiSpeakerView 初始化模式時序圖

模組間的通訊

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

參考

• 淺探美團點評的模組化框架 Shield
• Shield——開源的移動端頁面模組化開發框架