Jetpack Compose入门篇-简约而不简单

好文推荐：
作者：QiShare

Compose简介

Jetpack Compose：利用声明式编程构建Android原生界面（UI）的工具包

优势

更少的代码、代码量锐减
强大的工具/组件支持
直观的 Kotlin API
简单易用

Compose 编程思想

声明性编程范式：声明性的函数构建一个简单的界面组件，无需修改任何 XML 布局，也不需要使用布局编辑器，只需要调用 Jetpack Compose 函数来声明想要的元素，Compose 编译器即会完成后面的所有工作

举个栗子：简单的可组合函数

class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {Text("Hello world!")}}
}

动态：组合函数是用 Kotlin 而不是 XML 编写，见上$name 的传入

需要注意的事项：

可组合函数可以按任何顺序执行

//可以按任何顺序进行,不能让 StartScreen() 设置某个全局变量（附带效应）并让 MiddleScreen() 利用这项更改。相反，其中每个函数都需要保持独立。
@Composable
fun ButtonRow() {MyFancyNavigation {StartScreen()MiddleScreen()EndScreen()}
}

可组合函数可以并行执行

Compose 可以通过并行运行可组合函数来优化重组，这样一来，Compose 就可以利用多个核心，并以较低的优先级运行可组合函数（不在屏幕上）
这种优化意味着，可组合函数可能会在后台线程池中执行，如果某个可组合函数对 ViewModel 调用一个函数，则 Compose 可能会同时从多个线程调用该函数
调用某个可组合函数时，调用可能发生在与调用方不同的线程上，这意味着，应避免使用修改可组合 lambda 中的变量的代码，既因为此类代码并非线程安全代码，又因为它是可组合 lambda 不允许的附带效应

//此代码没有附带效应
@Composable
fun ListComposable(myList: List<String>) {Row(horizontalArrangement = Arrangement.SpaceBetween) {Column {for (item in myList) {Text("Item: $item")}}Text("Count: ${myList.size}")}
}

