Jetpack Compose--声明式UI替代传统命令式UI的新产品

声明式用户界面(UI)已成为近年来最受关注的技术之一，不仅降低开发成本，提高开发人员的效率和技能，也使专注于具有类似代码的不同平台和设备变得更加简便。
命令式用户界面已经被Android开发人员用了很长时间，习惯了XML创建UI的方式。这种创建XML的方式是强大的，但在复杂的应用程序中却将失去优势。声明性用户界面已经广泛应用在许多开发框架中，如Flutter、React和SwiftUI。
谷歌在酝酿许久后，终于在2021年7月发布了适用于原生Android应用程序的Jetpack Compose正式版，而苹果早在2019年9月就交付了SwiftUI。

声明式UI与传统UI创建方式（命令式UI）的区别

从Java Swing开始，大多数UI都是以命令式编写的，Win32 到 Web 再到 Android 和 iOS。在Android开发中，通过XML创建布局需要添加id和各种属性，需要将XML中的UI与Activity或者Fragment中的逻辑连接进行视图设计与文本编辑。通过描述性的组件，当状态发生变化时，可以稍后使用set等方式来更新UI。传统UI创建方式也称命令式 UI ，就是命令框架根据定义的界面去绘制，状态变化时再设置最新的UI从而呈现出想要的UI效果，这就是命令式UI。
而React、Flutter、SwiftUI和Jetpack Compose采用了一种创新的替代策略。开发人员之需要确定用户界面应该引入什么，而不需要考虑UI元素应该如何开发。在代码中声明UI排列以及样式，传递给框架负责处理，不需要关心具体框架怎么处理，只需要关注业务逻辑，这就是声明性UI。

Jetpack Compose的优势

总结以下几点：

1. Jetpack Compose是Android UI构建的完整全新设计。它从一开始就致力于支持开发质量和速度。
2. Jetpack
   Compose中的UI是用Kotlin编写的，一些部分是用Java或XML开发的。无论我们创建应用程序的哪个部分，都可以利用Kotlin。
3. 将单向数据流（状态向下流动，事件向上）适应为可组合和可接受的状态。
4. 声明式UI创建不可变的UI对象，无需编写代码和同步。这种方法可以通过最小化错误和降低开发成本来升级整个类别。
5. Jetpack Compose支持设计组件、主题和动画。它允许开发人员快速创建漂亮的用户界面。
6. 一个未捆绑的工具包，因此它不像View Support库那样依赖平台版本。
7. Jetpack Compose采用MVVM（Model-View-ViewModel）架构从头开始设计。MVVM架构强制明确分离问题，并使代码更易于维护。
8. Jetpack Compose旨在提高开发人员的生产力。许多适用于Android的软件模块从开发人员工作负载中得到了重构。
9. 解决了UI是另一个可变元素的各种问题。
10. 它利用智能重组并实现单独的布局，消除了XML问题，如视图扩展。
11. Jetpack Compose研究了用户界面的工作原理，为常见场景进行了优化。他们正在使用数据结构和算法来使组合看起来更动态。

Jetpack Compose的缺点

1. 这种方法开发人员很少使用它，还需要更多时间来适应新的方式。
2. 属于开发市场的新产品，目前可用的工具较少。
3. 开发群体有限，绝大多数开发群体更喜欢稳定的带有XML的传统UI。
4. 需要以Kotlin进行开发，不支持完全用Java开发。正如Kotlin在逐步使用时，Jetpack
   Compose需要几年才能被大量使用。需要很长时间才能取代标准的XML创建UI方式。
5. 缺乏文档，许多问题可能未有人提出并解决。使用Jetpack Compose前期可能是不稳定的，但不久，将出现更多文档和开发人员贡献资料。

以上的缺点正随着2022 Google开发者大会慢慢祢补。

最新发布的Jetpack Compose

在最近的 2022 Google开发者大会，又对Compose进行了优化革新。
声明性用户界面是一个全球趋势。Web和Mobile都采用这种方法。谷歌已经澄清，Jetpack Compose是领先和最重要的优先事项之一。
提供一整套界面组件，帮助 现代化声明式编程方式来构建用户界面
Compose1.2带来的变化：

