Compose 是 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.7.0（目前 Compose 最新稳定版本适配的 Kotlin 版本，后续随着 Compose 的版本增加，Kotlin 版本也会增加）
Compose：1.1.1（目前最新稳定版本），版本地址：developer.android.com/jetpack/and…
需要引用的库下面详细介绍。

集成到现有项目中

升级对应的 Gradle 版本

打开 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` 文件

文件最上方引入 Kotlin 插件：

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

增加 Compose 支持:

android {

    buildFeatures {
        //开启 Compose 支持
        compose true 
    }
    
    composeOptions {
        // Compose 是 Kotlin 开发的，需要配置 Kotlin 对应的编译扩展版本
        kotlinCompilerExtensionVersion '1.2.0'
    }

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

引入 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.1.1'
    // Compose 库的主体包，具体在上面介绍
    implementation 'androidx.compose.material:material:1.1.1'
    // 将 Activity 支持 Compose
    implementation 'androidx.activity:activity-compose:1.5.0'
}

官方版本：

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

测试 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 预览

Compose 支持预览需要引入 implementation 'androidx.compose.ui:ui-tooling:1.1.1' 库，上方已经引入过。
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()
    }
}