Build a Simple User Interface

安卓 app 的用户界面使用继承布局（ViewGroup 对象）和组件（View objects）来进行构建的。布局是不可见的，但是布局被用来控制子视图如何在屏幕上被放置。组件为 UI 的组件，比如说按钮，文本输入框都属于组件。

Figure 2. 显示了 ViewGroup  对象在布局中的分支和包含的视图对象

Android 为 ViewGroup 提供了一个 XML 词汇，所以你的 UI 设计绝大部分都在 XML 文件中定义的。然而，在本课程中，我们不打算告诉你 XML 的语法和如何通过 XML 文件来控制布局，我们将会说明如何使用 Android Studio 布局编辑器（Android Studio's Layout Editor）来创建你的布局。这个布局编辑器使用的是拖动所见即所得的方式来对布局进行修改的。

打开布局编辑器

在开始之前，你需要对你的工作空间（workspace）进行一些下面的设置：

1. 在 Android Studio 的项目窗口中，打开 app > res > layout > activity_main.xml。
2. 为了能够让你的视图编辑器有更多的可以工作的空间，你可以隐藏项目（Project ）窗口。可以通过  View > Tool Windows > Project 进行隐藏，也可以单击 Project  图标。这个图标位于 Android Studio 的左侧。
3. 如果你的编辑器显示的是 XML 源代码，你可以通过单击 设计（Design）标签来进入视图编辑窗口。
4. 单击 显示蓝图（Show Blueprint）  图标，你的布局编辑器将会仅显示蓝图。
5. 请确定显示容器（Show Constraints is on）是打开的。在工具栏中的提示应该显示的文本内容为：Hide Constraints  （因为显示的图标是这样的）。
6. 请确定自动连接是关闭的。 在工具栏中的提示应该显示的文本内容为 Turn On Autoconnect  （因为现在这样是关闭的）。
7. 单击默认边界（Default Margins)  在工具栏中，然后选择 16 （你仍然可以在后面针对每一个视图来调整你的边界）。
8. 单击工具栏中的 设备编辑器（Device in Editor）  图标，然后选择 Pixel XL。

你的编辑器应该和下图显示的内容一样 figure 3：

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

左侧下方 组件树（Component Tree）窗口显示了当前布局的继承关系。 在本例中，根视图是 ConstraintLayout，在这个视图中仅仅包含了一个 TextView 对象。

ConstraintLayout 为每一个视图定义了兄弟之间的布局和上下级之间的布局的位置。在这种情况下你可以为一个平行的继承关系创建简单和复杂的布局。

通过这样避免了嵌套布局（嵌套布局是一个布局在另外一个布局的理解，如果上图 2 显示的），在嵌套布局中，将会增加 UI 拖动的时间消耗。

Figure 4. 2 个视图在同一个布局（ConstraintLayout）中的示例。

在上图中，你可以定义下面的布局（figure 4）：

• 视图 A 距离上级布局的顶部有 16dp。
• 视图 A 距离上级布局的左侧有 16dp。
• 视图 B 位于视图 A 的右侧 16dp。
• 视图 B 相对于视图 A 是顶部对齐的。

在下面的内容中，你将会构建一个布局和上面的描述基本类似。

添加一个文本框

Figure 5. 文本输入框在左侧上部的布局位置

1. 首先，你需要删除在你布局中已经存在的的组件。在 组件树（Component Tree）窗口中单击 文本视图（TextView ）然后按键盘上的删除键，进行删除。
2. 从左侧的 Palette 窗口中，单击 Text，然后将 Plain Text 拖动到布局中。这个组件是可以编辑的组件能够接受用户在界面上的内容输入。
3. 单击设计视图编辑器中你刚才添加的组件，你将会看到在这个组件中的四个角有大小设置的的标记（正方形），同时你还可以看到每一边都有一个锚点（圆形）。

   为了对界面设置有更好的可操控性，你可以将编辑器的大小调整到 75%。

4. 单击然后拖动锚点到布局的边缘，然后放开。你将会看到组件和边缘的距离是 16dp（这是因为我们设置的组件的边距默认为 16dp）
5. 同样的，拖动锚点到左侧布局的边框然后放开，你会看到左侧的边框距离也是 16dp。

结果的屏幕截图如上面的图5（figure 5）。

添加一个按钮

Figure 6. 按钮位于文本输入框的右侧并且还有自己的基线

1. 从 Palette 窗口中单击 Widgets，然后拖动 Button 组件到布局中，将这个组件放置到文本输入框的右侧。
2. 从左侧的按钮到右侧的文本输入框创建一个约束（constraint ）。
3. 为了保持所有组件的水平对齐，你需要在文本基线上创建一个约束。单击按钮最近，然后选择 基线约束（Baseline Constraint） ，这个约束为于设计编辑器下面选择的视图中。基线约束的锚点将会在按钮内部显示。单击然后拖动这个锚点到文本数据库中，直到约束显示出来。

