环境搭建
开发工具
由于 Jetpack Compose 目前还没有出正式版,所以要想开发体验,需要下载 最新 Canary 版的 Android Studio 预览版。
创建新项目
打开最新 Canary 版的 Android studio 预览版,创建一个新项目,你会发现创建新项目模板有一个 Empty Compose Activity 的模板,选择它创建一个项目就可以体验 Jetpack Compose 了。
在创建 Jetpack Compose 你会发现 _minimumSdkVersion _最小只能选择 API level 21 ,也就是 Jetpack Compose 支持的最小版本。
项目创建好了,先不着急开发,先看看配置,是如何让项目支持 Jetpack Compose 开发的,以便以后我们把 Jetpack Compose 添加到以前的项目中去。
- Jetpack Compose 是基于kotlin语言开发的框架,那么你的项目至少要确保支持 kotlin,如果你的项目还不支持,请查看官网教程 将 Kotlin 添加到现有应用 自行配置。( 😲 啥,都2021年了 项目还不支持 kotlin 😝 )。
- 打开项目的
app/build.gradle
文件,关于 Jetpack Compose 的相关配置如下
android {
defaultConfig {
...
// Jetpack Compose 最小支持版本 21
minSdkVersion 21
}
buildFeatures {
// 此 module 启动 Jetpack Compose
compose true
}
...
//kotlin 相关参数配置
kotlinOptions {
jvmTarget = "1.8"
// 0️⃣ 启用新的 jvm IR
useIR = true
}
// Jetpack compose 相关参数配置
composeOptions {
//kotlin 额外编译版本 和Jetpack Compose 版本一致
kotlinCompilerExtensionVersion compose_version
//kotlin编译版本,要1.4及以上
kotlinCompilerVersion kotlin_version
}
}
dependencies {
...
// Jetpack compose 相关依赖
// 基础组件
implementation "androidx.compose.ui:ui:$compose_version"
// Material Design 组件相关实现
implementation "androidx.compose.material:material:$compose_version"
// ui相关工具,比如视图预览
implementation "androidx.compose.ui:ui-tooling:$compose_version"
}
关于 0️⃣ 配置处参考 kotlin 1.4 新特性 | 新的 JVM IR backend 。
本文 Jetpack compose 版本compose_version = ‘1.0.0-alpha09’ , kotlin 版本 kotlin_version=‘1.4.21’
⚠️ 由于 Jetpack compose 没有推出正式版,api 可能会有变化,本文后期尽量跟进最新api,如果没有来得及更新,发现下文中部分 api 不可以用了请多多包涵,或留言告知本人多谢 🙏 。
看看 Jetpack Compose 长啥样
打开 MainActivity.kt 文件,如果编译顺利的话,你应该看到类似下面的样子
① 刷新视图,当代码发生变化是,点击它可以刷新视图
②进行交互模式,比如视图上有个按钮,就可以不用运行直接点击并作出对应的响应。
③ 和 ④可以把当前视图直接部署到设备上看效果,这个还是挺方便的。
更多关于布局预览工具的使用,可以查看官网上关于此内容的介绍 https://developer.android.google.cn/jetpack/compose/preview
仔细看上图,你会发现
Text() 是过时的,此处建议替换成androidx.compose.material.Text
。在没有稳定版本,经常 api用着用着过时、改名、或者直接被删掉都是很正常的 😁 。
在 Jetpack Compose 作为构建原生界面的工具包,我们还是用 Activity/Fragment 来加载视图,在以前 XML 布局模式下,Activity 关联视图使用 setContentView()
函数。在 Jetpack Compose 中加载关联视图使用 setContent
函数,如下所示
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
//添加一个 Jetpack Compose 视图
Greeting("Android")
}
}
可组合 (Composable) 函数
在以前 View 视图模式下,我们编写视图都是在 XML 文件中去书写,在 Jetpack Compose 中我们都用被加上 @Composable
注解的 kotlin 函数来构建界面,如下代码所示
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
- 可组合函数的函数名一般首字母大写,以便和普通函数区分。
- 可组合函数只能在其他可组合函数中调用,这一点有点类似协程 suspend 函数。
- 虽然函数用
@Composable
注解,但 Jetpack Compose 并不是一个注入处理器。Compose 在 Kotlin 编译器的类型检测与代码生成阶段依赖 Kotlin 编译器插件工作。此说法来自 深入详解 Jetpack Compose | 实现原理 这篇文章中,感兴趣可以去看一看。
学习第一个组件Text
上面创建的 Jetpack Compose 项目实例中就用到 Text 这个组件,在 Jetpack Compose 所有的组件都是 可以组合函数,所以Text 也不例外,源码如下
@Composable
fun Text(
text: String,//显示的内容
modifier: Modifier = Modifier, // 关于布局的设置
color: Color = Color.Unspecified,// 文字颜色
fontSize: TextUnit = TextUnit.Unspecified,//文字大小
fontStyle: FontStyle? = null, //文字风格
fontWeight: FontWeight? = null,//文字粗细
fontFamily: FontFamily? = null, //字体风格
letterSpacing: TextUnit = TextUnit.Unspecified,//字间距
textDecoration: TextDecoration? = null,//文字装饰、比如下划线
textAlign: TextAlign? = null,//对齐方式
lineHeight: TextUnit = TextUnit.Unspecified,//行高
overflow: TextOverflow = TextOverflow.Clip,// 文字显示不完的处理方式
softWrap: Boolean = true,// 文本是否应在换行符处中断,对中文没啥用
maxLines: Int = Int.MAX_VALUE,//最大行数
onTextLayout: (TextLayoutResult) -> Unit = {},
style: TextStyle = AmbientTextStyle.current
) {
……
}
我们需要设置个性化 Text 组件,只要传入对应的参数就行了,和 XML 添加对应属性差不多。
比如把文字改成蓝色
@Composable
fun TestText(){
Text(text = "Hello Android",color= Color.Blue)
}
想看效果 就在setContent调用此函数,或者在预览函数中调用
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
//将视图添加到Acitivity
TestText()
}
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
TestText()
}
预览效果
再学一个 Button 组件
@Composable
fun Button(
onClick: () -> Unit,// 按钮的点击事件
modifier: Modifier = Modifier,
enabled: Boolean = true, //是否启用
interactionState: InteractionState = remember { InteractionState() },
elevation: ButtonElevation? = ButtonDefaults.elevation(),//海拔
shape: Shape = MaterialTheme.shapes.small,//形状
border: BorderStroke? = null,//边框
colors: ButtonColors = ButtonDefaults.buttonColors(),//颜色
contentPadding: PaddingValues = ButtonDefaults.ContentPadding,//内边距
content: @Composable RowScope.() -> Unit //内容
) { …… }
这个 Button 组件点击事件 onClick 和内容 content 是必填参数外,好像没有设置 Button 文字的参数。这和我们以前在 XML 构建视图不太一样。那么我们怎么让 Button 显示文字呢? 我们在content 添加一个Text组件就可以了。
@Composable
fun TestButton() {
Button(onClick = { }) {
Text(text = "button")
}
}
最后一个参数 content 是函数类型,为了让这个函数体里面能调用可组合函数 所以在这个参数还加个 @Composable 表示是一个可以组合函数类型,所以 Button 的 content 的函数体中可以调用其它可组合函数。
如果我们让Button显示图片,那么我们就把 Text 换成 Image 就行了。Jetpack Compose 给我提供了简单Button、Text、Image 组件(组合函数) 通过我们不同的组合方式就创造了一些新的组件。
动态改变Text的文本内容
@Composable
fun TestButton() {
//声明一个可变状态值
val text =mutableStateOf("button")
Button(onClick = { text.value = "我被点击了" /*改变值*/}) {
Text(text = text.value/*使用值*/)
}
}
我们声明一个声明一个可变状态值text,让 Text 的内容设置为
text.value
当我们点击按钮的时候,text.value
的值被改变 Jetpack Compose 就会帮我们重新渲染用到text.value
的地方。
Jetpack Compose 的灵活性
Jetpack Compose 都是用 kotlin 函数,那么就可以用 kotlin 语法来构建界面了
@Composable
fun TestForView() {
val names = listOf("knight", "Tom", "Jack","kk")
Column {
names.forEach { Text(text = it) }
}
}
Column 是一种布局方式,让子级垂直顺序排列,这些子级我们现在直接用循环语法就可以了
预览效果
当然,如果条目多的话这样写就不合适了,我们可以把 Column 替换成 LazyColumn , LazyColumn 只会加载当前显示的条目和 RecyclerView 类似。它的用法也很简单,如下
val names = listOf("knight", "Tom", "Jack", "kk")
LazyColumn {
items(names) { Text(text = it) }
}
总结
本文叙述了如何搭建 Jetpack Compose 环境及工程,简单了解了一下 Jetpack Compose 是什么样子,学习了两个组件 Text 和 Button 。也看到了 Jetpack Compose 在 kotlin 的加持下 如此的灵活。Jetpack Compose 作为 Android 新的界面工具包,功能还是挺丰富的。本文只能说和 Jetpack Compose 的初探,混个脸熟,关于什么是声明式?、布局如何构建、界面状态和数据如何处理等等,等以后我们在慢慢探讨。
相关资料
Android 官方 Codelabs | Jetpack Compose basics
Android 官方网站 | Jetpack Compose 相关文档
更多 JetPack Compose 系列文章,你查看我的 JetPack Compose 专栏