Android Jetpack Compose（jetpack compose 自定义）

在2019年的Google I/O大会上，Google首次推出了Jetpack Compose，用于构建原生 Android 界面的新工具包。

Jetpack Compose提供一组功能强大且可组合的组件（Composable）、用于构建UI的声明性方法和直观的Kotlin API，帮助我们使用更少的代码，快速打造生动而精彩的应用。这是构建用户界面的全新视角。

在本教程中，您将学习如何使用Jetpack Compose构建功能强大的应用程序，如何使用控件、布局和状态转换，如何使用修改器（Modifier）等等！

在本教程中，您还能了解如何发送web请求（retrofit），如何解析Json（moshi），如何处理网络的异步行为（kotlin-coroutine-flow），最后您还能了解Coil图片加载库的使用。

为了在使用Jetpack Compose进行开发时获得最佳体验，您需要以下内容

Kotlin 1.5.10:由于Jetpack Compose依赖于特殊的Kotlin编译器，因此您需要Kotlin语言。

Kotlin既可以编写代码，也可以让编译器处理特殊的Jetpack Compose注释。

Android Studio Arctic Fox | 2020.3.1：Jetpack Compose 1.0正式版已经发布，您需要使用Android Studio的最新版本才能使用它。目前，Android Studio最新版本是Arctic Fox | 2020.3.1，代号北极狐。

Android 5.1+：项目的最低版本针对API 21，因此您需要运行API 21或更高版本的设备或模拟器。

Jetpack Compose 1.0：Jetpack Compose1.0正式版本已经发布，它代表了最新版本。

在新版本的Android Studio中，新建项目的时候新添加了Compose的模板，如下图：

我们选择Compose模板后，开发语言只能选择Kotlin，最小兼容版本是Android 5.0，如下图：

在新的Jetpack Compos项目中，仍然保留了Activity，不一样的地方是没有xml文件了。

在Jetpack Compos中使用可组合函数编写UI，与之前采用xml不同。

我们可以看到setContent()是ComponentActivity的扩展函数。扩展函数是向类添加附加功能的函数，无需更改其源代码。这意味着您可以在任何ComponentActivity或其子类（如AppCompativeActivity）上使用setContent（）。

调用setContent（）将指定的名为content的可组合函数设置为根视图，您可以向其中添加任意数量的元素。

您将在此容器中调用其余的可组合函数。注意内容也是如何用@Composable注释的。如下图：

您需要使用@Composable（一个特殊的注释类）注释函数或表达式。以这种方式注释的任何函数也称为可组合函数，因为您可以在其他此类函数中组合它。如下图：

@Preview将允许您在Android Studio中可视化此组件，而无需构建整个应用程序。如下图：

我们设置界面的背景颜色；如下图：

Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    modifier = Modifier
        .fillMaxSize()
        .background(
            brush = Brush.verticalGradient(
                colors = listOf(
                    color1,
                    color2
                )
            )
        )
) {
}

我们在Column布局中，background中我们将背景设置为颜色收尾渐变的线性效果。

首先，我们封装一个Text文本。

@Composable
fun ComposeText(text: String,textColor: Color = Color.White,fontSize: TextUnit = 10.sp){
    Text(
        text = text,
        color = textColor,
        fontWeight = FontWeight.Medium,
        fontSize = fontSize
    )
}

在上面的代码中我们导入了文本元素，设置了文本元素的样式。如下图：

要确保您导入的是androidx.compose.material包下面的，Compose提供了一种非常简洁且易于使用的方法，可以将字符串、可绘图项、颜色和其他资源导入到UI元素中。通常，要从资源中获取字符串，需要在给定上下文中调用getString()。因为您使用的是可组合函数，所以需要一个可组合函数来实现这一点。

幸运的是，有许多可组合的函数可以让您检索不同类型的资源。在本例中，将使用stringResource()，它获取要加载的字符串资源的ID。

Text(text = stringResource(id = R.string.app_name))

Image是用于在界面上展示图片的一个控件，它可以让我们的程序界面变得更加丰富多彩。

