原创 _Android Jetpack Compose 最全上手指南

• 在Select a Project Template 窗口，选择Empty Compose Activity并且点击下一步

• 在Configure your project 窗口，做如下几步：

• a. 设置项目名称, 包名和保存位置
  

• b. 注意，在语言下来菜单中，Kotlin 是唯一一个可选项，因为 Jetpack Compose 只能用 Kotlin 来写的才能运行。

• c. Minimum API level 下拉菜单中，选择 21 或者更高

• 点击Finish
  

现在，你就可以使用 Jetpack Compose 来编写你的应用了。

3. Hello wold

在MainActivity.kt中添加如下代码：

class MainActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {Text("Hello, Android 技术杂货铺")}}}

Jetpack Compose 是围绕composable函数来构建的。这些函数使你可以通过描述应用程序的形状和数据依赖，以编程方式定义应用程序的 UI，而不是着眼于 UI 的构建过程。要创建composable函数，只需要在函数名前面加上一个@composable注解即可, 上面的Text就是一个composable函数。

4. 定义一个composable函数

一个composable函数只能在另一个composable函数的作用域里北调用，要使一个函数变为composable函数，只需在函数名前加上@composable注解，我们把上面的代码中，setContent中的部分移到外面，抽取到一个 composable 函数中，然后传递一个参数name 给 text元素。

class MainActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {Greeting("Android 技术杂货铺")}}}

@Composablefun Greeting(name: String) {Text(text = "Hello $name!")}

四、布局

UI 元素是分层级的，元素包含在其他元素中。在 Jetpack Compose 中，你可以通过从其他composable函数中调composable函数来构建 UI 层次结构。

在 Android 的xml布局中，如果要显示一个垂直结构的布局，最长用的就是LinearLayout, 设置android:orientation 值为vertical, 子元素就会垂直排列，那么，在 Jetpack Compose 中，如何来实现垂直布局呢？先添加几个Text来看一下。

1. 添加多个 Text

在上面的例子中，我们添加了一个Text显示文本，现在我们添加三个文本，代码如下：

class MainActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {NewsStory()}}}

@Composablefun NewsStory() {Text("我超??JetPack Compose 的！")Text("Android 技术杂货铺")Text("依然范特西")}

从上图可以看到，我们添加了 3 个文本，但是，由于我们还没有提供有关如何排列它们的任何信息，因此三个文本元素相互重叠绘制，使得文本不可读。

2. 使用 Column

要使重叠绘制的Text文本能够垂直排列，我们就需要使用到Column函数，写过 flutter 的同学看起来是不是很眼熟？是的，跟 flutter 里面的 Column Widget 名字和功能完全一样，甚至连他们的属性都一摸一样。

