最近在项目开发的过程中需要用到 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 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 依赖
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 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文章来源:https://www.toymoban.com/news/detail-846662.html
//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 代码中修改如下:文章来源地址https://www.toymoban.com/news/detail-846662.html
var composeView: ComposeView
var textString:String = ""
// ... 插入其他代码
composeView = findViewById(R.id.compose_view)
composeView.setContent {
MarkdownText(
markdown = textString,
style = TextStyle(
fontSize = 16.sp
)
)
}
到了这里,关于Android 在xml 布局中如何嵌套 Jetpack Compose的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!