Android JetPack ComPose 开发之路 ——

ComePose 是 JetPack 推出的 Android 及其他平台的全新 UI 框架，抛弃 Android XML 的编写方式，以声明式方法开发，下面介绍将 Compose 集成到现有项目中。

Compose 官方地址https://developer.android.com/jetpack/compose/documentation

集成 ComPose 需要的相关版本配置

• IDE：Android Studio Arctic Fox 版本，官方地址： developer.android.com/studio ，下载最新的就是。
• Gradle：7.0 +
• TargetSdk / CompileSdk：31 +
• MinSdk：21 +
• Kotlin：1.5.31（目前 Compose 最新稳定版本适配的 Kotlin 版本，后续随着 ComPose 的版本增加，Kotlin 版本也会增加）
• Compose：1.0.5（目前最新稳定版本），版本地址：developer.android.com/jetpack/and…

需要引用的库下面详细介绍。

集成到现有项目中

升级对应的 Gradle 版本

1. 打开 Project 下的 build.gradle 文件配置插件版本：

buildscript {
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        // Gradle 版本 7.0 +
        classpath "com.android.tools.build:gradle:7.0.4"
        // Kotlin 版本（对应 compose 的版本）
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.31"
    }
}

配置 Module 下的 build.gradle 文件

1. 文件最上方引入 Kotlin 插件：

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'kotlin-android-extensions'
    id 'kotlin-kapt'
}

2. 增加 Compose 支持:

android {

    buildFeatures {
    //开启 Compose 支持
        compose true 
    }
    
    composeOptions {
    // Compose 是 Kotlin 开发的，需要配置 Kotlin 对应的编译扩展版本
    // 1.0.5 也是对应的 Compose 引用库的版本，可以存成一个常量统一调用
        kotlinCompilerExtensionVersion '1.0.5'
    }

     kotlinOptions {
     // 构建指定 jvm 版本
        jvmTarget = "1.8"
    }
}

3. 引入 ComPose 库

首先介绍 Compose 的分包，了解后根据项目需求引入对应的库。
结构从下到上排序，最上边是最底层库：

• compile：编译器插件
• runtime：底层概念模型
• ui：ui 相关的基础支持
• animation：基于 rutime 和 ui 两层的动画 API 基础支持
• foundation：基于 ui 层封装的更实用的组件库比如 Scroll、Box 等
• material/ material3：Material2 / 3 的实现

平时开发直接引用 material 库即可，它将包含上面的所有库。
项目中不需要 material 设计，可引用 foundation 库，它将包含基础的 UI 配置。

精简版：

dependencies {
    // 将 Compose 支持预览，类似 XML 的预览模式，并支持 点击、滑动等 XML 不支持的交互操作
    implementation 'androidx.compose.ui:ui-tooling:1.0.5'
    // Compose 库的主体包，具体在上面介绍
    implementation 'androidx.compose.material:material:1.0.5'
    // 将 Activity 支持 Compose
    implementation 'androidx.activity:activity-compose:1.4.0'
}

官方版本：

dependencies {
    // Compose ui 相关的基础支持
    implementation 'androidx.compose.ui:ui:1.0.5'
    // Compose ui 预览
    implementation 'androidx.compose.ui:ui-tooling:1.0.5'
    // Compose 基于 ui 层封装的更实用的组件库比如 Scroll、Box 等
    implementation 'androidx.compose.foundation:foundation:1.0.5'
    // Compose Material Design
    implementation 'androidx.compose.material:material:1.0.5'
    // Compose Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.0.5'
    implementation 'androidx.compose.material:material-icons-extended:1.0.5'
    // 将 Activity 支持 Compose
    implementation 'androidx.activity:activity-compose:1.3.1'
    // Compose ViewModels 存储数据
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07'
    // Compose 其他集成
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.5'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.5'
    // Compose UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.5'
}

测试 Compose 是否配置成功

新建 Activity 重写 onCreate 方法，将 setContentView(R.layout.activity_main) 替换为 setContent{}，Compose 不再写 XML 了。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // 对应 XML 的 TextView
            Text("Hello Compose!")
        }
    }
}

运行下项目看看是否可以顺利展示，遇到问题的小伙伴欢迎留言一起解决问题。

Compose 预览

1. Compose 支持预览需要引入 implementation 'androidx.compose.ui:ui-tooling:1.0.5' 库，上方已经引入过。
2. Compose 预览需要带 @Preview 注解的函数来预览 View，在代码中输入 prev 会有提示直接生成预览代码（Android Studio 自带的代码模版）

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setContent {
            HelloView()
        }
    }
    
    // @Composable 注解代表一个 Compose View
    @Composable
    fun HelloView() {
        Text("Hello Compose!")
    }
    
    //预览
    @Preview
    @Composable
    fun ComposePreView() {
        HelloView()
    }
}

1. 目前预览还不支持类似 XML 自动更新的功能，需要更新时点击右侧的刷新按钮。
2. 点击左侧的运行按钮可以讲次预览的界面单独运行在手机上，对于大型项目构建耗时是个很方便的功能。

创建新的 Android Compose 项目

Android Studio -> File -> New -> New Project 选择 Compose Activity