Compose开展前史

Jetpack 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传统视图

命令式的编程风格

Jetpack Compose了解

Compose

Jetpack Compose了解

Flutter

Jetpack Compose了解

Qt-QML

Jetpack Compose了解

SwitfUI

Jetpack Compose了解

对Compose的评价与未来

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

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

我们用了 Compose 都说好!!!我们好才是真的好!!!

Jetpack Compose了解

常用控件了解

1.根底组件

1.1 文字组件

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

按钮 Button

1.2 图片组件

Icon

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

矢量图(ImageVector),位图(ImageBitmap),画笔(Painter 自界说制作)

Image

相似 ImageView

1.3 选择器

Checkbox(复选框), TriStateCheckbox(三态选择框), Switch(单选开关);

RadioButton

Divider

1.4 进度条

Slider(滑动/拖动条)

LinearProgressIndicator(直线进度条)

CircularProgressIndicator(圆形进度条)

2.布局组件

2.1 线性布局

androidx.compose.foundation.layout | Android Developers

Column(相似vertical 的 LinearLayout), Row(相似horizontal 的 LinearLayout);

Jetpack Compose了解

Flow Layouts(FlowRow and FlowColumn)

当 Column/Row 放不下里边的内容时,主动换行

Jetpack Compose了解

2.2 帧布局

Box, Surface;

Jetpack Compose了解

2.3 其它

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

3.列表组件

列表和网格 | Jetpack Compose | Android Developers

Compose 中的延迟布局 – YouTube

LazyColum 竖向列表/LazyRow 横向列表

Jetpack Compose了解

LazyVerticalGrid 网格列表

Jetpack Compose了解

常用库了解

名称 阐明
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

一些问题

适配问题

Jetpack Compose 完成完美屏幕适配 – ()

运用文章的办法,适配的方法也比较简单(我这儿是以电视的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
    )
) {
... ...
}

TV开发的焦点问题

Focus in Jetpack Compose. A brief look at the Focus APIs in… | by Jamie Sanson | Google Developer Experts | Medium

Jetpack Compose中的焦点管理 – ()

Service悬浮窗问题

gist.github.com/handstandsa…

i.lckiss.com/?p=8056

blog.csdn.net/qq_45925230…

gist-github-com.translate.goog/handstandsa…

Compose功能如何?

相比 XML , Compose 功能究竟怎么样? – ()

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

Jetpack Compose 渲染功能究竟怎么样? – 知乎 (zhihu.com)

Jetpack Compose 功能提高最佳实践 – YouTube

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

参考资料

《Jetpack Compose Android全新UI编程》,《Jetpack Compose 从入门到实践》

Overview – Jetpack Compose Playground (foso.github.io)

Switch – Jetpack Compose Playground

Jetpack Compose 快来学学吧! – ()

Accompanist (google.github.io)

声明式 UI?Android 官方怒推的 Jetpack Compose 究竟是什么 (qq.com)

Demo展示

运用Jetpack Compose编写一款简单的AndroidTV运用 -上某网友写的compose tv demo