Jetpack Compose还没入门就劝退？本篇让你没有顾虑的用上Compose

最新推荐文章于 2024-02-28 08:00:00 发布

代码与思维

最新推荐文章于 2024-02-28 08:00:00 发布

阅读量1.1k

点赞数

文章标签： 1024程序员节 android jetpack compose composer

原文链接：https://juejin.cn/post/7119093424535371789

版权

本文转载自掘金，作者：codelang,侵删！！！！

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

● 在与一些开发者沟通的过程中发现，有很多开发者并不知道怎么接入 Compose，有的可能尝试接入了，但会报各种奇奇怪怪的编译错误，如果在工程接入这块就发生问题了的话，这简直就是还没入门就劝退。

● 也有的开发者以为需要 AGP 7.0 以上才能使用 Compose，对于目前现存的老工程无法接入。但到底是哪个版本才开始支持，还是有很多人不清楚。

一、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 等

二、如何学习 Compose

学习一门框架的几个步骤：

官方学习资料：

● 了解官方走向：Jetpack Compose 路线图
● 了解 Compose 的样貌：使用 Jetpack Compose 更快地打造更出色的应用
● 官方教程文档 : Jetpack Compose 使用入门
● 跟着官方动手实践： Compose Codelabs
● 参考官方写的应用：Compose-Sample
● Compose 补充库，有很多 UI 框架：Accompanist

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

优化前：

输出结果:
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           //重组

优化后：

输出结果:
MainActivity: MainScreen start
MainActivity: Greeting start Init
MainActivity: Greeting start Init
MainActivity: MainScreen end
等待1秒
MainActivity: Greeting start Modified // 重组
MainActivity: Greeting end Modified   输出结果:
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 的性能

● 相比 XML , Compose 性能到底怎么样？ - 掘金

● Google I/O : Jetpack Compose 中常见的性能问题 - 掘金

● Jetpack Compose 笔记(3) - 重组的性能风险

4.1 Compose 与原生启动性能比较

● Compose 与原生启动性能对比

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

4.2、Compose Baseline Profiles 加持

● 官方文档：Improving performance - Baseline Profiles

● Baseline Profiles 在 Compose 中的应用

● 说一说Android的Dalvik，ART与JIT，AOT

结论：有 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 的关系

● AGP 支持正式版 Compose 的最低版本

Compose、AGP、KGP 依赖关系图

基于 KCP(kotlin compiler plugin) 的插件有：
● Compose Compiler

● kotlin-android-extension

● kapt

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中的默认配置
      compose0ptions{
          kotlinCompilerVersion  "$compose_ version'
          kotlinCompilerExtensionVersion” $kotlin_ _version"
        }
      }