Register now for Android Dev Summit 2019!

构建简单的界面

在本课中,您将使用 Android Studio 布局编辑器创建一个布局,其中包含一个文本框和一个按钮。在下一课中,您会将该文本框的内容发送到另一个 Activity,让应用响应按钮点按操作。

图 1. 最终布局的屏幕截图

Android 应用的界面使用布局(ViewGroup 对象)和微件(View 对象)的层次结构构建而成。布局是一种容器,用于控制其子视图在屏幕上的放置方式。微件是界面组件,如按钮和文本框。

图 2. ViewGroup 对象如何在布局中形成分支并包含 View 对象的图解

Android 提供了 ViewGroupView 类的 XML 词汇表,因此界面的大部分内容都在 XML 文件中定义。不过,本课将向您介绍如何使用 Android Studio 的布局编辑器创建布局,而不是教您编写一些 XML 代码。在布局编辑器中,只需拖放视图即可构建布局,操作变得非常简单。

本课要求您使用 Android Studio 3.0 或更高版本,并且已按照上一课的说明创建 Android 项目

打开布局编辑器

首先,请按照以下步骤设置您的工作区:

  1. 在 Android Studio 的“Project”窗口中,打开 app > res > layout > activity_main.xml
  2. 要给布局编辑器留出更多空间,请隐藏 Project 窗口,方法是依次选择 View > Tool Windows > Project(或点击 Android Studio 左侧的 Project 图标 )。
  3. 如果您的编辑器显示 XML 源代码,请点击窗口底部的 Design 标签。
  4. 点击 Select Design Surface 图标 ,然后选择 Blueprint
  5. 点击布局编辑器工具栏中的 Show 图标 ,并确保选中 Show Constraints
  6. 确保 Autoconnect 处于关闭状态。工具栏中的提示应为 Turn On Autoconnect 图标 (因为它现在处于关闭状态)。
  7. 点击工具栏中的 Default Margins 图标 ,然后选择 16(您稍后仍然可以调整每个视图的外边距)。
  8. 点击工具栏中的 Device for Preview 图标 ,然后选择 5.5, 1440 × 2560, 560dpi (Pixel XL)

您的编辑器现在应如图 3 所示。

图 3. 显示 activity_main.xml 的布局编辑器

如需了解详情,请参阅布局编辑器简介

左下方的 Component Tree 窗口显示布局的视图层次结构。在本例中,根视图是 ConstraintLayout,它仅包含一个 TextView 对象。

ConstraintLayout 是一种布局,它根据同级视图和父布局的约束条件来定义每个视图的位置。这样一来,使用扁平视图层次结构既可以创建简单布局,又可以创建复杂布局。也就是说,不再需要嵌套布局(即布局内的布局,如图 2 中所示),也就不会增加绘制界面所需的时间了。

图 4. ConstraintLayout 内放有两个视图的图解

例如,您可以声明以下布局(在图 4 中):

  • 视图 A 距离父布局顶部 16dp。
  • 视图 A 距离父布局左侧 16dp。
  • 视图 B 距离视图 A 右侧 16dp。
  • 视图 B 与视图 A 顶部对齐。

在后面几部分中,您将构建一个与此布局类似的布局。

添加文本框

图 5. 按照到父布局顶部和左侧的距离来约束文本框

  1. 首先,您需要移除布局中已有的内容。因此,请点击 Component Tree 窗口中的 TextView,然后按 Delete 键。
  2. Palette 中,点击 Text 以显示可用的文本控件。
  3. Plain Text 拖动到设计编辑器中,并将其放在靠近布局顶部的位置。这是一个接受纯文本输入的 EditText 微件。
  4. 点击设计编辑器中的视图。现在,您可以在每个角上看到大小调整手柄(正方形),并在每个边上看到约束锚点(圆形)。

    为了更好地控制,您可能需要使用布局编辑器工具栏中的按钮放大编辑器。

  5. 点击并按住顶边上的锚点,将其向上拖动,直至其贴靠到布局顶部,然后将其释放。这是一个约束条件,它指定视图应距离布局顶部 16dp(因为您将默认外边距设为 16dp)。
  6. 类似地,从视图左侧到布局左侧创建一个约束条件。

结果应如图 5 中的屏幕截图所示。

添加按钮

