何为Compose
2019 年中，Google 在 I/O 大会上公布的用于Android构建原生界面的全新 UI 框架。也就是说它的渲染机制、布局机制、触摸算法以及 UI 的具体写法，全都是新的。啊，这难道要把我们Android开发者赖以生存的技能---画xml，给点灭啦？
为啥要学
作为Google新推出的一套全新ui框架，Compose有别于传统的xml+java(kotlin)的“命令式ui”写法，它是一种“声明式ui”，iOS 的 SwiftUI 以及跨平台的 Flutter 也都是声明式的，可见声明式 UI 已经是一种趋势了(扶我起来，我还能学.jpg)。那它有那些好处呢？
- 更少的代码
用更少的代码来完成更多的功能，简单，易于维护，补充一下，Compose只能用Kotlin语言编写噢！ - 直观
只需要把ui元素描述出来即可，其他的交给Compose处理即可，一旦状态发生变化，你的ui也会自动更新 - 加速开发
兼容现有代码，Android Studio的实时预览便于快速迭代 - 功能强大
Android 平台 API 的直接访问和对于 Material Design、深色主题、动画等的内置支持
Compose vs Xml+Java/Kotlin
前者只要声明界面是什么样子，不用手动去更新，因为界面会自动更新，而且去掉了xml，只需使用Kotlin即可。而后者数据发生了改变，我们得手动用 Java 代码或者 Kotlin 代码去把新数据更新到界面。给出详细的步骤，去命令界面进行更新。
xml
setContentView(R.layout.activity_compare)
findViewById<TextView>(R.id.tv_greeting).text = "Hello Android"
compose
@Preview
@Composable
fun FirstPreview() {
var name by remember { mutableStateOf("Hello Compose") }
Story(name)
name = "Hello Android"
}
@Composable
fun Story(name: String) {
Text(name, textAlign = TextAlign.Center)
}
状态管理
状态
app中的状态(State)指的是一个可以随着时间变化的值。我们的应用就是在向用户展示状态。Compose可以让我们明确状态存储的位置和方式。
组合和重组
组合(composition)就是由一个个Composable调用形成的树形结构，运行这些Composable便可展示出我们的ui,在初识组合期间，Compose会对这些构建ui的Composable函数进行跟踪，当app的状态发生改变时，Compose会进行一次重组(recomposition)来更新ui。
组合只能由初始组合产生，并且只能由重组更新。修改的唯一方法就是重组。
Talk is cheap, show me the code
// this stateful composable is only responsible for holding internal state
// and defers the UI to the stateless composable
@Composable
fun ExpandingCard(title: String, body: String) {
var expanded by remember { mutableStateOf(false) }
ExpandingCard(
title = title,
body = body,
expanded = expanded,
onExpand = { expanded = true },
onCollapse = { expanded = false }
)
}
// this stateless composable is responsible for describing the UI based on the state
// passed to it and firing events in response to the buttons being pressed
@Composable
fun ExpandingCard(
title: String,
body: String,
expanded: Boolean,
onExpand: () -> Unit,
onCollapse: () -> Unit
) {
Card {
Column(
Modifier
.width(280.dp)
.animateContentSize() // automatically animate size when it changes
.padding(top = 16.dp, start = 16.dp, end = 16.dp)
) {
Text(title)
if (expanded) {
Spacer(Modifier.height(8.dp))
Text(body)
IconButton(onClick = onCollapse, Modifier.fillMaxWidth()) {
Icon(Icons.Default.KeyboardArrowUp, "Expand Less")
}
} else {
IconButton(onClick = onExpand, Modifier.fillMaxWidth()) {
Icon(Icons.Default.KeyboardArrowDown, contentDescription = "Expand more")
}
}
}
}
}
其中mutableState会返回一个MutableState,是一个可被观察的类型，它的值一旦发生变化，那么任何使用它的值的Composable函数将会发生重组，然后更新组合。remember的作用就是将状态的值存储在内存中，给Composable函数赋予”记忆“的功能，不会在每次重组中将上一次的值丢失。然而当发生切换屏幕方向，切换语言这些configuration changes时，remember便无能为力了，这时候rememberSaveable就可以派上用场啦。rememberSaveable可以自动将任何可以放在Bundle的值存储下来。
Composable的生命周期
互操作性
Xml里使用Compose
通过使用ComposeView然后调用setContent方法即可
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:context=".compare.ComposeInXmlActivity">
<TextView
android:id="@+id/hello_world"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Hello Android!" />
<androidx.compose.ui.platform.ComposeView
android:id="@+id/compose_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center" />
</LinearLayout>
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_compose_in_xml)
findViewById<ComposeView>(R.id.compose_view).setContent {
Text("Hello Compse")
}
}
Compose里使用Android View
通过使用AndoridView可以引入一个view
@Composable
private fun PlantDescription(description: String) {
// Remembers the HTML formatted description. Re-executes on a new description
val htmlDescription = remember(description) {
HtmlCompat.fromHtml(description, HtmlCompat.FROM_HTML_MODE_COMPACT)
}
// Displays the TextView on the screen and updates with the HTML description when inflated
// Updates to htmlDescription will make AndroidView recompose and update the text
AndroidView(
factory = { context ->
TextView(context).apply {
movementMethod = LinkMovementMethod.getInstance()
}
},
update = {
it.text = htmlDescription
}
)
}
@Preview
@Composable
private fun PlantDescriptionPreview() {
MaterialTheme {
PlantDescription("HTML<br><br>description")
}
}
学习资源
https://developer.android.com/jetpack/compose/state?hl=zh-cn