完成的效果图如上图6 （ figure 6）

修改 UI 字符串

在工具栏中单击 显示设计（Show Design）  来对你创建的 UI 进行预览。请注意，文本输入框中已经预先输入了内容 "Name" 同时，按钮的标签已经被命名为了 "Button"。现在你需要对这些字符串进行修改。

1. 打开 项目（Project）窗口，然后打开 app > res > values > strings.xml 文件。

   这个文件是字符串资源文件（string resources），你在这个文件中对你所有的 UI 字符串进行定义。通过这样的方式，你能够在一个地方对你的 UI 字符串进行管理和修改，能够让你对界面的控制变得更加容易查找，更新和进行本地化（相对将字符串的定义在组件中写死的方式来说）。

2. 在顶部的编辑窗口中，单击 打开编辑器（Open editor）。这个将会打开翻译编辑器（Translations Editor），在这个翻译编辑器中提供了一个简单的节目来让你添加和编辑默认的字符串，能够让你的翻译字符串更加容易进行组织。
3. 

   Figure 7. 添加新字符串的对话框

   单击添加按钮（Add Key）  来为文本对话框创建一个新的字符串 "hint text"。
   1. 在 key 中输入 "edit_message"。
   2. 在 value 中输入变量 "Enter a message"。
   3. 单击 OK。
4. 添加另外的一个 key 名字为"button_send"，这个字符串的值为 "Send"。

现在你可以将这些字符串设置到你的视图中了。现在通过单击 activity_main.xml 返回到布局文件中，然后为下面的组件添加字符串： 

1. 在布局中单击文本框，如果 属性（Properties）没有显示出来的话，你需要在右侧的边栏中单击 Properties  。
2. 定位到 hint 属性，然后在右侧的文本框中单击 Pick a Resource  。在这个对话框中，从列表中双击 edit_message。
3. 任然在查看文本对话框属性中，请删除  text 属性（当前这个属性被设置为 "Name"）。
4. 现在，在布局中单击按钮，然后定位到  text 属性，单击 Pick a Resource ，然后选择  button_send。

修改文本框大小自适应

希望创建 responsive 的布局来适应不同的屏幕大小，你需要展开你的文本输入框，让你的文本输入框能够自适应所有边框的大小（在计算按钮和边界以后）。

在你进行这部分操作之前，在你的布局编辑器工具栏中单击 显示蓝图（Show Blueprint）。

Figure 8. 单击 中心水平（ Center Horizontally）后的效果

Figure 9. 单击修改边框为 符合容器（Match Constraints）

Figure 10. 文本输入框现在已经延展成可以适应空间边框

1. 选择 2 个视图（单击其中的一个组件然后按住 Shift 键后再单击另外的一个组件），然后右键单击其中的任何一个组件然后选择 中心水平（ Center Horizontally）。

   尽管你的目标是不创建中心水平，但是这个是在 2 个视图中创建 chain 的快速方式。Chain 是在 2 个或者多个视图中构建双向联系的的快速方法。然而就算你删除水平边界，你也可以把这些修改回来。

2. 选择按钮，然后打开 Properties 窗口，设置左侧到右侧的边界为 16。
3. 选择文本输入框，只设置左侧边界为 16。
4. 还是在查看文本输入框属性，单击宽度设置器，设置为  Match Constraints，设置后的结果如上图 9 所示。

   "Match constraints" 的意思是，当前的宽度是根据水平容器的宽度来决定的。所以文本输入框会根据水平宽度的不同来进行延展（在计算完成按钮和所有边框以后）。

现在，你的布局设置已经完成了，你将会看到的结果如上图 10 所示。

尽管你现在的布局看到的和你实际期望的可能并不一致，单击编辑框下面的 XML 视图来查看 XML 视图应该看起来是怎么样的，然后用 XML 文件去对比 Text 标签（如果你的属性看起来并没有按照顺序来，这个没有关系）。

查看 XML 文件中的最终布局。

有关 Chains 的更多信息和内容和所有可以在 ConstraintLayout 中做的，请参考页面（Build a Responsive UI with ConstraintLayout）中的内容。

运行 app

如果你的 app 按照前面的课程已经安装在模拟器上了，你可以简单的单击工具栏中 Apply Changes  来将你的修改应用到你模拟器上启动的 app 上。

你也可以单击 运行 Run  将 app 重新安装到模拟器上运行。

你界面中的按钮现在没有响应任何输入，需要你的按钮响应用户的触压，请继续下面的课程（continue to the next lesson）。