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 版本
- 打开 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 对应的编译扩展版本
// 1.0.5 也是对应的 Compose 引用库的版本，可以存成一个常量统一调用
kotlinCompilerExtensionVersion '1.0.5'
}
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.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 预览
- Compose 支持预览需要引入
implementation 'androidx.compose.ui:ui-tooling:1.0.5'库，上方已经引入过。 - 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()
}
}
- 目前预览还不支持类似 XML 自动更新的功能，需要更新时点击右侧的刷新按钮。
- 点击左侧的运行按钮可以讲次预览的界面单独运行在手机上，对于大型项目构建耗时是个很方便的功能。
创建新的 Android Compose 项目
Android Studio -> File -> New -> New Project 选择 Compose Activity
网友评论