迁移策略

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

如果您的应用界面是基于 View 系统,您可能不想一次全部重写整个界面。本页将帮助您向现有界面中添加新的 Compose 元素。

Jetpack Compose 从设计之初就考虑到了 View 互操作性。此功能意味着,您可以将现有的基于 View 的应用迁移到 Compose,同时仍然能够构建新功能。如需迁移到 Compose,我们建议您执行增量迁移(Compose 和 View 在代码库中共存),直到应用完全迁移至 Compose 为止。

基于 View 的应用迁移到 Compose 的阶段
图 1. 基于 View 的应用迁移到 Compose 的阶段

如需将应用迁移到 Compose,请按以下步骤操作:

  1. 使用 Compose 构建新功能。
  2. 在构建功能时,确定可重复使用的元素,并开始创建常见界面组件库。
  3. 一次替换一个界面的现有功能。

使用 Compose 构建新功能

使用 Compose 构建新功能是提高 Compose 采用率的最佳方式。借助此策略,您可以添加功能并利用 Compose 的优势,同时仍满足公司的业务需求。

新界面

使用 Compose 编写的新界面
图 2. 使用 Compose 编写的新界面

使用 Compose 在现有应用中构建新功能时,您仍面临应用架构的限制。如果您使用的是 fragment 和 Navigation 组件,并且正在构建的功能涵盖整个界面,那么您必须创建新的 fragment,但其内容位于 Compose 中。

如需在 fragment 中使用 Compose,请在 fragment 的 onCreateView() 生命周期方法中返回 ComposeViewComposeView 具有 setContent() 方法,您可以在该方法中提供一个可组合函数。

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

现有界面

混合了 View 和 Compose 的现有界面
图 3. 混合了 View 和 Compose 的现有界面

如果新功能将纳入现有界面中,您可以向界面层次结构添加 ComposeView,就像添加任何其他 View 一样。

例如,假设您想向 LinearLayout 添加子视图。您可以在 XML 中执行此操作,如下所示:

<LinearLayout ...>

  <Button ... />

  <TextView ... />

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

</LinearLayout>

该视图经过扩充后,您可以稍后引用层次结构中的 ComposeView 并调用 setContent()

如需详细了解 ComposeView,请参阅 Interoperability API

构建常见界面组件库

使用 Compose 构建功能时,您很快就会意识到,您最终会构建组件库。通过创建常见界面组件库,您可以在应用中为这些组件提供单一可信来源,并提高可重用性。您构建的功能随后可以依赖于这个库。如果您要在 Compose 中构建自定义设计系统,此方法会特别有用。

此库可以是单独的软件包、模块或库模块,具体取决于应用的大小。如需详细了解如何整理应用中的各个模块,请参阅 Android 应用模块化指南

使用 Compose 替换现有功能

除了使用 Compose 构建新功能之外,您还需要逐步迁移应用中的现有功能,以便利用 Compose。

将应用设置为只含 Compose 元素可以加快开发速度,还可以缩减应用的 APK 大小和构建时间。如需了解详情,请参阅 Compose 中的开发者工效学设计

简单的屏幕

将现有功能迁移到 Compose 时,应首先查看简单的屏幕。简单的界面可以是欢迎界面、确认界面或设置界面,这些界面中显示的数据是相对静态的。

接受以下 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 中用几行代码重新编写 XML 文件:

@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))
        }
    }
}

混合视图和 Compose 界面

已包含少量 Compose 代码的界面非常适合完全迁移到 Compose。根据界面的复杂性,您可以将其完全迁移到 Compose,也可以逐段迁移。如果界面最初包含以界面层次结构的子树状显示的 Compose,您需继续迁移界面元素,直到整个界面都显示在 Compose 中。此方法也称为“自下而上”方法。

采用自下而上的方法将混合视图和 Compose UI 迁移到 Compose
图 4. 采用自下而上的方法将混合视图和 Compose UI 迁移到 Compose

移除 fragment 和 Navigation 组件

应用中的所有界面元素都位于 Compose 后,在应用中使用 fragment 几乎没有什么好处。此时,您可以完全移除 fragment,而将其替换为由 Navigation Compose 驱动的界面级可组合项。

如需了解详情,请参阅使用 Compose 进行导航

后续步骤

如果您想直接将 Compose 添加到应用中,请参阅将 Jetpack Compose 添加到应用中。您还可以查看以下资源: