Compose学习(1)-入门篇

前言

常年混迹于各种开发群,现在的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个组

compose依赖组.png

由于独立更新,所以不同的组的版本号可能不一样

compose依赖版本.png

那么开发的时候怎么选择依赖哪些包,看了下新建的默认工程

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函数进行解析编译

第二步:调整依赖版本

接下就可以把默认的版本调整为最新的版本如下

调整依赖版本.png

根据官网的最新稳定版,将compose的compiler的版本调整为1.4.3,并且将ui组合material组的版本也调整一下

第三步:让项目可以编译跑起来

由于使用了最新的版本,会遇到构建错误,根据错误进行调整

sdk版本不匹配.png

需要将compileSdk的版本调整为33,接下来又遇到了说compose版本跟kotlin版本不匹配的问题

版本不匹配问题.jpeg

通过去官网查看,需要编译的compose版本跟kotlin匹配

compose跟kotlin版本匹配.png

然后在project的build.gradle中将kotlin的编译插件版本改为1.8.10

kotlin版本对应.png
第四步:成功运行默认工程

经过这一番折腾,工程终于跑起来了,看到了熟悉的默认工程

hello.png
第六步:顺带看一下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的学习!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容