Jetpack Compose了解

Compose发展历史

🗂️ Jim Sproch 是谷歌高级工程师(Compose之父，那Compose之母是谁?)，有着前端开发领域丰富的工作经验，开创性的提出借助 Kotlin Compiler Plugin 为 Android 打造声明式UI框架的想法。

2017年启动 Jetpack Compose 项目
2019年5月 Jim Sproch 团队在 Google/IO 大会上做了 Compose的分享
2019年10月 Compose 发布首个 Preview 版本
2020年6月发布 Developer Preview2 版本
2020年9月发布第一个 Alpha 版本
2021年2月发布第一个 Beta 版本
2021年7月 Jetpack Compose 1.0 正式版本发布

Compose是什么？

Compose是一套现代化的 UI工具包，它是一个库，又或者说是个框架(重新定义了AndroidUI的写法)。

它用更少的代码，强大的工具和直观的 Kotlin API简化并加速了 Andoid上的UI开发。

它拥有的几个特性：声明式，一切皆为函数(Composable函数)，组合(组合优于继承)，单一数据源(单向流动)，重组。

它还包含 Android，Desktop(WIndows,Linux,macOS)，Web等不同平台的UI开发。

Compose模块分层了解

Compose模块	说明
Material	此模块位于最上层，基于 Material Design 系统实现的各种 Composable，同时提供了基于 Material Design 的主题，图标等。
Foundation	此模块为UI提供了一些基础的 Composable，例如 Row, Column, LazyColumn等布局类UI，以及特定手势识别等，这些基础 Composable 在很多平台都可以通用。
UI	UI层的功能众多，包含了多个模块(ui-text, ui-graphics, ui-tooling等)，这些模块构筑了上层 Composable运行的基础，例如 Composable 的测量，布局，绘制，事件处理以及 Modifier管理等。
Runtime	Compose 通过UI树的diff驱动界面刷新，此模块提供了基本的对UI树的管理能力。此模块还提供了 Compose 运行时的基本组件，例如 remember、mutableStateOf、@Composable 注释和 SideEffect。

谷歌为什么推Compose？

为什么推Compose，要从几个方面来说。

第一， 随着不断迭代，历史遗留问题积重难返。比如 View代码的臃肿，继承的控件设计不合理，落伍(引入很多不必要的功能)，基础控件只能随系统更新等。

这就很像公司的一些老项目，也在迭代，也在使用新技术，新架构等，随着业务的迭代，历史遗留问题越积越多，最后不得不新建一个新的工程进行重写(懂的都懂)。

第二， 近几年谷歌推出了很多新东西，比如Kotlin，新框架等.。但 UI开发这块效率太拉胯，所以需要提升UI开发效率。

第三， 其它产商已推出声明式UI，需要紧跟时代步伐；

`Android传统视图与 Compose, Flutter，Qt-QML，React, SwiftUI 等声明式UI 对比`

Android传统视图

命令式的编程风格

企业微信截图_20230328214323.png

Compose

截图.png

Flutter

Qt-QML

企业微信截图_20230328213044.png

SwitfUI

截图.png

对Compose的评价与未来

据Android开发者统计，Google Play商店中排名前一千的应用中就有超过一百个正在使用 Compose。

国内Android招聘信息上很多将 Compose 作为加分项。

大家用了 Compose 都说好！！！大家好才是真的好！！！

截图.png

常用控件了解

1.基础组件

1.1 文字组件

Text(文本), TextField(输入框)；

按钮 Button

1.2 图片组件

Icon

Icon 组件用于帮助开发者显示一系列的小图标。支持三种不同类型的图片设置：

矢量图(ImageVector)，位图(ImageBitmap)，画笔(Painter 自定义绘制)

Image

类似 ImageView

图片库的使用

是否支持开发中使用的图片格式

Compose 中的图像和图形 | Jetpack Compose | Android Developers

图片加载库 Coil Glide

是否支持开发中常用的图片格式(webp,pag,lottie...)?

1.3 选择器

Checkbox(复选框)

TriStateCheckbox(三态选择框)

Switch(单选开关)；

RadioButton(单选)

1.4 进度条

Slider(滑动/拖动条)

LinearProgressIndicator(直线进度条)

CircularProgressIndicator(圆形进度条)

2.布局组件

2.1 线性布局

androidx.compose.foundation.layout | Android Developers

Column(类似vertical 的 LinearLayout), Row(类似horizontal 的 LinearLayout)；

Flow Layouts(FlowRow and FlowColumn)

当 Column/Row 放不下里面的内容时，自动换行

2.2 帧布局

Box, Surface；

2.3 其它

Spacer(留白), Card, BoxWithConstraints, ConstraintLayout(约束布局), Scaffold脚手架, BottomNavigation底部导航栏, Pager, Dialog, DropdownMenu, ModalBottomSheetLayout

3.列表组件

列表和网格 | Jetpack Compose | Android Developers

Compose 中的延迟布局 - YouTube

LazyColum 竖向列表/LazyRow 横向列表

截图.png

LazyVerticalGrid 网格列表

截图.png

常用库了解

名称	说明
Navigation Animation	navigation动画
Placeholder	骨架屏，页面完全渲染之前的灰色轮廓
Core Theme Adapter	XML主题适配
Swipe Refresh	androidx.compose.material.pullrefresh
Permissions	权限请求库
WebView wrapper
Test Harness	UI测试
Coil	图片加载库
Lottie	动画工具库

动画

使用 Jetpack Compose 实现精美动画_哔哩哔哩_bilibili

动画 | Jetpack Compose | Android Developers

高级动画API

AnimatedVisibility/AnimatedContent/ContentTransform/animateXXXAsState

(24条消息) Jetpack Compose中的动画_川峰的博客-CSDN博客

状态管理

状态和 Jetpack Compose | Android Developers

实践 | Jetpack Compose 中的状态管理_哔哩哔哩_bilibili

Composables：用于管理简单的界面元素状态；
状态容器：用于管理复杂的界面元素状态且拥有界面逻辑；
ViewModel：提供对于业务逻辑和 UI 状态的状态容

主题

Compose主题切换——让你的APP也能一键换肤 - 掘金 (juejin.cn)

在应用中使用 Compose Material 3_哔哩哔哩_bilibili

Compose 中的 Material Design 2 | Jetpack Compose | Android Developers

Compose性能如何？

相比 XML , Compose 性能到底怎么样？ - 掘金 (juejin.cn)

(20条消息) 如何优化 Compose 的性能？通过「底层原理」寻找答案 | 开发者说·DTalk_Android 开发者的博客-CSDN博客

Jetpack Compose 渲染性能到底怎么样? - 知乎 (zhihu.com)

Jetpack Compose 性能提升最佳实践 - YouTube

遵循最佳实践 | Jetpack Compose | Android Developers

TV开发的问题

1.适配问题

Jetpack Compose 实现完美屏幕适配 - 掘金 (juejin.cn)

使用文章的方法，适配的方式也比较简单(我这里是以电视的1920分辨率来适配的)

val displayMetrics = LocalContext.current.resources.displayMetrics
val fontScale = LocalDensity.current.fontScale
val density = displayMetrics.density
val widthPixels = displayMetrics.widthPixels
val widthDp = widthPixels / density
val display = "density: $density\nwidthPixels: $widthPixels\nwidthDp: $widthDp"    
CompositionLocalProvider(
    LocalDensity provides Density(
        density = widthPixels / 1920f, 
        fontScale = fontScale
    )
) {
... ...
}