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
         )
    )
}
相关推荐
数据猎手小k1 小时前
AndroidLab:一个系统化的Android代理框架,包含操作环境和可复现的基准测试,支持大型语言模型和多模态模型。
android·人工智能·机器学习·语言模型
你的小102 小时前
JavaWeb项目-----博客系统
android
风和先行2 小时前
adb 命令查看设备存储占用情况
android·adb
AaVictory.3 小时前
Android 开发 Java中 list实现 按照时间格式 yyyy-MM-dd HH:mm 顺序
android·java·list
似霰4 小时前
安卓智能指针sp、wp、RefBase浅析
android·c++·binder
大风起兮云飞扬丶4 小时前
Android——网络请求
android
干一行,爱一行4 小时前
android camera data -> surface 显示
android
断墨先生4 小时前
uniapp—android原生插件开发(3Android真机调试)
android·uni-app
无极程序员6 小时前
PHP常量
android·ide·android studio
萌面小侠Plus7 小时前
Android笔记(三十三):封装设备性能级别判断工具——低端机还是高端机
android·性能优化·kotlin·工具类·低端机