在视图中使用 Compose

您可以将基于 Compose 的 UI 添加到使用基于视图设计的现有应用中。

要创建一个全新的、完全基于 Compose 的屏幕，请让您的 activity 调用 setContent() 方法，并传入您喜欢的任何可组合函数。

class ExampleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent { // In here, we can call composables!
            MaterialTheme {
                Greeting(name = "compose")
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}InteroperabilityAPIsSnippets.kt

此代码与您在纯 Compose 应用中找到的代码相同。

适用于 `ComposeView` 的 `ViewCompositionStrategy`

ViewCompositionStrategy 定义了何时处置 Composition。默认情况下，ViewCompositionStrategy.Default 会在底层 ComposeView 从窗口分离时处置 Composition，除非它是 RecyclerView 等池化容器的一部分。在纯 Compose 的单 Activity 应用中，您会希望采用此默认行为；但是，如果您是在代码库中逐步添加 Compose，此行为可能会在某些场景中导致状态丢失。

要更改 ViewCompositionStrategy，请调用 setViewCompositionStrategy() 方法并提供不同的策略。

下表总结了您可以使用 ViewCompositionStrategy 的不同场景：

`ViewCompositionStrategy`	说明和互操作场景
`DisposeOnDetachedFromWindow`	当底层 `ComposeView` 从窗口分离时，Composition 将被处置。此策略已被 `DisposeOnDetachedFromWindowOrReleasedFromPool` 取代。互操作场景 * `ComposeView`，无论它是在视图层次结构中是唯一元素，还是在混合视图/Compose 屏幕（不在 Fragment 中）的上下文中。
`DisposeOnDetachedFromWindowOrReleasedFromPool` (默认)	类似于 `DisposeOnDetachedFromWindow`，当 Composition 不在池化容器（例如 `RecyclerView`）中时。如果它在池化容器中，则当池化容器本身从窗口分离，或当项目被丢弃（即池满）时，它将被处置。互操作场景 * `ComposeView`，无论它是在视图层次结构中是唯一元素，还是在混合视图/Compose 屏幕（不在 Fragment 中）的上下文中。 * 作为 `RecyclerView` 等池化容器中的项的 `ComposeView`。
`DisposeOnLifecycleDestroyed`	当提供的 `Lifecycle` 被销毁时，Composition 将被处置。互操作场景 * Fragment 的视图中的 `ComposeView`。
`DisposeOnViewTreeLifecycleDestroyed`	当视图所附加到的下一个窗口的 `ViewTreeLifecycleOwner.get` 返回的 `LifecycleOwner` 所拥有的 `Lifecycle` 被销毁时，Composition 将被处置。互操作场景 * Fragment 的视图中的 `ComposeView`。 * 在 Lifecycle 尚未确定的视图中的 `ComposeView`。

Fragment 中的 `ComposeView`

如果您想在 fragment 或现有视图布局中集成 Compose UI 内容，请使用 ComposeView 并调用其 setContent() 方法。ComposeView 是一个 Android View。

您可以将 ComposeView 像任何其他 View 一样放置在 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/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

在 Kotlin 源代码中，从 XML 中定义的布局资源膨胀布局。然后使用 XML ID 获取 ComposeView，设置最适合宿主 View 的 Composition 策略，并调用 setContent() 来使用 Compose。

class ExampleFragmentXml : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val view = inflater.inflate(R.layout.fragment_example, container, false)
        val composeView = view.findViewById<ComposeView>(R.id.compose_view)
        composeView.apply {
            // Dispose of the Composition when the view's LifecycleOwner
            // is destroyed
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                // In Compose world
                MaterialTheme {
                    Text("Hello Compose!")
                }
            }
        }
        return view
    }
}InteroperabilityAPIsSnippets.kt

另外，您也可以通过引用为您的 XML 布局文件生成的绑定类，使用视图绑定获取 ComposeView 的引用。

class ExampleFragment : Fragment() {

    private var _binding: FragmentExampleBinding? = null

    // This property is only valid between onCreateView and onDestroyView.
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _binding = FragmentExampleBinding.inflate(inflater, container, false)
        val view = binding.root
        binding.composeView.apply {
            // Dispose of the Composition when the view's LifecycleOwner
            // is destroyed
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                // In Compose world
                MaterialTheme {
                    Text("Hello Compose!")
                }
            }
        }
        return view
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}InteroperabilityAPIsSnippets.kt

Two slightly different text elements, one above the other

图 1. 此图显示了在视图 UI 层次结构中添加 Compose 元素的代码输出。“Hello Android!”文本由 TextView 微件显示。“Hello Compose!”文本由 Compose 文本元素显示。

如果您的全屏都是使用 Compose 构建的，您也可以直接在 fragment 中包含一个 ComposeView，这样您就可以完全避免使用 XML 布局文件。

class ExampleFragmentNoXml : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            // Dispose of the Composition when the view's LifecycleOwner
            // is destroyed
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                MaterialTheme {
                    // In Compose world
                    Text("Hello Compose!")
                }
            }
        }
    }
}InteroperabilityAPIsSnippets.kt

同一布局中的多个 `ComposeView` 实例

如果同一布局中有多个 ComposeView 元素，则每个元素都必须具有唯一的 ID，以便 savedInstanceState 正常工作。

class ExampleFragmentMultipleComposeView : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View = LinearLayout(requireContext()).apply {
        addView(
            ComposeView(requireContext()).apply {
                setViewCompositionStrategy(
                    ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
                )
                id = R.id.compose_view_x
                // ...
            }
        )
        addView(TextView(requireContext()))
        addView(
            ComposeView(requireContext()).apply {
                setViewCompositionStrategy(
                    ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
                )
                id = R.id.compose_view_y
                // ...
            }
        )
    }
}InteroperabilityAPIsSnippets.kt

ComposeView ID 在 res/values/ids.xml 文件中定义

<resources>
  <item name="compose_view_x" type="id" />
  <item name="compose_view_y" type="id" />
</resources>ids.xml

在布局编辑器中预览可组合项

您还可以在包含 ComposeView 的 XML 布局的布局编辑器中预览可组合项。这样做可以让您了解您的可组合项在混合视图和 Compose 布局中的外观。

假设您想在布局编辑器中显示以下可组合项。请注意，使用 @Preview 注解的可组合项是布局编辑器中预览的理想选择。

@Preview
@Composable
fun GreetingPreview() {
    Greeting(name = "Android")
}InteroperabilityAPIsSnippets.kt

要显示此可组合项，请使用 tools:composableName 工具属性，并将其值设置为要在布局中预览的可组合项的完全限定名称。

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

  <androidx.compose.ui.platform.ComposeView
      android:id="@+id/my_compose_view"
      tools:composableName="com.example.compose.snippets.interop.InteroperabilityAPIsSnippetsKt.GreetingPreview"
      android:layout_height="match_parent"
      android:layout_width="match_parent"/>

</LinearLayout>interop_layout_preview_composable.xml

Composable displayed within layout editor

后续步骤

现在您已经了解了在视图中使用 Compose 的互操作性 API，接下来学习如何在 Compose 中使用视图。

为您推荐

注意：当 JavaScript 关闭时，会显示链接文本
其他注意事项
迁移策略 {:#migration-strategy}
比较 Compose 和 View 性能

在视图中使用 Compose 使用收藏夹保持井井有条 根据您的偏好保存和分类内容。

适用于 ComposeView 的 ViewCompositionStrategy

Fragment 中的 ComposeView

同一布局中的多个 ComposeView 实例