Android现有工程使用Compose

概述给现有的Android应用工程中引入Compose。需要对gradle进行设置。引入后使用Compose验证一下。 AndroID现有工程使用Compose

看了Compose的示例工程后，我们也想使用Compose。基于目前情况，在现有工程基础上添加Compose功能。

引入Compose

首先我们安装 AndroID Studio Arctic Fox 或更高版本。

项目的配置gradle/wrapper/gradle-wrapper.propertIEs

distributionUrl=https\://services.gradle.org/distributions/gradle-7.1.1-bin.zip

项目的gradle

buildscript {    ext.kotlin_version = '1.5.21'    repositorIEs {        Google()        mavenCentral()    }    dependencIEs {        classpath 'com.androID.tools.build:gradle:7.0.3'        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"    }}allprojects {    repositorIEs {        Google()        mavenCentral()    }}

使用7.0.3 AndroID Gradle 插件。kotlin版本1.5.31

模块的gradle。最低API级别设置为21或更高，启用 Jetpack Compose。另外还要设置 Kotlin 编译器插件的版本。

apply plugin: 'kotlin-androID' // 沿用开头的设置androID {    compileSdkVersion 30    buildToolsversion "30.0.2"        defaultConfig {        minSdkVersion 21        // ...    }    buildFeatures {        // 启用 Jetpack Compose        compose true    }    kotlinoptions {        jvmTarget = "1.8"    }    compileOptions {        sourceCompatibility JavaVersion.VERSION_1_8        targetCompatibility JavaVersion.VERSION_1_8    }    compoSEOptions {        kotlinCompilerExtensionVersion '1.0.1'    }}

依赖

    // Integration with activitIEs    implementation 'androIDx.activity:activity-compose:1.3.1'    // Compose Material Design    implementation 'androIDx.compose.material:material:1.0.1'    // Animations    implementation 'androIDx.compose.animation:animation:1.0.1'    // Tooling support (PrevIEws,etc.)    implementation 'androIDx.compose.ui:ui-tooling:1.0.1'    // Integration with viewmodels    implementation 'androIDx.lifecycle:lifecycle-viewmodel-compose:1.0.0-Alpha07'    // UI Tests    androIDTestImplementation 'androIDx.compose.ui:ui-test-junit4:1.0.1'

as的 Build. Execution,Deployment - Build Tools - Gradle - Gradle JDk 选择as自带的Jre11

使用Compose新Activity

前面的gradle设置完毕，新建一个activity来试一下。

// ComposeGuIDeAct.ktimport androID.os.Bundleimport androIDx.activity.compose.setContentimport androIDx.appcompat.app.AppCompatActivityimport androIDx.compose.foundation.layout.Columnimport androIDx.compose.material.Textimport androIDx.compose.runtime.Composableimport androIDx.compose.ui.graphics.colorimport androIDx.compose.ui.tooling.prevIEw.PrevIEwclass ComposeGuIDeAct : AppCompatActivity() {    overrIDe fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContent {            GuIDePage()        }    }}@Composableprivate fun GuIDePage() {    Column {        Text(text = "Compose 示例",color = color.Yellow)        Text(text = "an.rustfisher.com",color = color.Yellow)        ShowHello(name = "小明")        ShowHello(name = "小强")    }}@Composableprivate fun ShowHello(name: String) {    Text(text = "Hi $name",color = color.Cyan)}

onCreate中使用setContent，传入一个带有@Composable注解的可组合函数GuIDePage()。
而GuIDePage()里面又使用了ShowHello、Column和Text。它们都是可组合函数。

对于GuIDePage()和ShowHello函数，需要注意：

它们带有@Composable注解。所有的可组合函数都必须带有此注解。它能告诉Compose编译器，把这数据转换为界面可组合函数可以接受一些参数，这些参数可进行逻辑处理。上面代码里，ShowHello(name: String)接受一个 name:String函数可以在界面中显示文本。调用 Text() 可组合函数，该函数实际上会创建文本界面元素。可组合函数通过调用其他可组合函数来发出界面层次结构函数不会返回任何内容。发出界面的 Compose 函数不需要返回任何内容，因为它们描述所需的屏幕状态，而不是构造界面微件。

别忘了在manifest里注册这个activity。运行起来可以看到效果。
至此我们可以说现有项目已经引入了Compose。

添加预览

可以给Compose添加预览，使用注解@PrevIEw

在上面的基础上，添加预览设置

@PrevIEw("guIDe")@PrevIEw("guIDe - big",FontScale = 1.2f)@Composablefun PrevIEwPost() {    GuIDePage()}

添加2个预览，分别起名“guIDe”和“guIDe - big”。后者把字体调大一点。

PrevIEwPost()方法里使用了我们之前定义的GuIDePage()。GuIDePage()也是实际工作中的代码。

需要预览的方法，也需要添加@Composable注解

AndroID Studio 预览效果

@H_502_131@

预览界面也可以直接运行到手机上

小结

要在现有工程中引入Compose，需要对gradle进行设置。对老旧工程来说，变动比较大。甚至某些代码也要跟着改。

可组合函数使用@Composable注解。可以用as直接预览。

参考Jetpack Compose 教程 - Google将 Jetpack Compose 添加到应用中 - Google引入 Jetpack Compose 示例工程 总结

以上是内存溢出为你收集整理的Android现有工程使用Compose全部内容，希望文章能够帮你解决Android现有工程使用Compose所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。