- 传统的 UI 编程方式我们再熟悉不过了。常见的操作是先定义一个 xml，然后通过 Activity 的 setContentView() 将 xml 放进去，之后就交给系统来加载。
<androidx.constraintlayout.widget.ConstraintLayout ...>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World" ... />
</androidx.constraintlayout.widget.ConstraintLayout>
class MainActivity: AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
...
setContentView(R.layout.activity_main)
}
}
- Compose 编程方式
Compose UI 工具包则依赖 Composable 注解将展示 UI 的函数声明为可组合函数，Compose 编译器负责标记可组合函数内的组件，并进行展示。
布局的部分均需要放在该函数内交由 Compose 组合。
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
...
setContent {
SimpleComposable()
}
}
@Composable
fun SimpleComposable() {
Text("Hello World")
}
}6.3 进阶示例
来看一下下面这个简单的动态效果，并思考一下：如果采用传统的 View 编程方式来实现，你需要多少代码量？
采用传统的 View 方式，无非是如下的思路，布局加上逻辑少于100 行代码不太容易实现：
- 布局：CardView LinearLayout（ImageView TextView）
- 代码：监听、展开和隐藏 TextView，并考虑阴影和淡出动画）
那如果采用 Compose 来实现呢？只需要 10 行即可。
- Composable 函数组合圆角组件 Card 垂直布局组件 Column
- Column 嵌套图片组件 Image 和动画组件 AnimatedVisibility 包裹的文本组件 Text
- Column 的 click 事件更新展开或隐藏的 state，进而触发 AnimatedVisibility 的*，刷新 Text 的展示与否
@Composable
fun JetpackCompose() {
Card {
var expanded by remember { mutableStateOf(false) }
Column(Modifier.clickable { expanded = !expanded }) {
Image(painterResource(R.drawable.jetpack_compose))
AnimatedVisibility(expanded) {
Text(
text = "Jetpack Compose",
style = MaterialTheme.typographt.h2,
)
}
}
}
}6.4 优势
篇幅有限，事实上 Compose 具备非常多的优势，亟待大家的挖掘：
- 声明式 UI：只负责描述界面，Compose 系统负责其余工作
- 状态驱动：界面随着状态自动更新
- 高效渲染：固定测量，层级嵌套性能仍是 O(n)
- 结合 AS 的 Preview 视图可实时查看和直接交互 UI
- 兼容传统 View 树编程方式，可混合使用
- 支持 Material Design 设计语言
- 拥有 Jetpack 框架的大力配合
- 基于 Kotlin，代码简洁，大量 Kotlin 专属 API
- 跨平台亦有布局：Desktop、 Web
大家可以利用 Compose 先来实现一个新画面，或者改造一个现有画面，逐步推进 Compose 的学习和实践。但是 Compose UI 工具包目前在部分场景下的组件支持有限，比如 WebView、``CameraView` 等，这些场景下仍需要配合 Android 原生的 View 方式来完成。
6.5 Sample- 官方 Sample：完全使用 Compose 设计的八大主流场景的 App，专业、全面。https://github.com/android/compose-samples
- Movie客户端 本人使用 Compose 的大部分 UI 组件、视图切换和数据刷新重构的电影搜索 App。https://github.com/ellisonchan/ComposeMovie
- 俄罗斯方块 fun 神将自定义 Compose 组件和状态管理发挥到了极致，搭配定时器和各式动画实现，非常值得用来深入学习 Compose 技术。https://github.com/vitaviva/compose-tetris
