Your likes and attention are the biggest motivation for me to keep writing. I am looking for a job opportunity in test development. Please contact me on wechat: GYx764884989

Demand background

Our requirement is to have a similar wechat multi-person call, the layout of the speech window may have different styles

  1. When two people are speaking, the window is divided equally
  2. Three men is a character
  3. Four people are tian type
  4. It’s also possible to have a big window and then a series of smaller Windows around it
  5. It could be a big window, a small window, and then the small window is on top of the big window

Problems encountered

  1. At present we are a conference roomActivityIn, there is oneFrameLayoutThrough theaddView() 和 removeView()Method to add or remove different speaker Windows
  2. Split screen, split screen, split screen code is all in one class, maintenance is not very good
  3. The Views and Controlers of various meeting modes are centralizedMultiSpeakerViewIs not conducive to the understanding and maintenance of the code

Goals to be achieved

  1. keepMultiSpeakerViewAs a parent container, so that it can be split according to business model, for example (drive mode, speaker mode, gallery mode)
  2. Patterns have their own complete module life cycle, and they can also sense the Activity life cycle, decoupling between patterns, and decoupling between patterns and large pages (MultiSpeakerView)
  3. Create a unified listening interface for meeting eventsButelOpenSDKNotification event of
  4. Modular splitting does not conflict with architectural approaches such as MVP. Developers can use MVP or MVVM architecture in a pattern to further break down the logic of the page to improve code reuse and make module logic clearer.
  5. The module manager can easily manage existing modules, such as adding new modules, deleting existing modules, and updating modules (batch operation is supported). Adding or deleting modules automatically triggers the corresponding module life cycle change

Core classes

  1. MultiSpeakerView, root view container, FrameLayout
  2. ModeManager, which determines how patterns are created, updated, restored, and destroyed, and how patterns are added to pages
  3. MeetingModeLifeCycler is responsible for listening to the Activity life cycle and then pushing Activity life events to each mode in a timely manner
  4. XxxMode module, similar to an Activity, has a complete life cycle, such as module business complex can be further carried outMVP 或 MVVMDesign patterns are split

Module chart

The class diagram

Making full use of the design paradigm of interface programming, the whole modular framework interacts and standardizes behavior through interfaces, and interfaces are diversified to achieve polymorphisms.

MultiSpeakerView Initialization mode sequence diagram

Communication between modules

Each module holds the ModeManagerInterface. If an event is triggered in module A, To hide module A and display module B, you can call removeMode(A) and addMode(B) of ModeManagerInterface in A.

reference

  • A sneak peek at meituan point reviews of the modular framework Shield
  • Shield – Open source modular development framework for mobile pages