【Jetpack Compose最新版详解】（持续更新）

【2020年的第一篇JB】 Jetpack Compose 完全解析（持续更新）

虽然工作了5，6年了，一直也有做笔记的习惯，但是从来没写过什么博客，最近开通了CSDN，打算将自己多年所学，通过博客展现出来，希望能使得自己的基础更加夯实，技术能力更进一步，思维更加缜密，同时能帮助到真正需要帮助的人。（JB :我对技术博客的简称）

1、什么是Compose？

在2019年5月份的 Google I/O 大会上面，Jetpack 团队首次为大家介绍了 Jetpack Compose， Jetpack Compose 是一个用于构建原生Android UI 的现代化工具包。

Compose的特点和优势：

1. 更少的代码
   用更少的代码做更多的事情，并避免整个类的错误，因此代码简单易维护。
2. 声明式UI
   只需描述您的UI，然后Compose会处理其余的工作。随着应用状态的更改，您的用户界面会自动更新。
3. 加速开发
   与所有现有代码兼容，因此您可以随时随地采用。通过实时预览和完整的Android Studio支持快速进行迭代。
4. 强大
   通过直接访问Android平台API以及对Material Design，Dark主题，动画等的内置支持，创建美观的应用程序。
   详细的了解可以查看官方文档：
   Jetpack Compose官方介绍：https://developer.android.com/jetpack/compose

2、发展到什么程度了？

经过半年多的完善，现在的Compose 究竟完善到什么程度了呢？截止本篇文章2020年1月4日，Compose发展到了 0.1.0-dev03，随着新版本的更新，本篇文章也会持续进行跟进。

3、快速上手

1. 下载最新金丝雀（Canary）版本的Android Studo
   目前最新版是android studio Canary 7
   下载地址：android studio4.0 canary 7下载地址：https://developer.android.com/studio/preview
   下载完成后，解压缩后直接运行即可打开
   
   打开后可以出现如下启动页：
   

2. 创建一个支持Compose的demo

   1. 新建一个项目，直接选择Empty Compose Activity模版，android studio就会自动把Compose 相关的依赖引入
      

3. 项目结构
   创建项目后，Project 对应的build.gradle文件如下所示：

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    ext.kotlin_version = "1.3.61"
    repositories {
        google()
        jcenter()

    }
    dependencies {
        classpath "com.android.tools.build:gradle:4.0.0-alpha07"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()

    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

同时，app的build.gradle的如下所示：

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 29

    defaultConfig {
        applicationId "com.nyc.mycompose"
        minSdkVersion 21
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }

}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.1.0'
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.ui:ui-framework:0.1.0-dev03'
    implementation 'androidx.ui:ui-layout:0.1.0-dev03'
    implementation 'androidx.ui:ui-material:0.1.0-dev03'
    implementation 'androidx.ui:ui-tooling:0.1.0-dev03'
}

4. MainActivity文件
   
   可以看到，直接通过使用Composable来生成一个UI组建，还可以通过Preview注解来再右侧实时预览

5. Composable注解的使用

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview
@Composable
fun DefaultPreview() {
    MaterialTheme {
        Greeting("NYC Jetpack Compose")
    }
}

我们可以看到，通过Composable注解一个函数，可以生成一个UI组件，一个Composable函数只能在另一个Composable函数的作用域里被调用，要使一个函数变为Composable函数，只需在函数名前加上@Composable注解，这里在DefaultPreview函数中调用了Greeting函数

6. Preview注解
   通过Preview注解的Composable函数，可以再右侧进行实时预览（其实现在要按下左上的刷新键刷新），Preview有一些使用注意事项
   1. @Preview只能使用在已经添加了@Composable函数上
   2. @Preview 只能使用在无参的 Composable函数上
   3. @Preview 注解可以带一些参数(name,group等)
   4. @Preview 可以注解在多个Composable函数上，这样，右侧会同时生成多个预览，如下图所示：这里给每一个Preview添加了name和group，这样当我们一个界面中组件较多的时候，就可以根据group分组显示了
   