1. 嵌套滚动的可操作性CoordinatorLayout嵌套可滚动RecyclerView、LazyList等。
2. 可下载字体，不止Android平台自带的字体，可像Vue系统下载字体包，得益于共享字体缓存和动态字体分辨的功能。
3. 延迟布局，支持网格等高级布局和自定义布局，详见列表和网格。
4. 共享元素转换（实验性功能），通过动画引导用户注意力，详见动画。

在最新的Android Studio版本中增加Compose相关工具，可以实时编辑，重组调试，Compose动画预览等。
相关介绍请看视频：前面介绍Jetpack的新内容，11分40秒开始介绍Compose部分。
视频：Jetpack和Compose的新内容

Jetpack Compose 工具包使用

依赖项：

dependencies {
    implementation 'androidx.compose.ui:ui:1.2.1'
    // 工具支持（预览等）
    implementation 'androidx.compose.ui:ui-tooling:1.2.1'
    // 基础（边框、背景、框、图像、滚动、形状、动画等）
    implementation 'androidx.compose.foundation:foundation:1.2.1'
    // Material Design
    implementation 'androidx.compose.material:material:1.2.1'
    // Material design图标
    implementation 'androidx.compose.material:material-icons-core:1.2.1'
    implementation 'androidx.compose.material:material-icons-extended:1.2.1'
    // 与 Activity 集成
    implementation 'androidx.activity:activity-compose:1.5.1'
    // 与 ViewModel 集成
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'
    // 与 Livedata或 Rxjava2 的观察者模式集成
    implementation 'androidx.compose.runtime:runtime-livedata:1.2.1'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.2.1'

    // UI 测试
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.2.1'
}

可利用@Composable来进行界面组件开发，@Preview来预览UI：

@Preview(name = "light mode")
@Preview(
    uiMode = Configuration.UI_MODE_NIGHT_YES, showBackground = true, name = "dark mode"
)
@Composable
fun PreviewMessageCard() {
    MyApplicationTheme {
        Surface {
            MessageCard(msg = Message("Android", "Compose"))
        }
    }
}

@Composable
fun PreviewMessageCard() {
    MyApplicationTheme {
        Surface {
            MessageCard(msg = Message("Android", "Compose"))
        }
    }
}

@Composable
fun MessageCard(msg: Message) {
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(id = R.drawable.ic_launcher_background),
            contentDescription = "pic",
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape)
        )
        Spacer(modifier = Modifier.width(8.dp))
        var isExpanded by remember {
            mutableStateOf(false)
        }
        val surfaceColor by animateColorAsState(if (isExpanded) MaterialTheme.colors.primary else MaterialTheme.colors.surface)
        Column(modifier = Modifier.clickable { isExpanded = !isExpanded }) {
            Text(
                text = "hello ${msg.author}",
                color = MaterialTheme.colors.secondaryVariant,
                style = MaterialTheme.typography.subtitle2
            )
            Spacer(modifier = Modifier.height(4.dp))
            Surface(
                shape = MaterialTheme.shapes.medium,
                elevation = 1.dp,
                color = surfaceColor,
                modifier = Modifier
                    .animateContentSize()
                    .padding(1.dp)
            ) {
                Text(
                    text = "hello ${msg.name}",
                    modifier = Modifier.padding(all = 4.dp),
                    maxLines = if (isExpanded) Int.MAX_VALUE else 1,
                    style = MaterialTheme.typography.body2
                )
            }
        }
    }
}

可以在Split/Design界面预览UI效果:

具体开发见下面学习教程。

Compose库–Showkase

Showkase是一个基于注释处理器的 Android 库，可帮助您组织、发现、搜索和可视化 Jetpack Compose UI 元素。通过最少的配置，它会自动生成一个 UI 浏览器，为您组织您的设计系统。

github地址：airbnb/Showkase

学习Jetpack Compose

下面为Jetpack Compose的一些教程和视频：
视频：使用 Material 和 Compose 构建自适应应用
Jetpack Compose 路线图
将 Android Studio 与 Jetpack Compose 配合使用
Jetpack Compose界面应用开发
Jetpack Compose课程
Android 之 Compose 开发基础