Android学习笔记 68. B部分：布局编辑器

Android学习笔记

Android 开发者基础知识 (Java) —— Google Developers 培训团队

第1单元 入门

第1课 构建首个应用

68. B部分：布局编辑器

你会做什么

• 为水平显示方向创建布局变体。
• 为平板电脑和更大的显示器创建布局变体。
• 修改布局以向 UI 元素添加约束。
• 使用ConstraintLayout基线约束将元素与文本对齐。
• 使用ConstraintLayout打包和对齐按钮来对齐元素。
• 更改要使用的布局LinearLayout。
• 在 a 中定位元素LinearLayout。
• 更改要使用的布局RelativeLayout。
• 重新排列主布局中的视图以相互关联。

68.1 创建布局变体

1. 选择设计表面：选择设计以显示布局的颜色预览，或选择蓝图以仅显示每个 UI 元素的轮廓。要并排查看两个窗格，请选择Design + Blueprint。
2. 编辑器中的方向：选择纵向或横向以垂直或水平方向显示预览。这对于预览布局很有用，而无需在模拟器或设备上运行应用程序。要创建替代布局，请选择创建横向变化或其他变化。
3. 编辑器中的设备：选择设备类型（手机/平板电脑、Android TV 或 Android Wear）。
4. 编辑器中的 API 版本：选择用于显示预览的 Android 版本。
5. 编辑器中的主题：选择要应用于预览的主题（例如AppTheme ）。
6. 编辑器中的区域设置：选择预览的语言和区域设置。此列表仅显示字符串资源中可用的语言。

1. Show：选择Show Constraints和Show Margins以在预览中显示它们，或停止显示它们。

2. 自动连接：启用或禁用自动连接。启用自动连接后，您可以将任何元素（例如 a Button）拖动到布局的任何部分以生成针对父布局的约束。

3. 清除所有约束：清除整个布局中的所有约束。

4. 推断约束：通过推断创建约束。

5. 默认边距：设置默认边距。

6. 打包：打包或展开选定的元素。

7. 对齐：对齐选定的元素。

8. 指南：添加垂直或水平指南。

9. 缩放/平移控件：放大或缩小。

10. 水平方向预览布局

11. 为水平方向创建布局变体

12. 预览不同的设备

13. 改变水平方向布局

14. 为平板电脑创建布局变体

15. 更改平板电脑的布局变体

16. 使用基线约束

17. 水平展开按钮

68.2 将布局改为LinearLayout

LinearLayout是将ViewGroup其视图集合排列在水平或垂直行中的一种。LinearLayout是最常见的布局之一，因为它简单快速。它通常在另一个视图组中用于水平或垂直排列 UI 元素。

LinearLayout必须具有的属性：

• layout_width
• layout_height
• orientation

layout_width和layout_height可以采用以下值之一：

• match_parent：扩展视图以按宽度或高度填充其父视图。当LinearLayout是根视图时，它会扩展到屏幕的大小（父视图）。
• wrap_content：缩小视图尺寸，使视图足够大以包含其内容。如果没有内容，视图将变为不可见。
• 固定 dp 数（与密度无关的像素）：指定固定大小，针对设备的屏幕密度进行调整。例如，16dp表示 16 个与密度无关的像素。

orientation可以是：

• horizontal**：**视图从左到右排列。
• vertical**：**视图从上到下排列。

1. 将根视图改为LinearLayout

2. 更改 LinearLayout 的元素属性

3. 改变LinearLayout中元素的位置

4. 给TextView元素添加权重

68.3 将布局改为RelativeLayout

RelativeLayout是视图分组，其中每个视图相对于组内的其他视图进行定位和对齐。【相对布局】

1. 将LinearLayout改为RelativeLayout
2. 重新排列相对布局中的视图

68.4 小结

• 使用ConstraintLayout【约束布局】
  • ConstraintLayout要使用根清除布局中的所有约束，请单击工具栏中的Clear All Constraints [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E0e1zIqB-1660608763513)(https://developer.android.com/static/codelabs/android-training-layout-editor-part-b/img/59d14927db41ffe.png)]按钮。
  • 您可以将一个包含文本的 UI 元素（例如 aTextView或Button）与另一个包含文本的 UI 元素对齐。基线约束允许您约束元素以使文本基线匹配。
  • 要创建基线约束，请将指针悬停在 UI 元素上，直到基线约束按钮 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h6TfLxqu-1660608763514)(https://developer.android.com/static/codelabs/android-training-layout-editor-part-b/img/66d318e4ec85eea.png)]出现在元素下方。
  • 工具栏中的打包按钮 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kRudLzqV-1660608763514)(https://developer.android.com/static/codelabs/android-training-layout-editor-part-b/img/71be4cb2e6e1269e.png)]提供用于打包或扩展选定 UI 元素的选项。您可以使用它Button在布局中水平排列元素。
• 使用LinearLayout【线性布局】
  • LinearLayout是将 ViewGroup其视图集合排列在水平或垂直行中的一种。
  • ALinearLayout必须具有layout_width、layout_height和orientation属性。
  • match_parentfor layout_widthor layout_height：扩展View以按宽度或高度填充其父级。当LinearLayout是 rootView时，它会扩展到屏幕的大小（父级View）。
  • Wrap_contentfor layout_widthor layout_height: 缩小尺寸，使其View足够大以包含其内容。如果没有内容，则View变得不可见。
  • Fixed number of dp ( density-independent pixels ) for layout_widthor layout_height：指定一个固定大小，根据设备的屏幕密度进行调整。例如，16dp表示 16 个与密度无关的像素。
  • orientationfor aLinearLayout可以是horizontal从左到右排列元素，也可以是vertical从上到下排列元素。
  • 指定gravity和weight属性使您可以额外控制在LinearLayout.
  • 该属性指定 a 的内容在其自身android:gravity中的对齐方式。View``View
  • 该android:layout_weight属性指示 中的额外空间有多少LinearLayout将分配给View. 如果只有一个View具有此属性，它将获得所有额外的屏幕空间。对于多个View元素，空间按比例分配。例如，如果两个Button元素的权重分别为 1 和TextView2，总计 4，则Button元素分别获得 ¼ 空间和TextView一半空间。
• 使用RelativeLayout【相对布局】
  • RelativeLayout是ViewGroup其中每个视图相对于组内的其他视图进行定位和对齐的情况。
  • 用于android:layout_alignParentTop将 对齐View到父级的顶部。
  • 用于android:layout_alignParentLeft将 对齐View到父级的左侧。
  • 用于android:layout_alignParentStart使View匹配的起始边缘成为父对象的起始边缘。如果您希望您的应用程序在使用不同语言或区域设置首选项的设备上运行，此属性很有用。如果首选项是从左到右，则起点是屏幕的左边缘；如果首选项是从右到左，则起点是屏幕的右边缘。