阅读 258

学习 Compose 系列(一)环境配置、概念理解、初体验

Jetpack Compose 是用于构建原生界面的新款 Android 工具包。它可简化并加快 Android 上的界面开发。使用更少的代码、强大的工具和直观的 Kotlin API,快速让应用生动而精彩。

image.png

Compose 作为一条新的构建界面的工具,不同于原来解析 xml 生成,应用开发方式也与原来不同,需要重新理解其原理。Compose 放在 Jetpack 中,和 ViewModel LiveData 结合,目标是开发更高效,应用更健壮。官网地址

之前通过 kotlin + xml 编写UI界面,两种语言无法互通,xml 本身很不灵活,使得UI编写很麻烦,无法大量复用;Compose 提供的工具使得只使用 kotlin 一种语言编写 UI 和动画,加上IDE的预览,使得我们可以更快速的完成界面的 UI,而且灵活性和复用性大大提升。定义好 UI 界面,关联上相关的状态值,然后逻辑层只控制状态值的变更,状态变更自动同步到UI变化。

1. 下载预览版本 Android Studio

目前 compose 为 beta 版本,需要下载预览版 as 才能体验。下载地址

image.png

2. 创建支持 Compose 的应用

image.png

3. 代码结构变化

image.png

基类变更为:ComponentActivity,之前使用的 AppCompatActivity 变更为 FragmentActivity 和 ComponentActivity 的子类;可以看到如果要使用 fragment 应该还是需要改基类为 AppCompatActivity。

image.png

image.png

ComponentActivity 的扩展函数 setContent,找到或者构建ComposeView。最后调用 Activity.setContentView(view,layoutParams) 设置界面内容。最终 View 界面的相关概念没有变化,只不过将一个 ComposeView 设置到 Activity 中。

image.png

ComposeView 继承 AbstractComposeView,父类时一个 ViewGroup,内部有一个 Composition 和 CompositionContext。 在 attachToWIndow 时调用到扩展函数 ViewGroup.SetContent

image.png

image.png


override fun onAttachedToWindow() {
    super.onAttachedToWindow()

    if (composition != null) {
        checkViewTreeOwners()
    }

    if (shouldCreateCompositionOnAttachedToWindow) {
        ensureCompositionCreated()
    }
}
复制代码
private fun ensureCompositionCreated() {
    if (composition == null) {
        if (isAttachedToWindow) {
            checkViewTreeOwners()
        }
        try {
            creatingComposition = true
            composition = setContent(
                parentContext ?: findViewTreeCompositionContext() ?: windowRecomposer
            ) {
                Content()
            }
        } finally {
            creatingComposition = false
        }
    }
}
复制代码

生成一个 AndroidComposeView (继承ViewGroup)添加到界面中, doSetContent 将传入的 @Composable 函数赋值。真正将函数转换成具体的界面是在 AndroidComposeView 中进行转换的

internal fun ViewGroup.setContent(
    parent: CompositionContext,
    content: @Composable () -> Unit
): Composition {
    GlobalSnapshotManager.ensureStarted()
    val composeView =
        if (childCount > 0) {
            getChildAt(0) as? AndroidComposeView
        } else {
            removeAllViews(); null
        } ?: AndroidComposeView(context).also { addView(it.view, DefaultLayoutParams) }
    return doSetContent(composeView, parent, content)
}
复制代码

构造函数、onMeasure、onLayout、dispatchDraw。基本上就是Compose 框架的转换逻辑。

image.png

image.png

image.png

image.png

4. 运行体验

content 区域生成了一个 AndroidComposeView。

image.png

image.png

总结

Compose 工具包的出现使得声明式UI在开发效率和代码复用性上大大提升。性能上可以看到变化主要时在声明UI转换为真正的View的过程,以及通知 view 状态变更;具体的性能细节问题后续系列探索。

下篇:学习 Compose 系列(二)UI之主题、布局、交互


欢迎和我一起交流学习

文章分类
Android
文章标签