將 XML 檢視區塊遷移至 Jetpack Compose

Jetpack Compose 支援與 Views 互通操作，您可以在 Views 中使用 Compose，反之亦然。這樣一來，您就能在現有以 View 為基礎的應用程式中採用 Compose，而不必立即遷移所有 View。

遷移步驟

  1. 建立計畫：建立完善的逐步計畫，以執行遷移作業。建議您優先處理待辦事項中的遷移工作。
  2. 找出要遷移的 XML 候選項目：找出階層中最小的元件 (即葉節點)，並從這些元件開始遷移，然後由下而上逐步擴大遷移計畫，將階層中越來越高的元件納入遷移範圍。適合初步遷移的項目是小型無狀態的項目，且依附元件較少。
  3. 分析階層：找出要遷移的 XML 檢視區塊後，請分析其 XML 版面配置結構和實作項目。
  4. 擷取初始狀態：執行螢幕截圖測試，擷取所選 XML 檢視區塊的初始狀態。
  5. 必要條件：設定 Compose 依附元件：確認專案是否已設定 Compose 依附元件和編譯器。如果沒有，請按照「設定 Compose 依附元件和編譯器」一文的說明操作。
  6. 必要條件：設定 Compose 主題確認專案是否已設定 Compose 主題。如果沒有，請按照 Compose 主題設定。在應用程式互通時保留原始 XML 主題將 XML 主題遷移至 Compose，瞭解如何設定狀態，直到專案完全遷移至 Compose 為止。
  7. 將 XML 檢視區塊遷移至 Compose：開始將 XML 程式碼轉換為 Compose，套用適當的主題，並為遷移的 Composable 新增 Compose 預覽畫面。如需常見遷移情境，請參閱其他資源。舉例來說，如要遷移至 Compose 中的 Lazy API，請按照「將 RecyclerView 遷移至 Compose」一文中的步驟操作。
  8. 取代用法：取代先前 XML View 的用法，改用新的 Compose 元件。如要在 Views 中新增 Compose，請按照「Views 中的 Compose」一節中的步驟操作。如要在 Compose 中新增 Views，請按照「Compose 中的 Views」一文中的步驟操作。
  9. 驗證遷移作業：確認螢幕截圖測試中擷取的初始狀態，與遷移後可組合項目的 Compose 預覽畫面相同。如果不相符，請疊代新的可組合 UI，並加以改善，使其與初始狀態一致。為新的可組合函式建立新的 Compose UI 測試。
  10. 移除 XML：新遷移的可組合函式與初始 XML UI 相符後，請移除過時的 XML View 程式碼及其測試。

常見的遷移情境

確認可組合函式中使用了 dp 和 sp 擴充功能 (16.dp、20.sp)。如果 XML 檢視畫面中存在 tools:text，請在個別的 @Preview 可組合項中使用。

屬性至修飾符轉換

大多數 XML 屬性會成為 modifier 鏈結的一部分，或是可組合函式的參數。

XML 屬性 Compose 對等項目
android:layout_width="match_parent" Modifier.fillMaxWidth()
android:layout_height="match_parent" Modifier.fillMaxHeight()
android:layout_width="wrap_content" (預設行為，通常不需要修飾符)
android:padding="Xdp" Modifier.padding(X.dp)
android:layout_margin="Xdp" Modifier.padding(X.dp) (外側邊框間距)
android:gravity="center" contentAlignment = Alignment.Center (方塊) 或 horizontalAlignment / verticalArrangement (欄/列)
android:background="@color/white" Modifier.background(colorResource(R.color.white))
android:visibility="gone" 包裝在 if (visible) { ... } 區塊中

遷移樣式 (styles.xml)

XML 樣式通常會合併多個屬性來建立樣式。在 Compose 中，只要建立具有特定樣式的可組合項變化版本，即可完成這項作業。

請提供根據樣式和基本元件命名的個別 @Composable 函式，標示這些元件的樣式和用途差異。

  • 模式：如果 XML 元素使用自訂樣式 (例如 style="@style/MyPrimaryButton")，請勿嘗試內嵌複製樣式。請改為建議建立特定可組合函式。
  • 範例：
    • XML： <Button style="@style/MyPrimaryButton" ... />
    • 撰寫：MyPrimaryButton(onClick = { ... })
  • 常見屬性群組：如果樣式設定了常見的修飾符 (例如邊框間距 + 高度)，請將這些修飾符擷取至可讀取的擴充功能屬性或共用的 Modifier 變數。