学习这个控件需要提前准备好一些图片，图片通常都是放在以“mipmap”开头的目录下的。

Image(painter = painterResource(id = R.mipmap.icon_qing), contentDescription = "")

Compose中有许多可组合的函数可以让您检索不同类型的资源。在本例中，将使用painterResource()，它获取要加载的图片资源的ID。如下图：

在Compose中有两种常用的线性布局，Column和Row

Row-水平布局方式，效果如下图：

Row(horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier
        .fillMaxWidth()
        .padding(8.dp)) {
    ComposeText(text = "东南风",textColor = colortext,fontSize = 12.sp)
    ComposeText(text = "2级",textColor = colortext,fontSize = 12.sp)
    ComposeText(text = "湿度",textColor = colortext,fontSize = 12.sp)
    ComposeText(text = "73%",textColor = colortext,fontSize = 12.sp)
}

使用Alignment.centervertical使子项垂直居中，使用Arrangement.SpaceBetween使每个子项具有相等的空间，而不计算第一个子对象之前或最后一个子对象之后的间距，用Modifier.fillMaxSize()使布局填充整个屏幕，用Modifier.padding()设置内边距。

Modifier.fillMaxSize很重要，因为否则，行将只占用绘制其子行所需的空间，因为其子行都没有定义权重。如果不填充屏幕大小，排列和对齐就无关紧要，所有项目都将一个接一个地放置在屏幕的左上方。

我们在Row中，放置了四个文本。

Column-垂直布局方式，效果如下图：

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    Image(painter = painterResource(id = R.mipmap.icon_qing), contentDescription = "")
    ComposeText(text = "27°", fontSize = 48.sp)
}

Column实现与Row相同，只是将排列和对齐方式从垂直交换到了水平。这是因为项目已垂直放置在列中，您需要定义它们的水平行为以及垂直间距。对于行，情况是相反的项目是水平放置的，行需要知道它们的垂直行为以及如何水平间隔。

在Column布局中，我们使用Spacer来添加控件之间的间隔。

Spacer(modifier = Modifier.height(2.dp))

Spacer表示空白布局的组件，其大小可以使用Modifier.width、Modifier.height和Modifier.size修改器定义。

下面我们学习列表的使用，Jetpack Compose中处理，这种在屏幕上显示大数据的两个主要组件是LazyColumn和LazyRow，这两个组件分别用于垂直和水平场景

RecyclerView使用LayoutManager设置其方向，但Jetpack Compose没有LayoutManager。相反，您可以使用两个不同的可组合函数来更改方向。composables的工作方式与RecyclerView几乎相同，但不需要回收。当您使用LazyColumn或LazyRow时，框架只包含它应该显示在屏幕上的元素。滚动时，将合成新元素，并处理旧元素。向后滚动时，将重新组合旧元素。Jetpack Compose不需要回收的ViewHolder池，因为它的重新编译可以更有效地处理缓存。

接下来，我们向应用程序中添加一个水平列表，来显示不同日期的天气信息，如下图：

首先，创建每个列表项的Composable，如下图：

@Composable
fun WeatherItems() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.padding(start = 8.dp, end = 10.dp)
    ) {
        ComposeText(text = "周日")
        Image(painter = painterResource(id = R.mipmap.icon_qing), contentDescription = "")
        ComposeText(text = "28°/25°")
    }
}

在这里，添加了一个LazyRow()使用包含数据的items属性设置items参数。items是对象列表。每个对象列表都包含一个显示的天气信息的列表。在后面的lambda中，为项目列表中的每个项目参数创建一个新的WeatherItems。此lambda表示将项中的每个对象转换为可组合元素列表的函数。通过这种方式，您可以调用任意数量的可组合函数来表示项目，并且可以根据项目类型、位置等添加特殊逻辑！我们的列表就创建好了

@Composable
fun WeatherDaysScreen() {
    itemData = listOf<String>("A", "A", "A", "A", "A")
    LazyRow {
        items(itemData) {
            WeatherItems()
        }
    }
}

如下图：我们的UI界面接开发完成了，接下来，我们将使用Retrofit调用API服务，来获取网络数据。