将 Jetpack Compose 添加到应用中

如果您想要在现有项目中使用 Jetpack Compose，则需要为项目配置所需的设置和依赖项。

设置您的开发环境

安装合适的 Android Studio 版本

为了在使用 Jetpack Compose 进行开发时获得最佳体验，您应下载 Android Studio，并配置与 Android Studio 版本对应的 Android Gradle 插件：

buildscript {
    ...
    dependencies {
        classpath "com.android.tools.build:gradle:7.0.0"
        ...
    }
}

配置 Kotlin

确保您在项目中使用的是 Kotlin 1.6.10：

plugins {
    id 'kotlin-android'
}

配置 Gradle

您需要将应用的最低 API 级别设置为 21 或更高级别，并在应用的 build.gradle 文件中启用 Jetpack Compose，如下所示。另外还要设置 Kotlin 编译器插件的版本。

android {
    defaultConfig {
        ...
        minSdkVersion 21
    }

    buildFeatures {
        // Enables Jetpack Compose for this module
        compose true
    }
    ...

    // Set both the Java and Kotlin compilers to target Java 8.
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = "1.8"
    }

    composeOptions {
        kotlinCompilerExtensionVersion '1.1.1'
    }
}

添加 Jetpack Compose 工具包依赖项

在应用的 build.gradle 文件中添加 Jetpack Compose 工具包依赖项，如下所示：

dependencies {
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.4.0'
    // Compose Material Design
    implementation 'androidx.compose.material:material:1.1.1'
    // Animations
    implementation 'androidx.compose.animation:animation:1.1.1'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.1.1'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1'
    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.1.1'
}

警告：请留意 Compose 所需的传递依赖项，因为这可能会破坏您的应用中使用的一些依赖项。例如，使用 activity-compose 依赖项时，androidx.activity 也必须位于 1.3.0 版中。

在 Compose 中重复使用视图主题

如果您刚刚将 Compose 添加到项目中，则可能需要 Compose 继承 View 系统中可用的主题，而不是从头开始在 Compose 中重新编写自己的 Material 主题。

如果您在 Android 应用中使用 MDC 库，则可借助 MDC Compose 主题适配器库，在可组合项中轻松地重复使用基于 View 的现有主题的颜色、排版和形状主题。这可通过 MdcTheme API 来实现。

如果您改为使用 AppCompat XML 主题，请使用包含 AppCompatTheme API 的 AppCompat Compose 主题适配器。

在应用的 build.gradle 文件中添加所需的依赖项，如下所示：

dependencies {
    // When using a MDC theme
    implementation "com.google.android.material:compose-theme-adapter:1.1.1"

    // When using a AppCompat theme
    implementation "com.google.accompanist:accompanist-appcompat-theme:0.16.0"
}

开始迁移到 Compose

假设我们要在应用中将用户问候文本迁移到 Jetpack Compose。我们可以在 XML 布局中添加以下内容：

<...>
    <!-- Other content -->

    <TextView
        android:id="@+id/greeting"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/margin_small"
        android:layout_marginEnd="@dimen/margin_small"
        android:gravity="center_horizontal"
        android:text="@string/greeting"
        android:textAppearance="?attr/textAppearanceHeadline5"
        ... />
</...>

为了将其迁移到 Compose，我们可以将 TextView 替换为保留了相同布局参数和 id 的 ComposeView。所有其他 XML 属性都将迁移到 Compose：

<...>
    <!-- Other content -->

    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/greeting"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</...>

然后，在使用了该 XML 布局的 Activity 或 Fragment 中，我们可以获取 ComposeView，并调用 setContent 方法，以向其中添加 Compose 内容：

class MyActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // ...

        val greeting = findViewById<ComposeView>(R.id.greeting)
        greeting.setContent {
            MdcTheme { // or AppCompatTheme
                Greeting()
            }
        }
    }
}

@Composable
private fun Greeting() {
    Text(
        text = stringResource(R.string.greeting),
        style = MaterialTheme.typography.h5,
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = dimensionResource(R.dimen.margin_small))
            .wrapContentWidth(Alignment.CenterHorizontally)
    )
}

如需详细了解 ComposeView 和其他 Interoperability API，请参阅 Interoperability API 指南。如需详细了解 Compose 中的 stringResource、dimensionResource 和其他资源 API，请查看“Compose 中的资源”指南。

测试混合界面

将应用的某些部分迁移到 Compose 后，若要确保您没有破坏任何内容，测试至关重要。

当 activity 或 fragment 使用 Compose 时，您无需使用 ActivityScenarioRule，而应该使用 createAndroidComposeRule，它会将 ActivityScenarioRule 与 ComposeTestRule 集成，让您可以同时测试 Compose 和 View 代码。

class MyActivityTest {
    @Rule
    @JvmField
    val composeTestRule = createAndroidComposeRule<MyActivity>()

    @Test
    fun testGreeting() {
        val greeting = InstrumentationRegistry.getInstrumentation()
            .targetContext.resources.getString(R.string.greeting)

        composeTestRule.onNodeWithText(greeting).assertIsDisplayed()
    }
}

请参阅“测试 Compose 布局”指南，详细了解测试以及与 Espresso 的互操作性。

导航

如果您在应用中使用了导航组件，请查看“使用 Compose 进行导航”指南中的“互操作性”部分。

后续步骤

如需详细了解 Compose，请参阅文档索引。在应用中采用 Compose 的方法有很多种，如需详细了解这方面的内容，请参阅“在应用中采用 Compose”指南，其中还链接到在现有架构中集成 Compose 和在现有界面中集成 Compose 等其他指南。