Android Jetpack Compose 现有Java老项目集成使用compose开发

前言

有很多老的项目都没有使用Compose 布局；那么想进行项目重构就需要集成Compose开发能力；本文就是记录如何将一个普通Java工程集成Compose开发能力。

如果对你有用记得点赞哦！！！

什么是 Compose?

Compose 是 Jetpack Compose 的简称，它是一个用于构建 Android 用户界面的现代工具包。它使用声明式编程范式，允许开发者通过描述 UI 的外观和行为来创建界面，而不是像传统的 Android 开发那样通过命令式地操作视图。

在 Compose 中，UI 是由一系列函数构建的。这些函数组合在一起形成一个 UI 层次结构。例如，一个简单的文本显示可以通过Text函数来实现，如Text("Hello, World!")。这些函数返回可组合的对象，这些对象可以嵌套在其他可组合对象中。

当数据发生变化时，Compose 会自动重新计算和更新受影响的 UI 部分。它利用了 Kotlin 的特性，如协程和响应式编程模式，来高效地处理异步操作和数据更新。

传统布局 vs Jetpack Compose

传统布局

优点：

传统的 XML 布局已经存在多年，有大量的文档和社区支持。

大多数开发者对其非常熟悉，学习成本较低。

Android Studio 提供了强大的可视化布局编辑器，可以方便地拖放控件和预览布局。

传统的布局系统经过多年的优化，性能表现良好。

缺点：

需要手动创建和管理视图层次结构，代码冗长且容易出错。

更新 UI 需要手动调用各种方法，代码可读性和维护性较差。

状态管理和 UI 更新需要手动同步，容易导致状态不一致的问题。

传统的动画 API 相对繁琐，创建复杂的动画效果较为困难。

XML 布局文件不是类型安全的，容易出现资源 ID 错误等问题。

Jetpack Compose

优点：

代码更加简洁和易读，只需描述 UI 应该是什么样的。

自动处理 UI 的创建和更新，减少了错误。

UI 和状态紧密绑定，状态变化时自动重新绘制，提高了响应性和一致性。

可以轻松组合和嵌套 Compose 函数，创建复杂的 UI 结构。

代码复用性更高，维护性更好。

提供了丰富的动画 API，使得创建平滑的过渡效果变得简单。

Compose 函数是 Kotlin 代码，编译器可以检查类型错误，减少了运行时错误。

Android Studio 提供了专门的工具和预览功能，帮助开发者更高效地开发和调试 Compose UI。

缺点：

对于习惯传统布局的开发者来说，学习 Compose 需要一定的时间和精力。

文档和社区支持相对较新，不如传统布局丰富。

Compose 需要较新的 Android 版本和依赖库，可能不适用于所有设备和项目。

虽然 Compose 的性能在不断优化，但在某些情况下可能不如传统的布局系统成熟。

相比传统的布局系统，Compose 的第三方库和组件生态还在发展中。

开始集成Compose开发环境

1、根目录gradle文件添加：

复制代码

buildscript {

    repositories {
        gradlePluginPortal()
        mavenCentral()
        google()
        
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:7.4.2'
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.10") // 添加kotlin支持，Compose 必备的
    }
}

allprojects {
    repositories {
        mavenCentral()
        google()
    }
}

2、模块中gradle使用kotlin：

复制代码

plugins {
    id 'com.android.application'
    id("kotlin-android") // 模块使用kotlin支持
    id("kotlin-kapt")
}

3、然后再Android{} 中添加配置：

复制代码

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8

    }
    composeOptions {
        kotlinCompilerExtensionVersion = "1.4.3"
    }

    buildFeatures {
        viewBinding = true
        compose = true
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }

    lint {
        abortOnError = true
    }

4、然后gradle中引用这些库：

复制代码

    // compose plugin support
    implementation(platform("androidx.compose:compose-bom:2023.08.00"))

    implementation("androidx.compose.material:material:1.5.0")
    implementation("androidx.compose.foundation:foundation:1.5.0")
    implementation("androidx.compose.ui:ui:1.5.0")
    implementation("androidx.compose.runtime:runtime-rxjava2:1.5.0")
    implementation("androidx.compose.runtime:runtime-livedata:1.5.0")

    implementation("androidx.compose.ui:ui-tooling-preview:1.5.0")
    debugImplementation("androidx.compose.ui:ui-tooling:1.5.0")

    implementation("androidx.activity:activity-compose:1.8.0")
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")
    implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13")

5、如果出现jvmtarget版本版本不一致问题的话，使用下面代码添加到模块gradle中：

复制代码

// 模块中统一目标版本
tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile.class){
    kotlinOptions {
        jvmTarget = "1.8"
    }
}

这样不出意外就没有意外的集成完毕了！！！

简单使用Compose

java 复制代码

class EnterActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            EnterFont(font = "jason li hello")
        }
    }


    @Composable
    fun EnterFont(font: String) {
        Box(modifier = Modifier
            .fillMaxSize()
            .background(Color.Yellow), contentAlignment = Alignment.Center) {
            Text(
                text = font,
                color = Color.White,
                modifier = Modifier
                    .background(Color.Blue),
                textAlign = TextAlign.Center
            )
        }
    }

    companion object {
        private const val TAG = "EnterActivity"
    }
}

如果对你有用记得点赞哦！！！