遷移策略

如果您已有以 View 為基礎的應用程式，您可能不想重寫整個應用程式 同時 UI這個頁面可協助您在 應用程式。如要開始在應用程式中使用 Compose，請參閱設定 Compose 現有應用程式

Jetpack Compose 在設計之初就考慮了 View 互通性。 這項功能意味著您可以將現有的 View 應用程式遷移至 Compose 同時能夠打造新功能如要遷移至 Compose 建議您進行漸進式遷移作業，讓 Compose 和 View 在 直到應用程式完全使用 Compose 為止。

View 應用程式遷移至 Compose 的階段
圖 1. View 應用程式遷移至 Compose 的階段

如要將應用程式遷移至 Compose，請按照下列步驟操作：

  1. 使用 Compose 建構新畫面。
  2. 建構功能時，識別可重複使用的元素，並開始建立 這是常見 UI 元件的程式庫
  3. 在一個畫面一次取代現有功能。

使用 Compose 建構新畫面

建議您使用 Compose 建構能涵蓋整個畫面的新功能 協助您廣泛採用 Compose。採用這種策略時 並善加利用 Compose 的優勢，同時仍能滿足您的 藉此評估公司的業務需求。

在 Compose 編寫的新畫面
圖 2. 在 Compose 編寫的新畫面

使用 Compose 在現有應用程式中建構新的畫面時， 在應用程式的架構限制下運作。如果使用 Fragment 和 Navigation 元件，您就必須建立新的片段 片段在 Compose 中具有其內容。

如要在 Fragment 中使用 Compose，請在 Fragment 中傳回 ComposeView 片段的 onCreateView() 生命週期方法。ComposeView具有 setContent() 方法，可讓您提供可組合函式。

class NewFeatureFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                NewFeatureScreen()
            }
        }
    }
}
MigrationStrategySnippets.kt

請參閱 Fragment 中的 ComposeView，即可瞭解詳情。

在現有畫面中新增功能

現有畫面搭配 Views 和 Compose
圖 3. 現有畫面搭配 Views 和 Compose

如果新功能，也可以在以 View 為基礎的現有畫面中使用 Compose 就是現有畫面的一部分方法是將 ComposeView 新增至 檢視區塊階層，和其他檢視區塊一樣。

舉例來說，假設您想在 LinearLayout 中新增子項檢視畫面，您可以這麼做 如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

  <androidx.compose.ui.platform.ComposeView
      android:id="@+id/compose_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
</LinearLayout>
migration_strategy_existing_screens.xml

加載檢視畫面後，可在稍後參照 ComposeView 並呼叫 setContent()

如要進一步瞭解 ComposeView，請參閱互通性 API。

建構常見 UI 元件的程式庫

使用 Compose 建構功能時，很快就會發現最終成果 建構元件庫建立常見 UI 元件的程式庫 針對應用程式中的這些元件，您可以透過單一資料來源 提升重複使用的可能性建構的功能隨後可能會依賴這個程式庫。這個 如果您是在 Google Cloud 內部建構自訂設計系統，這項功能就特別實用 撰寫

視應用程式的大小而定，這個程式庫可以是獨立的套件、模組 或程式庫模組如要進一步瞭解如何管理應用程式中的模組，請參閱 請參閱 Android 應用程式模組化指南。

用 Compose 取代現有功能

除了使用 Compose 建構新功能外， 遷移應用程式中的現有功能，以善用 Compose。

將應用程式限定為 Compose 後，不僅可以加快開發速度， 縮減應用程式的 APK 大小和建構時間請參閱比較 Compose 和 View 成效瞭解詳情。

簡易畫面

將現有功能遷移至 Compose 時，首先查看方法十分簡單 螢幕。簡單的畫面可以是歡迎畫面、確認畫面或 設定畫面，其中 UI 中顯示的資料相對靜態。

擷取下列 XML 檔案：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/title_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/title"
      android:textAppearance="?attr/textAppearanceHeadline2" />

  <TextView
      android:id="@+id/subtitle_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/subtitle"
      android:textAppearance="?attr/textAppearanceHeadline6" />

  <TextView
      android:id="@+id/body_text"
      android:layout_width="wrap_content"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:text="@string/body"
      android:textAppearance="?attr/textAppearanceBody1" />

  <Button
      android:id="@+id/confirm_button"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="@string/confirm"/>
</LinearLayout>
migration_strategy_xml_example.xml

XML 檔案可透過以下幾行程式碼在 Compose 中重新編寫：

@Composable
fun SimpleScreen() {
    Column(Modifier.fillMaxSize()) {
        Text(
            text = stringResource(R.string.title),
            style = MaterialTheme.typography.headlineMedium
        )
        Text(
            text = stringResource(R.string.subtitle),
            style = MaterialTheme.typography.headlineSmall
        )
        Text(
            text = stringResource(R.string.body),
            style = MaterialTheme.typography.bodyMedium
        )
        Spacer(modifier = Modifier.weight(1f))
        Button(onClick = { /* Handle click */ }, Modifier.fillMaxWidth()) {
            Text(text = stringResource(R.string.confirm))
        }
    }
}
MigrationStrategySnippets.kt

View 和 Compose 的混合畫面

已經包含一些 Compose 程式碼的畫面是另一個不錯的選擇 ，以便完全遷移至 Compose視畫面的複雜度而定 可以完全遷移至 Compose，也可以逐個遷移。如果 UI 階層結構子樹狀結構中使用 Compose 啟動的畫面，您將繼續 遷移 UI 元素，直到整個畫面都使用 Compose 為止。這種做法 也稱為由下而上的做法

將混合式 View 和 Compose UI 遷移至 Compose 的「由下而上」遷移方法
圖 4. 將混合式 View 畫面和 Compose UI 遷移至 Compose 的自下而上方法

移除 Fragment 和 Navigation 元件

移除所有標記後，即可遷移至 Navigation Compose 片段，並替換為對應的畫面層級可組合項。畫面層級 可組合項可包含混合的 Compose 和 View 內容，但 導覽目的地必須是可組合函式，才能啟用 Navigation Compose 在那之前，您可以繼續使用 在混合的 View 和 Compose 中，使用以片段為基礎的 Navigation 元件 程式碼集請參閱「將 Jetpack Navigation 遷移至 Navigation Compose」一文， 瞭解詳情

其他資源

歡迎參考下列其他資源，進一步瞭解如何遷移 以 View 為基礎的現有應用程式至 Compose：

後續步驟

現在您已瞭解遷移以 View 為基礎的現有策略後 歡迎探索互通性 API。