Android Jetpak Compose快速上手

Compose 介绍
Jetpack Compose发布也快有一年的时间了，虽然目前仍是DEV阶段，但是距离可用已经不远了。Compose库是用响应式编程的方式对View进行构建,可以用更少更直观的代码，更强大的功能，能提高开发速度（可以参考几乎一模一样的Flutter，开发速度确实很快）。

Jetpack Compose对于没有接触过声明式UI的小伙伴可能会学习曲线有点陡峭，对于已经能熟练开发Flutter应用的小伙白来说几乎没有难度。（Compose就是参考flutter的模式开发的，代码中还可以看到Flutter的相关注释）

这篇文章不回去解释过多的原理与技巧，只要是让你能够快速上手开发项目。

Compose 如何使用
因为目前（2020年09月27日）Compose仍处于开发阶段，所以需要使用最新 Canary 版的 Android Studio 预览版。

可以选择直接创建Empty Compose Activity来创建一个全新的Compose应用，或者可以选手动修改gradle的方式来创建Compose应用

修改Gradle
在模块的build.gradle文件中新增：

android {
…

kotlinOptions {
    jvmTarget = '1.8'
    useIR = true
}
buildFeatures {
    compose true
}
composeOptions {
    kotlinCompilerExtensionVersion compose_version
    kotlinCompilerVersion '1.4.0'
}

}

复制代码
dependencies中新增：

implementation “androidx.compose.ui:ui:$compos{e}_{v}ersion"implementation"androidx.compose.material:material:$compose_version”
implementation “androidx.ui:ui-tooling:$compose_version”
复制代码
目前最新的Compose版本是1.0.0-alpha03 使用Compose最低的buildTools版本要求为29

使用
@Compose
所有关于构建View的方法都必须添加@Compose的注解才可以。并且@Compose跟协程的Suspend的使用方法比较类似,被@Compose的注解的方法只能在同样被@Comopse注解的方法中才能被调用

@Composable
fun Greeting(name: String) {
Text (text = “Hello $name!”)
}
复制代码
@Preview
加上@Preview注解的方法可以在不运行App的情况下就可以确认布局的情况。 @Preview的注解中比较常用的参数如下：

name: String: 为该Preview命名，该名字会在布局预览中显示。
showBackground: Boolean: 是否显示背景，true为显示。
backgroundColor: Long: 设置背景的颜色。
showDecoration: Boolean: 是否显示Statusbar和Toolbar，true为显示。
group: String: 为该Preview设置group名字，可以在UI中以group为单位显示。
fontScale: Float: 可以在预览中对字体放大，范围是从0.01。- widthDp: Int: 在Compose中渲染的最大宽度，单位为dp。
heightDp: Int: 在Compose中渲染的最大高度，单位为dp。
更加详细具体的说明可以看 Google关于@Preview的文档

@Preview
@Composable
fun PreviewGreeting() {
Greeting(“Android”)
}
复制代码
上面的代码会在预览界面生成：

注意：强烈建议您不要向生产函数（即使其不带参数）添加 @Preview 注释，而是编写一个封装函数并在其中添加 @Preview 注释。

setContent
setContent和xml时候的setContentView是类似的 在setContent中写入关于UI的@Compopse方法，即可在Activity中显示。

···
override fun onCreate(savedInstanceState: Bundle?){
super.onCreate(savedInstanceState)
setContent {
ComposeTheme {
Greeting(“Android”)
}
}
}
···
复制代码
主题
Jetpack Compose 提供了 Material Design 的实现， Material Design 组件（按钮、卡片、开关等）在 Material Theming 的基础上构建而成.

Jetpack Compose 使用 MaterialTheme 可组合项实现这些概念：

MaterialTheme(
colors = …,
typography = …,
shapes = …
) {
// app content
}
复制代码
关于主题，建议阅读Google的官方文档

布局、组件
Compose提供了常见的布局与丰富的组件。

布局常见的有Column、Row、Stack。还有Material 支持的 Scaffold看到这里熟悉Flutter的朋友应该已经看出来了，Compose提供的自建跟布局和Flutter是非常相似的。

Column:

@Composable
fun ArtistCard() {
Column {
Text(“Alfred Sisley”)
Text(“3 minutes ago”)
}
}
复制代码
Scaffold:

@Composable
fun HomeScreen(…) {
Scaffold (
drawerContent = { … },
topBar = { … },
bodyContent = { … }
)
}
复制代码
事实也的确如此，Compose提供的布局和组件跟Flutter的组件与布局除了名字作用相似之外，连属性也是非常相似的。比如TextStyle这个控制Text样式的属性 直接使用Flutter的代码，把Dart语法修改成Kotlin语法就能直接使用。

我建议需要这些布局、组件相关属性的朋友直接去看Flutter相关的文章，Flutter经过这么久的发展，相关的文档、说明比现在的Compose要详细的多.

Compose 如何集成到现有项目
对于很多现有的项目，从头开始使用Compose是不现实的，我肯可以根据上面提到的手动修改gradle的方式，使项目支持Compose。

在XML中使用
我们可以直接把Compopse作为一个普通View使用

<androidx.compose.ui.platform.ComposeView
android:id="@+id/compose_view"
android:layout_width=“match_parent”
android:layout_height=“match_parent”/>
复制代码
findViewById(R.id.compose_view).setContent {
ComposeTheme {
Surface(color = MaterialTheme.colors.background) {
Greeting(“Android”)
}
}
}
复制代码
Activity、Fragment
作为独立的界面使用Compopse直接使用setContent方法即可。

当前最新版本的Kotlin存在bug，kotlin-android-extensions（用于直接在代码中使用XML中View的Id的扩展）存在bug,Kotlin官方表示在1.4.20版本修复