@Composablefun NewsStory() {Column { // 添加 Column，使布局垂直排列 Text("我超??JetPack Compose 的！")Text("Android 技术杂货铺")Text("依然范特西")}}

效果如下：

可以看到，前面重叠的布局，现在已经垂直排列了，但是，默认情况下，从左上角开始，一个接一个的排列，没有任何间距。接下来，我们给Column 设置一些样式。

3. 给Column添加样式

在调用Column（）时，可以传递参数给Column（）来配置Column的大小、位置以及设置子元素的排列方式。

@Composablefun NewsStory() {Column (crossAxisSize = LayoutSize.Expand,modifier = Spacing(16.dp)){ // 添加 Column，使布局垂直排列 Text("我超??JetPack Compose 的！")Text("Android 技术杂货铺")Text("依然范特西")}}

如上图所示，我们填充了 padding，其他效果几乎一摸一样， 上面代码中的设置属性解释如下：

• ?crossAxisSize: 指定Column组件（注：Compose中，所有的组件都是composable函数，文中的组件都是指代composable函数）在水平方向的大小，设置?crossAxisSize为LayoutSize.Expand即表示 Column 宽度应为其父组件允许的最大宽度，相当于传统布局中的match_parant ，还有一个值为LayoutSize.Wrap，看名字就知道，包裹内容，相当于传统布局中的wrap_content。

• modifier:使你可以进行其他格式更改。在这种情况下，我们将应用一个Spacing修改器，该设置将Cloumn与周围的视图产生间距。

4. 如何显示一张图片？

在原来的安卓原生布局中，显示图片有相应的控件ImageView,设置本地图片地址或者Bitmap就能展示，在 Jetpack Compose 中该如何显示图片呢？

我们先下载这张图片到本地，添加到资源管理器中，命名为header.png, 我们更改一下上面的NewsStory ()方法，先从资源文件夹获取图片 image，然后通过DrawImage()将图片绘制出来：

@Composablefun NewsStory() {// 获取图片 val image = +imageResource(R.mipmap.header)Column (crossAxisSize = LayoutSize.Expand,modifier = Spacing(16.dp)){ // 添加 Column，使布局垂直排列// 显示图片 DrawImage(image)

Text("我超??JetPack Compose 的！")Text("Android 技术杂货铺")Text("依然范特西")}}

可以看到，图片不会按正确的比列显示，接下来，我们来修复它。

图片已添加到布局中，但会展开以填充整个视图，并和文本是拼叠排列，文字显示在上层。要设置图形样式，请将其放入Container(又一个和 flutter 中一样的控件)

• Container: 一个通用的内容对象，用于保存和安排其他 UI 元素。然后，你可以将大小和位置的设置应用于容器。

@Composablefun NewsStory() {// 获取图片 val image = +imageResource(R.mipmap.header)Column (crossAxisSize = LayoutSize.Expand,modifier = Spacing(16.dp)){ // 添加 Column，使布局垂直排列// 放在容器中，设置大小 Container(expanded = true, height = 180.dp) {// 显示图片 DrawImage(image)}Text("我超??JetPack Compose 的！")Text("Android 技术杂货铺")Text("依然范特西")}}

• expanded : 指定 Container 的大小，默认是false（Container 的大小是子组件的大小，相当于wrap_content），如果将它设置为true，就指定 Container 的大小为父控件所允许的最大 size, 相当于match_parent。

• height : 设置 Container 容器的高度，height属性的优先级高于expanded,因此会覆盖expanded，如上面的例子，设置height为180dp,也就是容器宽为父控件宽度，高为180dp
  

5. 添加间距Spacer

我们看到，图片和文本之间没有间距，传统布局中，我们可以添加Margin属性，设置间距，在 Jetpack Compose 中，我们可以使用HeightSpacer()和WidthSpacer() 来设置垂直和水平间距

HeightSpacer(height = 20.dp) //设置垂直间距 20dpWidthSpacer(width = 20.dp) // 设置水平间距 20dp

在上面的例子中，我们来为图片和文本之间添加20dp的间距：

@Composablefun NewsStory() {// 获取图片 val image = +imageResource(R.mipmap.header)Column (crossAxisSize = LayoutSize.Expand,modifier = Spacing(16.dp)){ // 添加 Column，使布局垂直排列// 放在容器中，设置大小 Container(expanded = true, height = 180.dp) {// 显示图片 DrawImage(image)}

HeightSpacer(height = 20.dp) // 添加垂直方向间距 20dp

Text("我超??JetPack Compose 的！")Text("Android 技术杂货铺")Text("依然范特西")}}

五、使用 Material design 设计

Compose 旨在支持 Material Design 设计原则，许多组件都实现了 Material Design 设计，可以开箱即用，在这一节中，将使用一些 Material 小组件来对 app 进行样式设置

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

1. 添加Shape样式

Shape是 Material Design 系统中的支柱之一，我们来用clip函数对图片进行圆角裁剪。

@Composablefun NewsStory() {// 获取图片 val image = +imageResource(R.mipmap.header)Column (crossAxisSize = LayoutSize.Expand,modifier = Spacing(16.dp)){ // 添加 Column，使布局垂直排列// 放在容器中，设置大小 Container(expanded = true, height = 180.dp) {Clip(shape = RoundedCornerShape(10.dp)) {// 显示图片 DrawImage(image)}

}

HeightSpacer(height = 20.dp) // 添加垂直方向间距 20dp

Text("我超??JetPack Compose 的！")Text("Android 技术杂货铺")Text("依然范特西")}}

形状是不可见的，但是我们的图片已经被裁剪了成了设置的形状样式，因此如上图，图片已经有圆角了。

2. 给Text 添加一些样式

通过 Compose，可以轻松利用 Material Design 原则。将MaterialTheme（）应用于创建的组件

@Composablefun NewsStory() {// 获取图片 val image = +imageResource(R.mipmap.header)// 使用 Material Design 设计 MaterialTheme() {Column (crossAxisSize = LayoutSize.Expand,modifier = Spacing(16.dp)){ // 添加 Column，使布局垂直排列// 放在容器中，设置大小 Container(expanded = true, height = 180.dp) {Clip(shape = RoundedCornerShape(10.dp)) {// 显示图片 DrawImage(image)}

}

HeightSpacer(height = 20.dp) // 添加垂直方向间距 20dp

Text("我超??JetPack Compose 的！")Text("Android 技术杂货铺")Text("依然范特西")}

}}

如上面的代码，添加了MaterialTheme后，重新运行，效果没有任何变化，文本现在使用了 MaterialTheme 的默认文本样式。接下来，我们将特定的段落样式应用于每个文本元素。

@Composablefun NewsStory() {// 获取图片 val image = +imageResource(R.mipmap.header)// 使用 Material Design 设计 MaterialTheme() {Column (crossAxisSize = LayoutSize.Expand,modifier = Spacing(16.dp)){ // 添加 Column，使布局垂直排列// 放在容器中，设置大小 Container(expanded = true, height = 180.dp) {Clip(shape = RoundedCornerShape(10.dp)) {// 显示图片 DrawImage(image)}

}

HeightSpacer(height = 20.dp) // 添加垂直方向间距 20dp

Text("我超??JetPack Compose 的！", style = +themeTextStyle { h5 }) // 注意添加了 styleText("Android 技术杂货铺", style = +themeTextStyle { body1 }) // 注意添加了 styleText("依然范特西", style = +themeTextStyle { body2 }) // 注意添加了 style}}}

现在看看，我们的文本样式已经有变化了，标题有 6 中样式 h1-h6，其实HTML中的样式很像，内容文本有body1和body22 中样式。

Material 调色版使用了一些基本颜色，如果要强调文本，可以调整文本的不透明度:

Text("我超??JetPack Compose 的！", style = (+themeTextStyle { h5 }).withOpacity(0.87f))Text("Android 技术杂货铺", style = (+themeTextStyle { body1 }).withOpacity(0.87f))Text("依然范特西", style = (+themeTextStyle { body2 }).withOpacity(0.6f))

有些时候，标题很长，但是我们又不想长标题换行从而影响我们的 app UI ,因此，我们可以设置文本的最大显示行数,超过部分就截断。

如本例所示，我们设置显示最大行数为2，多于的部分截断处理：

Text("我超??JetPack Compose 的！写起来简单，复用性又强，可以抽取很多组件来复用，不用管理复杂的状态变更！",maxLines = 2, overflow = TextOverflow.Ellipsis,style = (+themeTextStyle { h5 }).withOpacity(0.87f))

可以看到，设置了maxLines 和overflow 之后，超出部分就截断处理了，不会影响到整个布局样式。