Android Studio compose的简单使用与案例实现

Compose是Android团队与JetBrain大力推动的新一代UI框架，它能够简化安卓界面的开发，让本来繁琐的xml文件写法变为简便的kt文件写法。

其声明式 UI、更简单的自定义、实时且带交互的预览功能更是让安卓开发锦上添花

一.前置知识：Jetpack

1.什么是Jetpack？

Jetpack并不是一个框架或者组件，它是一套库、工具和指南的集合，可帮助开发者更轻松地编写优质应用。这些组件可帮助开发者遵循最佳做法、摆脱编写样板代码的工作并简化复杂任务，以便将精力集中放在所需的代码上。

2.为什么要使用Jetpack

1.替换以前的support库，提供一个更好，更加独立和稳健的兼容方案
2.官方实现了很多日常软件开发中需要用到的组件，消除重复样板代码
3.提高软件品质，核心库帮你绑定数据，管理生命周期和内容，让你专注在对自身业务重要的部分

3.常用的Jetpack库

二.正片：Compose入门

1.Compose的编程思想

Compose 是一个声明性界面框架。在过去的几年中，整个行业已开始转向声明性界面模型，该模型大大简化了与构建和更新界面关联的工程任务。该技术的工作原理是在概念上从头开始重新生成整个屏幕，然后仅执行必要的更改。此方法可避免手动更新有状态视图层次结构的复杂性。

简单的可组合函数

使用 Compose，可以通过定义一组接受数据而发出界面元素的可组合函数来构建界面。一个简单的示例是 Greeting widget，它接受 String 并发出一个显示问候消息的 Text widget。
此函数带有 @Composable 注释。所有可组合函数都必须带有此注释；此注释可告知 Compose 编译器：此函数旨在将数据转换为界面。（类似于Spring框架的@Component）

此函数接受数据。可组合函数可以接受一些参数，这些参数可让应用逻辑描述界面。在本例中，我们的 widget 接受一个 String，因此它可以按名称问候用户。

此函数可以在界面中显示文本。为此，它会调用 Text() 可组合函数，该函数实际上会创建文本界面元素。可组合函数通过调用其他可组合函数来发出界面层次结构。

此函数不会返回任何内容。发出界面的 Compose 函数不需要返回任何内容，因为它们描述所需的屏幕状态，而不是构造界面 widget。

2.创建一个Compose项目

1.如果您位于 Welcome to Android Studio 窗口中，请点击 Start a new Android Studio project。如果您已打开 Android Studio 项目，请从菜单栏中依次选择 File > New > New Project。

2.在 Select a Project Template 窗口中，选择 Empty Compose Activity，然后点击 Next。
3.在 Configure your project 窗口中，执行以下操作：

按照常规方法设置 Name、Package name 和 Save location。请注意，在 Language 下拉菜单中，Kotlin 是唯一可用的选项，因为 Jetpack Compose 仅适用于使用 Kotlin 编写的类。
在 Minimum API level dropdown 菜单中，*选择 API 级别 21 或更高级别*。
1
2

4.点击finish。

三.使用Compose完成“跑马灯”案例

1.构建项目

这一部分参照上文；

2.在主包下创建一个新的kt文件

我这里命名为“test”

3.构建MarqueeText方法

这是跑马灯实现的主要部分，在此部分来编辑跑马灯效果的静态参数与动态效果

引用Compose中定义的ui参数

说明：

循环滚动跑马灯Text控件

• text 文字内容
• modifier 控件修饰器
• textModifier 文字修饰器
• gradientEdgeColor 左右边界渐变透明色，默认白色渐变。
• color 文字颜色
• letterSpacing 字符间距
• textDecoration 文字装饰

创建控件方法

创建Text控件方法，相当于 @Composable fun createText(localModifier: Modifier)

对动态效果进行编码

var offset by remember {
    mutableStateOf(0) }
        val textLayoutInfoState = remember {
    mutableStateOf<TextLayoutInfo?>(null) }
        LaunchedEffect(textLayoutInfoState.value) {
   
            val textLayoutInfo = textLayoutInfoState.value ?: return@LaunchedEffect
            if (textLayoutInfo.textWidth <= textLayoutInfo
1
2
3
4
5
6
7