[Android] Architecture: The UI layer — MAD Skills（3/5）

這是介紹 Architecture 的第三篇。想看第二篇 Data Layer 的請服用：

Architecture: Data Layer — MAD Skills（2/5）

The UI Layer

UI Layer 負責與使用者互動，並且在畫面上顯示資料。

在這邊會需要先介紹三個名詞，分別是 UI Element、UI State 和 State holder。

UI Element 就是 View，一般使用 Android View 或 Jetpack Compose 在 Activity 和 Fragment 中創建。State holder 負責創建及管理 UI 需要顯示的資料，ViewModel 就是最常見的 State holder，他們會負責將資料提供給 UI Element ，而這些傳遞給 UI Element 的資料稱為 UiState。

UI Layer pipeline

1. 將 Domain Layer 或是 Data Layer 取得的 App Data，轉換成 UI Layer 所需的 UI State。
2. 將 UI State 提供給 UI Elements 做顯示 。
3. 傳遞使用者操作 UI Elements 的事件，並且依需求將資料變化反映到 UI State 上。

術業有專攻

UI Layer Concepts

定義 UI State

假如需要在畫面上顯示新聞區塊，可以創建 NewsUiState 作為 UI State。UI State 的參數須為 不可變的，View 只需專注在取得最新的 UI State，並將變化更新到 UI Elements 上，不能由 View 來修改資料。

單向資料流（Unidirectional Data Flow）

單向資料流（UDF）是一種設計模式，資料來源會將資料狀態向下傳遞，接收者沒有辦法直接修改資料，只能將事件向上傳送，由資料來源再作修改並傳遞。

UI Layer 的 pipeline 就是一種 UDF。UI Element 會將取得的 UI State 顯示在畫面上，並且向 State holder 通知使用者事件（例如點擊事件），State holder 更新 UI State 後，也會再度觸發 UI Elements 更新畫面。

接下來是簡單的程式碼範例。

由 ViewModel 建立 UI state

ViewModel 依據需求更新 UI state

View 訂閱所需的 UI state，並更新到 UI elements 上

介紹完 UI Layer 後，接著進入 Domain Layer 的篇章吧！

Architecture: The Domain Layer — MAD Skills（4/5）

參考資料