BaguTree Compose 分享

·  阅读 963

BaguTree 组织地址: jetpack.net.cn/#/blog/all

目录:

  1. Compose 是什么
  2. 如何学习 Compose
  3. 用示例了解 Compose 重组
  4. Compose 的性能怎么样
  5. Compose 与 AGP、KGP 的关系
  6. Compose 对编译速度的影响
  7. Compose 跨平台现状

本期分享目标:让还在观望的开发者们可以没有顾虑的用上 Compose

  • 在与一些开发者沟通的过程中发现,有很多开发者并不知道怎么接入 Compose,有的可能尝试接入了,但会报各种奇奇怪怪的编译错误,如果在工程接入这块就发生问题了的话,这简直就是还没入门就劝退。
  • 也有的开发者以为需要 AGP 7.0 以上才能使用 Compose,对于目前现存的老工程无法接入。但到底是哪个版本才开始支持,还是有很多人不清楚。

一、Compose 是什么

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

1、更少的代码以及更快速的开发

例如一个列表控件:

  • compose:
LazyColumn() {
    items(apkInfos, key = { apk -> apk.packageName!! }) { apk ->
        AppInfoItem(apk) {}
    }
}
复制代码
  • 原生 RecyclerView
val rv = findViewById<RecyclerView>(R.id.rv)
val adapter = AppListAdapter()
rv.layoutManager = LinearLayoutManager(this)
rv.adapter = adapter

// 1、要写 Adapter 类
class AppListAdapter() : ListAdapter<ApkInfo, AppListAdapter.AppListViewHolder>(AppListDiff) {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): AppListViewHolder {
       ...
    }

    override fun onBindViewHolder(holder: AppListViewHolder, position: Int) {
        ...
    }
}

// 2、要写 ViewHolder 类
class AppListViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
       ...
}
// 3、要写 Diff 类
private object AppListDiff : DiffUtil.ItemCallback<ApkInfo>() {
      ...
}
// 4、xml 部分代码
复制代码

2、直观

Compose 使用声明式 API,可以显示声明组件与状态,并且可以很直观的查看状态在组件上的流转。

3、强大的兼容性

原生可以嵌套 Compose,Compose 可以嵌套原生,并且可以无缝的使用 Jetpack 组件,例如 ViewModel、LiveData、Flow 等

image.png Compose 中嵌套原生 View 原理

二、如何学习 Compose

学习一门框架的几个步骤: image.png

官方学习资料:

博文资料:

书籍: image.png

三、用示例了解 Compose 重组

引用朱涛老师文章的示例:

优化前: image.png

输出结果:
MainActivity: MainScreen start
MainActivity: Greeting start Init
MainActivity: Greeting end Init
MainActivity: MainScreen end
等待 1秒
MainActivity: MainScreen start        // 重组
MainActivity: Greeting start Modified // 重组
MainActivity: Greeting end Modified   // 重组
MainActivity: MainScreen end          // 重组
复制代码

优化后:

image.png

输出结果:
MainActivity: MainScreen start
MainActivity: Greeting start Init
MainActivity: Greeting end Init
MainActivity: MainScreen end
等待 1秒
MainActivity: Greeting start Modified  // 重组
MainActivity: Greeting end Modified    // 重组
复制代码

一句话总结:状态读取发生在哪个 Scope,状态更新的时候,哪个 Scope 就发生重组

上面的代码段就是采用 lambda 延迟到 Greeting 方法来读取 state.value 值,将重组限制在 Greeting 这个可组合项的作用域中。

四、Compose 的性能

4.1 Compose 与原生启动性能比较

image.png 结论:Compose 的冷启动略逊于原生,两者相差 124ms,但在热启动与温启动状态下,Compose 性能又优于原生

4.2、Compose Baseline Profiles 加持

GroupColumn-20220807.png 结论:有 Profiles 加持时,启动优化了 30ms

注意:

  • 通过查看 AGP 源码了解到,Baseline Profiles 的 task 只在 AGP 7.0 版本才支持,7.0 以下的 AGP 跑 Compose项目时,享受不到 Baseline Profiles 带来的优化

五、Compose 与 AGP(android-gradle-plugin)、KGP(kotlin-gradle-plugin) 的关系

Compose、AGP、KGP 依赖关系图

基于 KCP(kotlin compiler plugin) 的插件有:

  • Compose Compiler

  • kotlin-android-extension

  • kapt

Kotlin 插件的工作过程(图来自朱涛老师文章)

5.1 Compose 版本最佳配置:

// project build.gradle
buildscript {
   ext.kotlin_version = '1.6.10'
   ext.compose_version = '1.1.0'
   ...
   dependencies {
      ...
      classpath 'com.android.tools.build:gradle:4.1.0'
      classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
   }
}

// app build.gradle
android {
    ...
    buildFeatures{
        compose true
    }
    // 重点:覆盖掉 AGP 中的默认配置
    composeOptions{
        kotlinCompilerVersion  "$compose_version"
        kotlinCompilerExtensionVersion  "$kotlin_version"
    } 
}
复制代码

image.png Compose 与 Kotlin 的兼容性对应关系

5.2 Compose 在 AGP 不同版本的表现

  • AGP 4.2.0 以下不支持正式版本的 Compose。在查看 AGP 4.1.0 时,该版本内置的 compose-compiler 依赖是 androidx.compose:compiler,而正式版本的依赖是 androidx.compose.compiler:compiler
  • AGP 4.2.0 开始支持正式版本的 Compose。可根据 composeOptions 来自由配置 compose 版本,但版本需要参考兼容性文档
  • AGP 7.0 以下不支持 ArtProfileTask,这会导致无法生成 baseline.prof 文件,进而享受不到 Baseline Profiles 带来的性能优化,结果就是性能不佳
  • AGP 7.0 开始支持正式版 Compose 与 Baseline Profiles

六、Compose 对编译速度的影响

如果反编译过 Compose 项目的话,你会发现代码里面有各种在编译期间自动插入的 composer 代码: image.png 然后再来探讨下,compose compiler 到底耗不耗时?需不需要去重点关注? 我的总结是:

  • 耗时是肯定的,但是不是痛点,我觉得得看项目结构,当项目采用壳工程+组件化方式开发,module 的耗时早就被打 aar 给均摊掉了,在主工程集成时,并不会影响编译耗时

七、Compose 跨平台现状

image.png Compose 跨平台现状图

iOS 、Mac 端跨平台初见端倪,但目前还是实验阶段:

总结

业务开发上,目前 Android 技术发展已经进入存量阶段,现在已经很难再出现一款框架或是技术,来颠覆我们项目的生产,Compose 的推出,无疑是给 Android 生态增添了一份生机。

对于要不要使用 Compose 这个问题,我的建议是:先尝试了解,学习官方文档,然后尝试写一些 Demo,对照着公司的项目,用 Compose 去仿写几个页面,如果整体问题不大的话,可以尝试对公司项目的二三级页面进行改造,然后通过性能监控或是用户反馈的方式,来收集一些意见。

不过话也说回来,Jetpack Compose 容器依然是一个 ViewGroup,没有脱离原生 View 体系,我觉得,问题应该不会太大,最多就是代码使用不当,重组作用域扩大,导致页面卡顿,但这种在开发期间是可以通过调试和监控可发现的,所以,大家赶紧用起来吧。

分类:
Android
标签:
收藏成功!
已添加到「」, 点击更改