Android 在xml 布局中如何嵌套 Jetpack Compose

最近在项目开发的过程中需要用到 Jetpack Compose，之前没有接触过Compose，所以项目一直没有用到Compose。通过查看官网发现Compose上手比较快，但是准备比较复杂的布局要转换成Compose 不是一件容易的事情。那有没有可能只是对成熟的项目中的xml 布局中的某一部分进行改造，让其能够在xml 布局中也能使用Compose？通过查阅网上相关资料发现并非难事。于是就动手开始改造了。

一、添加kotlin

Jetpack Compose 必须使用kotlin 语言进行开发，在现有的项目中如果是使用的Java开发，需要首先添加kotlin环境，然后将相关的代码转换成kotlin.由于我的项目中已经有kotlin环境，无需再适配kotlin环境，只需将相关部分的Java 代码通过AndroidStudio的代码转换工具转换成kotlin 即可。如果不熟悉现有项目转换成kotlin 环境的可以在网上查阅相关资料.

二、在应用中使用 Jetpack 库

所有 Jetpack 组件都可在 Google Maven 代码库中找到。

打开 settings.gradle 文件，将 google() 代码库添加到 dependencyResolutionManagement { repositories {...}} 块中，如下所示：

dependencyResolutionManagement {repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)repositories {google()jcenter()}
}

在项目的根目录下build.gradle 添加kotlin 

plugins {id 'com.android.application' version '7.3.1' apply falseid 'com.android.library' version '7.3.1' apply falseid 'org.jetbrains.kotlin.android' version '1.7.20' apply false
}

在模块的 build.gradle 文件中添加 Jetpack 依赖

android {//....buildFeatures {compose = true}composeOptions {kotlinCompilerExtensionVersion = "1.3.2"}
}

然后，您可以在模块的 build.gradle 文件中添加 Jetpack 组件（例如 LiveData 和 ViewModel 等架构组件），如下所示：

    def composeBom = platform('androidx.compose:compose-bom:2024.03.00')implementation composeBomandroidTestImplementation composeBom// Choose one of the following:// Material Design 3implementation 'androidx.compose.material3:material3'// or Material Design 2implementation 'androidx.compose.material:material'// or skip Material Design and build directly on top of foundational componentsimplementation 'androidx.compose.foundation:foundation'// or only import the main APIs for the underlying toolkit systems,// such as input and measurement/layoutimplementation 'androidx.compose.ui:ui'// Android Studio Preview supportimplementation 'androidx.compose.ui:ui-tooling-preview'debugImplementation 'androidx.compose.ui:ui-tooling'// UI TestsandroidTestImplementation 'androidx.compose.ui:ui-test-junit4'debugImplementation 'androidx.compose.ui:ui-test-manifest'// Optional - Included automatically by material, only add when you need// the icons but not the material library (e.g. when using Material3 or a// custom design system based on Foundation)implementation 'androidx.compose.material:material-icons-core'// Optional - Add full set of material iconsimplementation 'androidx.compose.material:material-icons-extended'// Optional - Add window size utilsimplementation 'androidx.compose.material3:material3-window-size-class'// Optional - Integration with activitiesimplementation 'androidx.activity:activity-compose:1.8.2'// Optional - Integration with ViewModelsimplementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'// Optional - Integration with LiveDataimplementation 'androidx.compose.runtime:runtime-livedata'// Optional - Integration with RxJavaimplementation 'androidx.compose.runtime:runtime-rxjava2'

三、 在xml 使用compose 

在xml布局找到需要替换的元素，例如需要将TextView 替换成ComposeView

//AppCompatTextView 为改造前的布局<!--<androidx.appcompat.widget.AppCompatTextViewandroid:id="@+id/tv_message"android:layout_width="match_parent"android:layout_height="wrap_content"android:textSize="16sp"android:layout_marginTop="8dp"app:layout_constraintBottom_toBottomOf="parent" />-->
//替换后的布局<androidx.compose.ui.platform.ComposeViewandroid:id="@+id/compose_view"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="8dp"app:layout_constraintTop_toBottomOf="parent />

在Kotlin 代码中修改如下：

var composeView: ComposeView
var textString:String = ""// ... 插入其他代码
composeView = findViewById(R.id.compose_view)
composeView.setContent {MarkdownText(markdown = textString,style = TextStyle(fontSize = 16.sp))
}