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传统视图
命令式的编程风格
Compose
Flutter
Qt-QML
SwitfUI
对Compose的评价与未来
据Android开发者统计,Google Play商店中排名前一千的运用中就有超过一百个正在运用 Compose。
国内Android招聘信息上许多 将 Compose 作为加分项。
我们用了 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);
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 横向列表
LazyVerticalGrid 网格列表
常用库了解
名称 | 阐明 |
---|---|
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