图 6. 按照到文本框右侧的距离以及文本框基线来约束按钮

  1. Palette 中,点击 Buttons
  2. Button 拖动到设计编辑器中,并将其放在靠近右侧的位置。
  3. 创建一个从按钮左侧到文本框右侧的约束条件。
  4. 要按水平对齐约束视图,您需要创建一个文本基线之间的约束条件。因此,请点击按钮,然后点击 Edit Baseline 图标 ,该图标显示在设计编辑器中选定视图的正下方。基线锚点显示在按钮内部。点击并按住此锚点,然后将其拖动到文本框中显示的基线锚点。

结果应如图 6 中的屏幕截图所示。

注意:您还可以使用顶边或底边创建水平对齐,但按钮的图片周围有内边距,因此如果您以这种方式对齐这些视图,那么它们看上去是没有对齐的。

更改界面字符串

要预览界面,请点击工具栏中的 Select Design Surface 图标 ,然后选择 Design。请注意,文本输入框中预填充有“Name”,按钮标有“Button”。因此,现在您需要更改这些字符串。

  1. 打开 Project 窗口,然后打开 app > res > values > strings.xml

    这是一个字符串资源文件,您应在此文件中指定所有界面字符串。这样做可让您在一个位置管理所有界面字符串,从而让字符串的查找、更新和本地化变得更加容易(与对布局或应用代码中的字符串进行硬编码相比)。

  2. 点击编辑器窗口顶部的 Open editor。此时将打开翻译编辑器,它提供了一个简单的界面,用来添加和修改默认字符串,并且有助于让所有已翻译的字符串井然有序。
  3. 点击 Add Key 图标 以创建一个新字符串作为文本框的“提示文本”。

    图 7. 用于添加新字符串的对话框

    1. Add Key 对话框中,输入键名“edit_message”。
    2. 输入值“Enter a message”。
    3. 点击 OK
  4. 再添加一个名为“button_send”且值为“Send”的键。

现在,您可以为每个视图设置这些字符串。点击标签栏中的 activity_main.xml 以返回布局文件,然后按照以下步骤添加字符串:

  1. 点击布局中的文本框,如果右侧还未显示 Attributes 窗口,请点击右侧边栏上的 Attributes 图标
  2. 找到 text 属性(当前设为“Name”)并删除相应的值。
  3. 找到 hint 属性,然后点击文本框右侧的 Pick a Resource 图标 。在出现的对话框中,双击列表中的 edit_message
  4. 现在,点击布局中的按钮,找到 text 属性(当前设为“Button”),点击 Pick a Resource 图标 ,然后选择 button_send

让文本框大小可灵活调整

要创建一个适应不同屏幕尺寸的布局,您现在让文本框拉伸以填充剩余的所有水平空间(扣除按钮和所有外边距后的空间)。

继续操作之前,请点击工具栏中的 Show 图标 ,然后选择 Blueprint

图 8. 选择 Create Horizontal Chain 后所得到的结果

图 9. 点击以将宽度更改为 Match Constraints

图 10. 文本框现在拉伸以填充剩余空间

  1. 选择两个视图(点击一个,在按住 Shift 键的同时点击另一个),然后右键点击任一视图并依次选择 Chain > Create Horizontal Chain。布局应如图 8 中所示。

    是两个或多个视图之间的双向约束条件,可让您采用一致的方式安排链接的视图。

  2. 选择按钮并打开 Attributes 窗口。使用 Attributes 窗口顶部的视图检查器,将右外边距设为 16。
  3. 现在,点击文本框以查看其属性。点击两次宽度指示器,确保将其设为 Match Constraints,如图 9 中的标注 1 所示。

    “Match constraints”表示宽度将延长以符合水平约束条件和外边距的定义。因此,文本框将拉伸以填充水平空间(扣除按钮和所有外边距后的空间)。

现在,布局已经完成,应如图 10 中所示。

如果您的布局看起来不像预期的那样,请点击下方链接,查看您的 XML 应该是什么样子,并将其与您在 Text 标签中看到的内容进行比较。(如果您的属性以不同的顺序显示,也没关系。)

如需详细了解链以及 ConstraintLayout 的其他各种用途,请阅读使用 ConstraintLayout 构建自适应界面

运行应用

如果已在上一课中将您的应用安装到设备上,只需点击工具栏中的 Apply Changes 图标 ,即可使用新布局更新应用。或者,点击 Run 图标 以安装并运行应用。

该按钮仍然没有任何作用。要在点按该按钮时启动另一个 Activity,请继续学习下一课