//如果函数写入局部变量，则这并非线程安全或正确的代码：
@Composable
@Deprecated("Example with bug 有问题的代码")
fun ListWithBug(myList: List<String>) {var items = 0Row(horizontalArrangement = Arrangement.SpaceBetween) {Column {for (item in myList) {Text("Item: $item")items++ // Avoid! Side-effect of the column recomposing.}}Text("Count: $items")}
}
//每次重组时，都会修改 items。这可以是动画的每一帧，或是在列表更新时。但不管怎样，界面都会显示错误的项数。因此，Compose 不支持这样的写入操作；通过禁止此类写入操作，我们允许框架更改线程以执行可组合 lambda。

重组会跳过尽可能多的可组合函数和 lambda
重组是乐观的操作，可能会被取消
可组合函数可能会像动画的每一帧一样非常频繁地运行

环境准备

已了解的同学，可直接跳过
需要升级到Arctic Fox 2020-3-1 版本以上，此版本以下Android studio 无此支持-【下载最新Android studio】

我们注意到此项目只支持Kotlin 最低sdk 版本为21，Android 5.0

Gradle Compose相关依赖

implementation "androidx.compose.ui:ui:$compose_version"implementation "androidx.compose.material:material:$compose_version"implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'implementation 'androidx.activity:activity-compose:1.3.0-alpha06'testImplementation 'junit:junit:4.+'androidTestImplementation 'androidx.test.ext:junit:1.1.3'androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"

 kotlinOptions {jvmTarget = '1.8'useIR = true//在 Gradle 构建脚本中指定额外编译器选项即可启用新的 JVM IR 后端}
composeOptions {kotlinCompilerExtensionVersion compose_versionkotlinCompilerVersion '1.5.10'}
buildFeatures {compose true}
packagingOptions {resources {excludes += '/META-INF/{AL2.0,LGPL2.1}'}}

由于新版本邀请java 11，安装 java 8 环境的需要以下修复

Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8.You can try some of the following options:- changing the IDE settings.- changing the JAVA_HOME environment variable.- changing `org.gradle.java.home` in `gradle.properties`.

org.gradle.java.home=/Library/Java/JavaVirtualMachines/jdk-11.0.11.jdk/Contents/Home

@Preview起作用，环境正常

布局

Android 传统从xml-状态的变更关系，程序员需要大量的代码维护Ui 界面，以达到界面状态的正确性，费时费力，即便是借助MVVM架构，一样需要维护状态，因为布局只有一套

声明式与传统XML 实现区别，Compose 声明式布局，是直接重建了UI，所以不会有状态问题

Text：Compose 提供了基础的 BasicText 和 BasicTextField，它们是用于显示文字以及处理用户输入的主要函数。Compose 还提供了更高级的 Text 和 TextField
```
Text("Hello World")
```

重组Text->Button

@Composable
fun ClickCounter(clicks: Int, onClick: () -> Unit) {Button(onClick = onClick) {Text("I've been clicked $clicks times")}
}

Modifier可以修改控件的位置、高度、边距、对齐方式等等

//`padding` 设置各个UI的padding。padding的重载的方法一共有四个。
Modifier.padding(10.dp) // 给上下左右设置成同一个值
Modifier.padding(10.dp, 11.dp, 12.dp, 13.dp) // 分别为上下左右设值
Modifier.padding(10.dp, 11.dp) // 分别为上下和左右设值
Modifier.padding(InnerPadding(10.dp, 11.dp, 12.dp, 13.dp))// 分别为上下左右设值
//这里设置的值必须为`Dp`，`Compose`为我们在Int中扩展了一个方法`dp`，帮我们转换成`Dp`。
//`plus` 可以把其他的Modifier加入到当前的Modifier中。
Modifier.plus(otherModifier) // 把otherModifier的信息加入到现有的modifier中
//`fillMaxHeight`,`fillMaxWidth`,`fillMaxSize` 类似于`match_parent`,填充整个父layout。
Modifier.fillMaxHeight() // 填充整个高度
//`width`,`heigh`,`size` 设置Content的宽度和高度。
Modifier.width(2.dp) // 设置宽度
Modifier.height(3.dp)  // 设置高度
Modifier.size(4.dp, 5.dp) // 设置高度和宽度
//`widthIn`, `heightIn`, `sizeIn` 设置Content的宽度和高度的最大值和最小值。
Modifier.widthIn(2.dp) // 设置最大宽度
Modifier.heightIn(3.dp) // 设置最大高度
Modifier.sizeIn(4.dp, 5.dp, 6.dp, 7.dp) // 设置最大最小的宽度和高度
//`gravity` 在`Column`中元素的位置。
Modifier.gravity(Alignment.CenterHorizontally) // 横向居中
Modifier.gravity(Alignment.Start) // 横向居左
Modifier.gravity(Alignment.End) // 横向居右
//`rtl`, `ltr` 开始布局UI的方向。
Modifier.rtl  // 从右到左
//更多Modifier学习：https://developer.android.com/jetpack/compose/modifiers-list

Column 线性布局≈ Android LinearLayout-VERTICAL
Row 水平布局≈Android LinearLayout-HORIZONTAL
Box帧布局≈Android FrameLayout，可将一个元素放在另一个元素上，如需在 Row 中设置子项的位置，请设置 horizontalArrangement 和 verticalAlignment 参数。对于 Column，请设置 verticalArrangement 和 horizontalAlignment 参数

相对布局，需要引入 ConstraintLayout

引入

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-beta02"

constraintlayout-compose用法流程
完整用法示例

@Composable
fun testConstraintLayout() {ConstraintLayout() {//通过createRefs创建三个引用val (imageRef, nameRef) = createRefs()Image(painter = painterResource(id = R.mipmap.test),contentDescription = "图",modifier = Modifier.constrainAs(imageRef) {//通过constrainAs将Image与imageRef绑定,并增加约束top.linkTo(parent.top)start.linkTo(parent.start)bottom.linkTo(parent.bottom)}.size(100.dp).clip(shape = RoundedCornerShape(5)),contentScale = ContentScale.Crop)Text(text = "名称",modifier = Modifier.constrainAs(nameRef) {top.linkTo(imageRef.top, 2.dp)start.linkTo(imageRef.end, 12.dp)end.linkTo(parent.end)width = Dimension.fillToConstraints}.fillMaxWidth(),fontSize = 18.sp,maxLines = 1,textAlign = TextAlign.Left,overflow = TextOverflow.Ellipsis,)}
}

列表

可以滚动的布局

//我们可以使用 verticalScroll() 修饰符使 Column 可滚动
Column (modifier = Modifier.verticalScroll(rememberScrollState())){messages.forEach { message ->MessageRow(message)}}

但以上布局并无法实现重用，可能导致性能问题，下面介绍我们重点布局，列表

LazyColumn/LazyRow==RecylerView/listView 列表布局，解决了滚动时的性能问题，LazyColumn 和 LazyRow 之间的区别就在于它们的列表项布局和滚动方向不同

内边距

LazyColumn(contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
) {// ...
}

item间距

LazyColumn(verticalArrangement = Arrangement.spacedBy(4.dp),
) {// ...
}

浮动列表的浮动标题，使用 LazyColumn 实现粘性标题，可以使用实验性 stickyHeader()函数

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ListWithHeader(items: List<Item>) {LazyColumn {stickyHeader {Header()}items(items) { item ->ItemRow(item)}}
}

网格布局LazyVerticalGrid

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun PhotoGrid(photos: List<Photo>) {LazyVerticalGrid(cells = GridCells.Adaptive(minSize = 128.dp)) {items(photos) { photo ->PhotoItem(photo)}}
}

自定义布局

通过重组基础布局实现

Canvas

Canvas(modifier = Modifier.fillMaxSize()) {val canvasWidth = size.widthval canvasHeight = size.heightdrawCircle(color = Color.Blue,center = Offset(x = canvasWidth / 2, y = canvasHeight / 2),radius = size.minDimension / 4)
}
//drawCircle 画圆
//drawRectangle 画矩形
//drawLine //画线

动画

动画Api 选择

其他库支持

导航栏

implementation("androidx.navigation:navigation-compose:2.4.0-alpha05")

总结

Compose总体来说，对于Android-Native布局实现上更加简单高效，值得大家一学
Compose 写法与Flutter-Dart 有高度类似的情况，后面我们可以做一篇与Flutter-Dart 语音写布局的一些对比

Jetpack Compose入门篇-简约而不简单相关推荐

Jetpack Compose入门详解（实时更新）
Jetpack Compose入门详解前排提醒前言(Compose是什么) 1.实战准备一.优势与缺点二.前四课三.标准布局组件 1.Column 2.Row 3.Box 四.xml和com ...
Android原生UI开发框架《Jetpack Compose入门到精通》最全上手指南
前言在去年的Google/IO大会上,亮相了一个全新的 Android 原生 UI 开发框架-Jetpack Compose, 与苹果的SwiftIUI一样,Jetpack Compose是一个声明 ...
告别XML，Android新声明式UI框架《Jetpack Compose入门到精通》最全开发指南
什么是Jetpack Compose? Jetpack Compose是Android的新声明式UI框架.长期以来, Android 开发人员习惯于使用带有状态视图的xml编写UI,这些状态视图通过逐 ...
猿编程python代码_程序猿编程课堂 Python学习之入门篇3：简单的数据类型
1. 什么是数据类型? 我们知道编程就是编写程序解决某个问题,而任何能使用编程来解决的问题都是能够提取或者转换出相应的数据,只是数据的表达形式是不一样的,而这表达形式就是数据类型. 比如,数学中的数字 ...
Jetpack Compose入门
简介 Jetpack Compose是用于构建原生Android界面的新工具包.它是一种声明式的UI布局,其官方声称可简化并加快Android上的界面开发,使用更少的代码.强大的工具和直观的Kotli ...
【简约而不简单：神级代码的小秘密】| 第二章栈
2.1 什么是栈有一种艺术叫做沙画.把沙子一层一层的叠在一起,从而形成美丽的图案.从图中可以看到,最底层的深蓝色沙子是最先放进去的. 继续放沙子,我们可以看到,最先放入的蓝色沙子在底部,而最后放入的 ...
分布式锁主动续期的入门级实现-自省 | 简约而不简单
一.背景如果某个客户端获得锁之后处理时间超过最大约定时间,或者持锁期间内发生了故障导致无法主动释放锁,其持有的锁也能够被其他机制正确释放,并保证后续其它客户端也能加锁,整个处理流程继续正常执行. 简 ...
简欧设计简约而不简单
客厅设计简单大气,水晶吊灯高级大气,吊顶搭配暖色灯光温馨又舒适,理石上墙高级恢弘,更显优雅奢华,墙上装饰恢弘有格调,给人眼前一亮的感觉.灰色地毯防护地板,更加高级,为了避免颜色过于单一,应用了红色座椅 ...
[笨木头FireFly01]入门篇1·最简单的服务端和客户端连接
最近一直在写游戏,几乎没有来写教程了,打算放慢一下脚步,学学新东西. 那为嘛我要学FireFly呢? 之前我自己写了一个网络游戏,服务端和客户端都自己写,虽然运行起来没什么大碍,但毕竟我对服务端没什么 ...