【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的特点和优势:
- 更少的代码
用更少的代码做更多的事情,并避免整个类的错误,因此代码简单易维护。 - 声明式UI
只需描述您的UI,然后Compose会处理其余的工作。随着应用状态的更改,您的用户界面会自动更新。 - 加速开发
与所有现有代码兼容,因此您可以随时随地采用。通过实时预览和完整的Android Studio支持快速进行迭代。 - 强大
通过直接访问Android平台API以及对Material Design,Dark主题,动画等的内置支持,创建美观的应用程序。
详细的了解可以查看官方文档:
Jetpack Compose官方介绍:https://developer.android.com/jetpack/compose
2、发展到什么程度了?
经过半年多的完善,现在的Compose 究竟完善到什么程度了呢?截止本篇文章2020年1月4日,Compose发展到了 0.1.0-dev03,随着新版本的更新,本篇文章也会持续进行跟进。
3、快速上手
-
下载最新金丝雀(Canary)版本的Android Studo
目前最新版是android studio Canary 7
下载地址:android studio4.0 canary 7下载地址:https://developer.android.com/studio/preview
下载完成后,解压缩后直接运行即可打开
打开后可以出现如下启动页: -
创建一个支持Compose的demo
- 新建一个项目,直接选择Empty Compose Activity模版,android studio就会自动把Compose 相关的依赖引入
- 新建一个项目,直接选择Empty Compose Activity模版,android studio就会自动把Compose 相关的依赖引入
-
项目结构
创建项目后,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'
}
-
MainActivity文件
可以看到,直接通过使用Composable来生成一个UI组建,还可以通过Preview注解来再右侧实时预览 -
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函数
- 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 哪些常用组件的缺失
- 目前还没有看到ListView和RecycleView相关的组件
- Image如何直接显示网络图片?
- …
More 现在毕竟才到0.1.0-dev03版本,现在是尝尝鲜,距离商用还有一段距离的,不过,潘朵拉的魔盒已经打开了,相信在2020年,Android开发还是会迎来不少的变革
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/weixin_46055193/article/details/103821956