前言
常年混迹于各种开发群,现在的Android开发简直卷的不行,到处都是在讨论framework开发,车载相关的内容,作为一个应用层的cv工程师,硬啃系统底层代码还是相当的吃力,只有继续在应用层深耕,刚把kotlin啃掉,应用在项目中,还在体会kotlin的真香,这边Android官方又在推Compose,一种全新的写UI界面的方式,网上一搜,什么响应式布局,什么移动端大趋势,什么跨平台,整个人都懵了,这一天应用层咋这么卷,jetpack才学完,现在又要学Compose,没办法,该卷的要卷,该学的再痛苦也得学
跳过网上一堆的对于响应式布局的介绍,如果用过databinding的MVVM架构的方式,就有过在XML布局中通过通过属性绑定值,实现了当值变化时界面自动响应新的值变化从而实现界面的UI的刷新,省去了诸如findviewbyid以及对该控件的各种set操作,这种能自动感应值的变化进行刷新UI的方式,就是响应式的UI方式。
第一步:新建项目
从0开始,那么就使用AndroidStudio新建一个空白的项目,通过发现目录结构,发现默认项目引入的compose_version还是“1.1.0-beta01”版本,通过查看官网上的的依赖介绍,发现compose跟androidx一样,将不同的宫内组进行了分包,总共分为了7个组
由于独立更新,所以不同的组的版本号可能不一样
那么开发的时候怎么选择依赖哪些包,看了下新建的默认工程
dependencies {
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
}
只发现了对于compose.ui以及compose.material组的依赖,并没有发现runtime和foundation的依赖,通过查阅资料发现,不同的分组里面是有相互的依赖关系存在
compose:runtime 最下层的是runtime组,提供了compose运行的相关基础支持,包括有状态的监听通知等
compose:ui 这一层提供了界面绘制的基础能力,包括测量、布局和绘制的实现
compose:animation 在UI的绘制的基础支持上,提供了动画相关的实现和api
compose:foundation 对于控件的基本实现,包括了不同类型组件,比如文字的基础测量规则等
compose:material 在foundation的基础上,提供了符合material的风格的控件支持
compose:material3 跟上面的material类型,就是更新的控件风格
从runtime->ui->animation->上层的风格控件,foundation就依赖了下层的基础支持,如果不使用material的风格,直接依赖foundation就行了,在各自basic的控件上进行自己的自定义样式开发,material3跟material选一个就行,他们两个类似平行的两个分支版本
上面的依赖没有提到compose:compiler,这个是编译期间起作用的,会配合kotlin的语法特性对我们写的各种compose函数进行解析编译
第二步:调整依赖版本
接下就可以把默认的版本调整为最新的版本如下
根据官网的最新稳定版,将compose的compiler的版本调整为1.4.3,并且将ui组合material组的版本也调整一下
第三步:让项目可以编译跑起来
由于使用了最新的版本,会遇到构建错误,根据错误进行调整
需要将compileSdk的版本调整为33,接下来又遇到了说compose版本跟kotlin版本不匹配的问题
通过去官网查看,需要编译的compose版本跟kotlin匹配
然后在project的build.gradle中将kotlin的编译插件版本改为1.8.10
第四步:成功运行默认工程
经过这一番折腾,工程终于跑起来了,看到了熟悉的默认工程
第六步:顺带看一下Compose的示例工程
项目跑起来了,回头去看MainActivity的代码,初步了解一下
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeLearnTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Greeting("Android")
}
}
}
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
ComposeLearnTheme {
Greeting("Android")
}
}
可以看到跟传统的xml方式,相同的都是在Activity的Oncreate()方法中进行操作,不一样的是,调用的方法不一样,之前是通过setContentView(@layoutId)方法传入一个xml的布局id,而compose中使用的是kotlin中的高阶函数进行操作,一层一层的包裹关系
示例代码中,虽然界面只显示了Hello Android!的文字,但是在compose层面,是由多层嵌套关系
ComposeLearnTheme |__Surface() |__Greeting() |__Text()
我们所说的composeUI控件其实是一个一个的compose函数,而嵌套关系的形成是通过kotlin的高级函数特性,可以把一个函数类型当成参数进行传递
那具体的类似Text()控件该怎么设置参数,除了Text()控件还有哪些其他的控件,在传统模式中由View和ViewGroup的概念,Compose中该怎么提现,这些问题在后面的文章中会进行展开分析,那么从这一篇文章开始,开始进入了compose的学习!!