原创_Android Jetpack Compose 最全上手指南

• b. 注意，在语言下来菜单中，Kotlin 是唯一一个可选项，因为Jetpack Compose 只能用Kotlin来写的才能运行。
• c. Minimum API level 下拉菜单中，选择21或者更高
• 4. 点击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技术杂货铺”)
}
}
}

@Composable
fun 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()
}
}
}

@Composable
fun NewsStory() {
Text(“我超❤️JetPack Compose的！”)
Text(“Android技术杂货铺”)
Text(“依然范特西”)
}

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

2. 使用Column

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

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

效果如下：

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

3. 给Column添加样式

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

@Composable
fun 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()将图片绘制出来：

@Composable
fun 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元素。然后，你可以将大小和位置的设置应用于容器。

@Composable
fun 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) //设置垂直间距20dp
WidthSpacer(width = 20.dp) // 设置水平间距20dp

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

@Composable
fun 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进行样式设置

1. 添加Shape样式

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

@Composable
fun 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（）应用于创建的组件

@Composable
fun 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的默认文本样式。接下来，我们将特定的段落样式应用于每个文本元素。

@Composable
fun 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 }) // 注意添加了style
Text(“Android技术杂货铺”, style = +themeTextStyle { body1 }) // 注意添加了style
Text(“依然范特西”, 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))

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
861678449)]

[外链图片转存中…(img-DPwKZnAN-1715861678449)]

[外链图片转存中…(img-mPtyCbXp-1715861678450)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！