第2课、布局
- 您将了解如何使用 Android Studio 布局编辑器创建线性布局和约束布局。您将创建应用来获取和显示用户输入、响应用户点按,以及更改视图的可见性和颜色。本节课还将介绍如何使用数据绑定消除对 findViewById() 方法的低效调用。
- JetPack Compose简介
- 将使用 Jetpack Compose 构建一个会在屏幕上显示生日祝福语的简单 Android 应用。
- 在您使用 Empty Activity 模板创建这个 Happy Birthday 应用时,Android Studio 会设置基本 Android 应用所需的各项资源,包括在屏幕上显示的 Hello Android! 消息。在本 Codelab 中,您将了解如何放置该消息、如何将其文本更改为生日祝福,以及如何添加额外的消息并为其设置格式。
- Jetpack Compose 是用于构建 Android 界面的新款工具包。Compose 使用更少的代码、强大的工具和直观的 Kotlin 功能,可以帮助您简化并加快 Android 界面开发。借助 Compose,您可以通过定义一组函数来构建界面,这些函数称为可组合函数,它们会接受数据并描述界面元素。
- 可组合函数带有 @Composable 注解。所有可组合函数都必须带有此注解。此注解可告知 Compose 编译器:此函数用于将数据转换为界面。
- 可组合函数可以调用其他可组合函数。
- 可以在 Android Studio 的 Design 窗格中预览应用的外观。无需将应用安装到 Android 设备或模拟器中
- 写参数时,要注意顺序,有的时候顺序不对,参数也会报错,如上面的两个参数,颠倒顺序就会报错。
- 上面想法是错误的,应该是不要忘记加 逗号 !!!
- 请注意更新后的字体大小预览。消息重叠的原因是您需要指定行高。
- Compose 中的 3 个基本标准布局元素是 Column、Row 和 Box 可组合项
- 最好从父级可组合项传递修饰符属性和修饰符。
- 依次点击 + (Add resources to the module) > Import Drawables。来导入图片
- 可以使用
Image
可组合项来显示图片。 -
Jetpack Compose 可以访问您的 Android 项目中定义的资源。可以使用在项目的
R
类中生成的资源 ID 访问资源。R
类是 Android 自动生成的类,其中包含了项目中所有资源的 ID。在大多数情况下,资源 ID 与文件名相同。 -
将让图片全屏显示,使应用看起来更美观。为此,您需要使用
ContentScale
形参。 -
内边距修饰符 (
Modifier.padding
) 在Text
可组合项的周围添加空间 -
strings.xml
文件包含用户将在应用中看到的所有字符串。请注意,应用的名称也是一个字符串资源。通过将所有字符串集中放置在一处,您可以更轻松地翻译应用中的所有文本,同时也能更轻松地在应用的不同部分重复使用字符串。 -
Compose 提供
align
修饰符来单独控制子级可组合项的位置,使其不受父布局强制执行的对齐布局规则的约束 -
完成了以下任务:在 Happy Birthday 应用中添加图片,使用修饰符对文本进行对齐,遵循无障碍功能指南,以及让应用更易于翻译成其他语言
-
-
设置全部内容垂直水平对齐,就用一个容器装载他们,然后再在容器上设置。
-
modifier = Modifier 是 Kotlin 语言中 Jetpack Compose 框架的一部分,用于修改和定义组件的布局和行为。下面是对指定部分的解释:
-
Modifier.fillMaxWidth(): 这个函数调用告诉 Compose 布局系统,组件应该占据其父组件的全部宽度。换句话说,组件的宽度将与其父组件的宽度相等。
-
Modifier.fillMaxHeight(): 类似地,这个函数调用指示组件应该占据其父组件的全部高度。这意味着组件的高度将与其父组件的高度相等。
-
verticalArrangement = Arrangement.Center: 这个属性设置组件在垂直方向上的排列方式。Arrangement.Center 表示组件将在垂直方向上居中对齐。
-
horizontalAlignment = Alignment.CenterHorizontally: 这个属性设置组件在水平方向上的对齐方式。Alignment.CenterHorizontally 表示组件将在水平方向上居中对齐。
-
注释掉一部分代码的示意图
-
弄出来四个象限
- weight(1f) 是 Modifier 类的一个扩展函数,它允许你在 Row 或 Column 布局中分配权重给子组件。权重决定了子组件在可用空间中所占的比例。
- 1f 是一个浮点数,表示权重值。在这个例子中,1f 表示子组件(比如 ComposableInfoCard)将占据与其相邻组件相等的空间比例。如果一个 Row 或 Column 中的所有子组件都设置了 weight(1f),那么它们将平均分配可用空间。
- 效果图如下: