阅读 579

Android Jetpack 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:$compose_version"
    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提供了常见的布局与丰富的组件。

布局常见的有ColumnRowStack。还有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<ComposeView>(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版本修复