Jetpack Compose与声明式UI(1)

导读大纲

- 1.1 什么是声明式UI?
- - 1.1.1 描述所需状态:
  - 1.1.2 UI就是一个带有状态的函数
  - 1.1.3 UI自动更新
  - 1.1.4 主要优势
- 1.2 声明式UI的优势
- 1.3 Jetpack Compose 简介
- - 1.3.1 主要功能和亮点
  - 1.3.2 为什么选择 Jetpack Compose?

1.1 什么是声明式UI?

在用户界面开发领域,声明式UI是对传统命令式方法的一种范式转换
- 就其核心而言,声明式UI编程围绕以下关键原则展开

1.1.1 描述所需状态:

声明式UI的精髓在于关注用户界面在任何特定时刻应该是什么样子
- 而不是纠缠于如何实现它的琐碎细节
不需要编写操作视图的步骤说明, 例如,找到这个按钮,更改文字,然后隐藏图片
- 而只需声明你希望用户界面处于的最终状态

1.1.2 UI就是一个带有状态的函数

在声明式范例中,UI就是维护其底层状态的直接函数
- 状态代表影响用户界面外观和行为的数据和变量
只要状态发生变化(例如,由于用户输入、数据获取或内部逻辑)
- 用户界面就会自动重新渲染,以准确反映新的状态

1.1.3 UI自动更新

声明式UI(declarative UIs)最强大的功能之一
- 就是能够在状态发生变化时自动更新
底层框架(这里是Jetpack Compose)会找出最有效的方法
- 将用户界面从当前状态过渡到新的预期状态
这样,您就无需手动跟踪和更新各个UI元素
- 从而大大降低出错和不一致的风险.

1.1.4 主要优势

声明式UI有很多好处
- 提高可读性和可维护性
  1. 声明式UI代码通常更简洁、更易理解、更不易出错.
- 减少模板
  1. 由于无需关注低级用户界面操作,因此代码编写量更少.
- 增强用户界面一致性
  1. 由于用户界面始终反映当前状态,因此不容易脱节
- 更简单的状态管理
  1. 框架可处理复杂的状态更新,让你更轻松地管理App的数据和逻辑
- 提高性能
  1. 该框架可优化用户界面更新,从而带来更流畅、响应更迅速的用户体验
让我们用一个简单的例子来说明（使用伪代码）
- <1> Imperative Approach (Traditional)
- <2> Declarative Approach (Jetpack Compose)
  1. MyUI 函数根据 buttonText 和 showImage 变量描述UI所需的状态
  2. 如果这些变量发生变化,Jetpack Compose会自动重新渲染UI
    - 使其与新的状态相匹配

================================================= <1>
// Find the button
Button myButton = findViewById(R.id.myButton);
// Change the button's text
myButton.setText("New Text");
// Hide an image view
ImageView myImage = findViewById(R.id.myImage);
myImage.setVisibility(View.GONE);
================================================ <2>
@Composable
fun MyUI(buttonText: String, showImage: Boolean) {Button(onClick = { /* ... */ }) {Text(text = buttonText)}if (showImage) {Image(painter = painterResource(id = R.drawable.my_image), contentDescription = "My Image")}
}

1.2 声明式UI的优势

以 Jetpack Compose 为代表的声明式UI与传统的命令式用户界面开发方法相比
- 提高代码的可读性和可维护性
  1. 声明式UI代码往往更简洁,也更容易理解
  2. 通过专注于描述所需的UI状态,而不是实现该状态的程序步骤
    - 开发人员可以编写出与UI视觉结构密切相关的代码
  3. 这使得原作者和其他开发人员更容易掌握代码的意图
    - 并放心地进行修改
- 减少模板代码
  1. 命令式用户界面代码通常包含大量模板
    - 用于查找视图、设置属性和处理更新的重复代码
  2. 声明式UI抽象掉大部分模板
    - 使开发人员能够更简洁地表达他们的UI逻辑
  3. 代码量的减少可以加快开发周期,减少错误发生的机会
