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
         )
    )
}
相关推荐
诸神黄昏EX6 小时前
Android Build系列专题【篇四:编译相关语法】
android
雨白8 小时前
优雅地处理协程:取消机制深度剖析
android·kotlin
leon_zeng08 小时前
更改 Android 应用 ID (ApplicationId) 后遭遇记
android·发布
ss27310 小时前
手写Spring第4弹: Spring框架进化论:15年技术变迁:从XML配置到响应式编程的演进之路
xml·java·开发语言·后端·spring
2501_9160074710 小时前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
Jeled12 小时前
Retrofit 与 OkHttp 全面解析与实战使用(含封装示例)
android·okhttp·android studio·retrofit
ii_best14 小时前
IOS/ 安卓开发工具按键精灵Sys.GetAppList 函数使用指南:轻松获取设备已安装 APP 列表
android·开发语言·ios·编辑器
2501_9159090614 小时前
iOS 26 文件管理实战,多工具组合下的 App 数据访问与系统日志调试方案
android·ios·小程序·https·uni-app·iphone·webview
limingade16 小时前
手机转SIP-手机做中继网关-落地线路对接软交换呼叫中心
android·智能手机·手机转sip·手机做sip中继网关·sip中继
RainbowC016 小时前
GapBuffer高效标记管理算法
android·算法