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 {...}} 块中,如下所示:

Kotlin 复制代码
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        jcenter()
    }
}

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

Kotlin 复制代码
plugins {
    id 'com.android.application' version '7.3.1' apply false
    id 'com.android.library' version '7.3.1' apply false
    id 'org.jetbrains.kotlin.android' version '1.7.20' apply false
}

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

Kotlin 复制代码
android {

//....


    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.3.2"
    }
}

然后,您可以在模块的 build.gradle 文件中添加 Jetpack 组件(例如 LiveDataViewModel 等架构组件),如下所示:

Kotlin 复制代码
    def composeBom = platform('androidx.compose:compose-bom:2024.03.00')
    implementation composeBom
    androidTestImplementation composeBom

    // Choose one of the following:
    // Material Design 3
    implementation 'androidx.compose.material3:material3'
    // or Material Design 2
    implementation 'androidx.compose.material:material'
    // or skip Material Design and build directly on top of foundational components
    implementation 'androidx.compose.foundation:foundation'
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation 'androidx.compose.ui:ui'

    // Android Studio Preview support
    implementation 'androidx.compose.ui:ui-tooling-preview'
    debugImplementation 'androidx.compose.ui:ui-tooling'

    // UI Tests
    androidTestImplementation '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 icons
    implementation 'androidx.compose.material:material-icons-extended'
    // Optional - Add window size utils
    implementation 'androidx.compose.material3:material3-window-size-class'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.8.2'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'
    // Optional - Integration with LiveData
    implementation 'androidx.compose.runtime:runtime-livedata'
    // Optional - Integration with RxJava
    implementation 'androidx.compose.runtime:runtime-rxjava2'

三、 在xml 使用compose

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

XML 复制代码
//AppCompatTextView 为改造前的布局
    <!--<androidx.appcompat.widget.AppCompatTextView
        android: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.ComposeView
        android:id="@+id/compose_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="parent />

在Kotlin 代码中修改如下:

Kotlin 复制代码
var composeView: ComposeView
var textString:String = ""

// ... 插入其他代码
composeView = findViewById(R.id.compose_view)
composeView.setContent {
    MarkdownText(
        markdown = textString,
        style = TextStyle(
            fontSize = 16.sp
         )
    )
}
相关推荐
黄林晴17 小时前
如何判断手机是否是纯血鸿蒙系统
android
火柴就是我17 小时前
flutter 之真手势冲突处理
android·flutter
法的空间18 小时前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
循环不息优化不止18 小时前
深入解析安卓 Handle 机制
android
恋猫de小郭18 小时前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
jctech18 小时前
这才是2025年的插件化!ComboLite 2.0:为Compose开发者带来极致“爽”感
android·开源
用户20187928316718 小时前
为何Handler的postDelayed不适合精准定时任务?
android
叽哥18 小时前
Kotlin学习第 8 课:Kotlin 进阶特性:简化代码与提升效率
android·java·kotlin
Cui晨18 小时前
Android RecyclerView展示List<View> Adapter的数据源使用View
android
氦客18 小时前
Android Doze低电耗休眠模式 与 WorkManager
android·suspend·休眠模式·workmanager·doze·低功耗模式·state_doze