- 增强用户界面的一致性和可预测性
  1. 在声明式UI中,用户界面总是反映应用程序的当前状态
  2. 状态和UI之间的这种紧密耦合确保用户界面的一致性和可预测性
    - 无论用户界面的状态如何变化
  3. 这对于复杂的用户界面尤为重要,因为在命令式方法中
    - 管理状态和UI元素之间的同步是一项挑战
- 更便捷的状态管理
  1. 声明式UI通常具有内置的状态管理机制
  2. Jetpack Compose 等框架提供的工具和模式
    - 可以帮助开发人员高效地管理UI组件的状态
  3. 这就简化UI与底层数据保持同步的过程,减轻开发人员的认知负担
    - 从而开发出更强大的应用程序.
- 通过优化UI更新提高性能
  1. 声明式UI框架通常采用智能算法来优化用户界面更新
  2. 当状态发生变化时,框架会分析新旧状态之间的差异
    - 并只更新UI的必要部分
  3. 这可以显著提高性能,尤其是在复杂和动态的用户界面中
    - 不必要的重绘可能会导致高昂的成本
现实世界的影响
- 声明式UI的优势在实际开发场景中转化为实实在在的优势
- 由于声明式代码固有的清晰度和结构,采用声明式框架的团队
  1. 往往能加快开发周期、减少错误数量并改善协作
- 此外,这些框架提供的性能优化还带来更流畅、响应更灵敏的用户体验

1.3 Jetpack Compose 简介

Jetpack Compose 是谷歌推出的一款革命性UI工具包
- 有望重塑 Android UI开发的格局
Jetpack Compose 采用现代原则设计,建立在 Kotlin 的坚实基础之上
- 为制作原生 Android UI提供一种全新而高效的方法

1.3.1 主要功能和亮点

声明式UI范例
- Jetpack Compose 全心全意地接受声明式UI范例
  1. 这是对传统命令式方法的根本性转变
- 在这种范例中,开发人员描述用户界面所需的状态
  1. 而不是明确指示如何实现它
- 这种声明性使代码更简洁、更易于推理、更不易出错
基于 Kotlin 构建
- Jetpack Compose 与 Kotlin 实现无缝集成
  1. Kotlin 是谷歌针对安卓开发推出的现代且极具表现力的编程语言
- 这种集成使开发人员能够利用 Kotlin 的强大功能
  1. 如 coroutines、扩展函数和 lambda 表达式
无缝集成
- 虽然 Jetpack Compose 代表一种全新的UI构建方式
  1. 但其设计旨在与现有的 Android 代码库无缝集成
- 开发人员可以在他们的项目中逐步采用 Compose
  1. 逐渐用composable函数取代传统的UI元素
- 这种灵活性使团队能够按照自己的节奏过渡到 Compose
  1. 而不会中断正在进行的开发工作
Material Design集成
- Jetpack Compose 与 Material Design 深度集成
- Material Design 是谷歌的综合设计系统
  1. 用于创建具有视觉吸引力且用户友好的界面
- Jetpack Compose提供丰富的预建 Material Design 组件和样式选项
  1. 使开发人员能够快速创建美观、一致的遵循现代设计原则的用户界面

1.3.2 为什么选择 Jetpack Compose?

Jetpack Compose 提供一系列引人注目的优势,使其成为安卓UI开发的不二之选
- 提高生产力
  1. Compose 的声明性与其直观的 Kotlin API 相结合
    - 大大提高开发人员的工作效率
  2. 由于减少模板代码,并专注于用户界面状态的描述
    - 开发人员可以快速迭代,更高效地实现他们的想法
- 增强可维护性
  1. 由于其声明式结构和复杂性的降低
    - Compose代码本身就具有更高的可维护性
  2. UI描述与底层实现细节的分离
    - 使得与UI相关的代码更容易理解、修改和调试.
- 现代 UI 开发
  1. Jetpack Compose 代表着 Android UI 开发的未来
  2. 通过采用 Compose,开发人员可以将自己置于 Android 技术的最前沿
    - 并获得创建尖端UI的最新工具和最佳实践
Jetpack Compose 不仅仅是一个新的UI工具包,它还是一种模式的转变
- 使开发人员能够以前所未有的轻松、表现力和效率创建 Android UI
无论是开始一个新项目,还是增强现有项目
- Jetpack Compose 都将为创建卓越的 Android 应用程序提供无限可能