3、常用UI组件使用

这一部分，我们看一些常用组件的使用，学习一门新东西，怎么快速入门呢？那当然是官方的sample啊，以下内容可以参考官方的sample：JetNews
github上的地址：https://github.com/android/compose-samples/tree/master/JetNews

• Text组件的使用详解
  
  Text小结：和我们XML写UI稍有一些不同的地方，字体、字号、颜色等谁能够通过TextStyle样式进行设置，可以自定义样式，也可以使用系统内置的一些样式，通过copy可以复用系统样式并修改部分样式；行高等属性通过段落样式：ParagraphStyle进行设置；边距等可以通过modifier进行设置，modifier直译过来就是修饰符的意思，赋予modifier的修饰属性可以有多个，通过wraps进行组合：
  modifier = Spacing(6.dp) wraps Flexible(flex = 1f)（Flexible属性后面会讲到）

• DrawImage、Container、Clip组件的使用详解
  下面我们来显示一个圆角图片,RoundedCornerShape和DrawImage都是在foundation库里面的，如果没有自动导入，需要手动导入：

    implementation 'androidx.ui:ui-foundation:0.1.0-dev03'

加载图片如下图所示：

• Container: 一个通用的内容对象，用于保存和安排其他UI元素。然后，你可以将大小和位置的设置应用于容器。
  expanded : 指定Container的大小，默认是false（Container的大小是子组件的大小，相当于wrap_content），如果将它设置为true，就指定Container的大小为父控件所允许的最大size, 相当于match_parent（包括宽和高两个属性）。
  height : 设置Container容器的高度，height属性的优先级高于expanded,因此会覆盖expanded，如上面的例子，设置height为100dp,也就是容器宽为父控件宽度，高为100dp
  在图片的上面，使用了HeightSpacer添加了垂直的间距，同样，如果是行布局，添加水平间距可以使用 WidthSpacer
• Clip:Clip用于对元素进行裁切，它需要一个shape的参数，这里使用了一个RoundedCornerShape，表示裁切一个圆角矩形
• DrawImage：DrawImage组件直接传入一个Image对象即可
• 小结：以上就是我们显示一个圆角图片所用到的组件，在原生Android开发中，很多组件都是作为属性存在，而在Compose中，它们被抽象成了组件，这样通过组件的组合，搭建UI更加方便和灵活，这点感觉和Flutter很像。万物皆组件的思想，以后搭建UI是不是首先想想：这种效果是不是可以通过组件的组合实现？

时间关系，还有其他一些Compose组件,这里先列出来，后面会在本篇一个个把详细的使用补全

• TopAppBar：顶部工具栏
• TabRow：表格组件
• Row:行控件，和Column控件相对应
• VerticalScroller：垂直滚动组件，相当于原生的ScrollView
• HorizontalScroller：水平滚动组件，相当于原生HorizontalScrollView
• == Divider==：分割线组件，可与设置四周间距、颜色、宽度
• Ripple：水波纹效果
• Toggleable：状态切换组件
• DrawShape：绘制一个Shape
• DrawVector：绘制一个矢量图片
• Clickable：点击事件组件，赋予组件被点击的功能
• Opacity：透明度组件，包在组件外层，即可赋予组件透明效果
• Surface：有待研究
  详情也可以参考官方sample:
  Compose官方Sample
  Compose官方Sample
  Compose官方Sample
  首页：
  
  Interests页面：
  

4、END 哪些常用组件的缺失

1. 目前还没有看到ListView和RecycleView相关的组件
2. Image如何直接显示网络图片？
3. …

More 现在毕竟才到0.1.0-dev03版本，现在是尝尝鲜，距离商用还有一段距离的，不过，潘朵拉的魔盒已经打开了，相信在2020年，Android开发还是会迎来不少的变革