前言
Android上View.java的存在已经有十多年之久了,代码量也达到了惊人的3万行。而且很多常用的控件例如TextView、ImageView等又都直接或者间接继承自View,都说组合优于继承,所以针对View的这个设计,现在看来已经是落伍了。
去年(2019)年的时候,在AndroidDevSummit上,Google推出了Compose,当时眼前一亮,觉得Android上的UI开发要有一个全新的明天了。时隔一年,Compose已经从dev版本逐渐开发到了目前的alpha 07版本。至于Compose是什么,有什么优点,在Google之前的各种视频中都有讲解了这里不再赘述,官网介绍请移步Jetpack Compose,官方文档请移步Compose 文档。
其他文章的内容是从Compose alpha 07版本开始编写的,目前一直在紧跟Google的步伐进行更新,现在已进行到Compose Beta 01。
重大版本变更
alpha12
- setContent{}
setContent从androidx.compose.ui.platform移到了androidx.activity.compose,需引入implementation "androidx.activity:activity-compose:1.3.0-alpha02" - ConstraintLayout
约束布局迁移到了新包中,需引入implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-alpha02"
计划任务
跟最初学习View的时候一样,我们需要一个控件一个控件的去学习了解,先了解他的属性然后了解他的用法。
下面的任务列表是先基于xml中的控件名,然后对照Compose中的控件名展示出来的,目前还不完整,因为我也还在一步步的熟悉中,所以会根据进度慢慢的补充上来,有超链接的是已经更新完了的,请选择性阅读。
0、修饰符
- Modifier基础篇
可以修饰Compose UI元素或者向其添加行为,例如背景、填充、点击事件、宽高等属性。
1、控件
声明:控件需要引入的包大部分是androidx.compose.material的。为什么?因为Google在后面的一些更新中,将很多控件都从foundation包中移到了material包。也就是说我们后面的控件等内容的讲解大部分需要基于androidx.compose.material包中的相关控件。
- Icon
图标 - ImageView --> Image
图片
- ToolBar --> TopAppBar、BottomAppBar
工具栏,一般用于顶部标题栏或者底部标题栏 - TabLayout --> TabRow、ScrollableTabRow
包含多个标签的行 - Scaffold
实现了Material设计页面基本结构的组件
2、布局
声明:目前alpha08版本的布局相关内容需要引入androidx.compose.foundation包:
-
FrameLayout --> Box
帧布局:从底层往上堆叠。 -
LinearLayout -->Row、Column
线性布局:横向、纵向。 -
ScrollView -->
ScrollableRow、ScrollableColumn
【已废弃】ScrollableRow、ScrollableColumn在alpha11版本标记废弃,具体请看文章! -
RecyclerView + LinearLayoutManager --> LazyRow、LazyColumn
可以缓存并复用视图的布局!但是只能实现单列或者单行列表。 -
RecyclerView + GrideLayoutManager --> LazyVerticalGrid
【试验阶段】可以缓存并复用视图的布局!可实现多行列表。 -
ConstraintLayout --> ConstraintLayout
强大的约束布局!!! -
[FlowLayout -->
FlowRow、FlowColumn]
【已废弃】在实验阶段后被标记废弃的流式布局,官方建议自定义实现。 -
Spacer --> Spacer
一个空白的视图,由于目前官方没有margin相关的属性,可能是建议正确使用paddig和Spacer代替margin。
3、弹窗
-
AlertDialog --> AlertDialog
弹窗、对话框
4、动画
- AnimatedVisibility
目前还在试验阶段,该函数会影响视图树的结构 - animateXxxAsState
根据Xxx类型的值,自主响应的动画函数
5、自定义
- Canvas
介绍了最基本的Canvas绘制的一些方法 - Canvas之BlendMode
介绍了Canvas绘制图形时的混合方式
6、主题
- Theme
让你的App更加花里胡哨一点
7、搭配其他Jetpack等组件
单纯的使用Compose已经满足不了我们了,怎么和其他Jetpack组件搭配是我们接下来的任务了。
- Compose搭档 — ViewModel、LiveData
介绍了一些Compose的思想,以及ViewModel中LiveData数据如何转换为Compose需要的state数据 - Compose搭档 — Flow、Room
介绍了Flow如何转换为LiveData,State数据,以及Room的基本使用