遷移策略

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

如果您的應用程式使用的是以 View 為基礎的 UI,您可能不想一次性重寫整個 UI。這個頁面可協助您在現有的 UI 中增加新的 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 元件,且您要建構的功能納入整個畫面,則必須建立新的 Fragment,但其內容會顯示在 Compose 中。

如要在 Fragment 中使用 Compose,請在 Fragment 的 onCreateView() 生命週期方法中傳回 ComposeViewComposeViewsetContent() 方法可讓您提供可組合函式。

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.ComposeView
import androidx.fragment.app.Fragment

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

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

現有畫面

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

如果新功能會納入現有畫面,則可以將 ComposeView 新增至 UI 階層,就像任何其他 View 一樣。

舉例來說,假設您想要在 LinearLayout 中新增子項檢視畫面。您可以如下所示在 XML 中執行此操作:

<LinearLayout ...>

  <Button ... />

  <TextView ... />

  <androidx.compose.ui.platform.ComposeView
    android:id="@+id/compose_view" ... />

</LinearLayout>

加載檢視畫面後,稍後可以參照階層中的 ComposeView 並呼叫 setContent()

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

建構常見 UI 元件的程式庫

使用 Compose 建構功能時,很快就會發現最終會建構元件的程式庫。建立常見 UI 元件的程式庫,可讓您在應用程式中提供這些元件的單一可靠資料來源,並促進重複使用。建構的功能隨後可能會依賴這個程式庫。如要在 Compose 中建構自訂設計系統,這項技巧特別實用。

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

用 Compose 取代現有功能

除了使用 Compose 建構新功能外,您還需要逐步遷移應用程式中的現有功能,以充分利用 Compose 的優勢。

將應用程式限定為 Compose 後,即可加速開發,還能縮短應用程式的 APK 大小和建構時間。詳情請參閱 Compose 中的開發人員人體工學一文。

簡易畫面

將現有功能遷移至 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>

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

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

混合式 View 畫面和 Compose 畫面

已經包含一些 Compose 程式碼的畫面是完全遷移至 Compose 的另一個好的選擇。視畫面的複雜度而定,您可以將其完全遷移至 Compose,也可以逐個遷移。如果畫面以 UI 階層子樹狀結構中的 Compose 開頭,則可以繼續遷移 UI 元素,直至整個畫面在 Compose 中。此方法又稱為自下而上的做法。

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

移除 Fragments 和 Navigation 元件

應用程式中所有的 UI 都採用 Compose 後,在應用程式中使用 Fragment 並沒有什麼好處。達到這個階段後,您就可以完全移除 Fragment,並將其取代為 Navigation Compose 驅動的畫面層級可組合項。

詳情請參閱「Navigating 搭配 Compose」。

後續步驟

如要深入瞭解如何在應用程式中新增 Compose,請參閱將 Jetpack Compose 新增至應用程式。您還可以查看下列資源: