Jetpack compose

Posted on | Edited on | Comments: | Views:

这是Google出品的现代化工具包用来构建Android UI。用它可以更快更简便的进行UI界面开发。这个工具包版本最新只有0.1.0-dev08，离稳定可用应该至少还有半年，所以心情放轻松，来认识一下它吧。

Android编写UI有哪些痛点？

  • 不方便，需要在xml里写布局文件，要精通各种Layout，比如ConstraintLayout会用了吗？
  • 历史包袱，10来个大版本的迭代，现在UI的祖先View类已经3w多行，而绝大部分的UI控件都继承于View。意味你写一个按钮或者一个TextView都会受这个祖先影响。继承了很多没有用到的特性和功能。
  • 性能开销，基类对象内存开销，解析xml的额外开销
  • 预览和Reload不方便，Android的Instant Run起作用的各种Android版本限制和Flutter毫秒级的hot reload完全不能比。
  • 不好测试，xml只能通过集成测试，如果是代码构建通过单元测试就可以覆盖了。

Jetpack Compose 的目标

Less code

用更少的代码做更多的事情，避免继承类的错误，因此代码简单易维护。众所周知，从维护的角度看，组合优于继承。

Intuitive

只需定义你的UI，Jetpack Compose就会处理其余的工作。 随着应用状态的变化，你的用户界面会自动更新

Accelerate Development

与所有现有代码兼容，因此你可以随时随地采用。 通过实时预览和完整的Android Studio工具链支持快速迭代

Powerful

通过直接访问Android平台API以及对Material Design，Dark主题，动画等的内置支持，创建美观的应用程序。

准备工作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
android {
    ...
    composeOptions {
        kotlinCompilerExtensionVersion = "0.1.0-dev08"
    }
}

dependencies {
    ...
    implementation 'androidx.ui:ui-framework:0.1.0-dev08'
    implementation 'androidx.ui:ui-layout:0.1.0-dev08'
    implementation 'androidx.ui:ui-material:0.1.0-dev08'
    implementation 'androidx.ui:ui-tooling:0.1.0-dev08'
    ...
}

实操

先写一个简单的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class ComposeActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                GroupView()
            }
        }
    }
}

@Composable
fun GroupView() {
    Column(modifier = Modifier.padding(16.dp)) {

        Image(
            asset = vectorResource(R.drawable.ic_launcher_foreground),
            colorFilter = ColorFilter.tint(MaterialTheme.colors.primary)
        )

        Text("A day in Shark Fin Cove")
        Text("Davenport, California")
        Text("December 2018")
    }
}

可以看到代码是非常简短直观的。

写一个ListView

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 直接构建
@Composable
fun ListViews(itemSize: Int = 2000) {
    for (i in 0..itemSize) {
        Greeting(name = "name $i")
        if (i != itemSize) Divider(color = Color.Gray)
    }
}
// 用adapter
@Composable
fun AdapterListView() {
    AdapterList(
        data = (1..2000).toList()
    ) {
        Text("$it Even", style = TextStyle(fontSize = 28.sp, color = Color.Gray))
    }
}

同样简洁直观，这里用两种实现的原因是直接构建有很大性能问题， pixel 3 XL当itemSize超过100个时明显有延迟，1000个时已经outMemony了。用AdapterList没有Memony问题，但滑动体验很僵硬，以Recycle 10分作为参照的话，AdapterList从体验上只能给1分。

感想

上手体验

愉悦，无论是声明函数式写法还是无所不在的组合思想体现，都让构建UI变的简单直观。更有Kotlin加持，非常舒服，有Flutter那味，而且语法更清爽。

完成度

不高，随处可见的breakChange（比如Text，Layout，Modifier dev08相对dev07的改动），说明该项目离稳定版还有很长一段时间。反过来看，即使是这么早期的版本也有这种开发体验，我很期待最终的Release版本。

可能影响

ConstraintLayout用着很舒服，但Jetpack Compose很可能是Android native UI构建的终解。它吸收前端（reactJS，Flutter，VueJs）的优点并集大成，加以Kotlin优秀的语言特性，还有深度优化定制的Android studio工具链。完全可以期待更多，比如解偶Android平台依赖，写UI不用考虑版本差异；更加符合直觉的开发体验；实时的Preview；毫秒级的HotReload。

参考

https://developer.android.com/jetpack/compose

https://github.com/android/compose-samples