学习了如何开发一个非常简单的安卓工程：Hello World 之后，现在应该开始学习最初步的用户交互界面了

构建一个简单的用户界面

Android应用程序的用户界面是使用布局（ViewGroup对象）和小部件（View对象）的层次结构构建的。布局是不可见的容器，用于控制其子视图在屏幕上的位置。小部件是UI组件，例如按钮和文本框。

上面的话看起来异常难懂是不是？没关系，现在不需要去了解这些到底是怎么回事，只需要一步一步做出你的程序就好。

新建一个工程文件，像我们的之前学过的那样，创建一个新的empty activity
在Android Studio的状态栏的“project”，打开app> res> layout> activity_main.xml
为了使在你能看到更多的空间，我们先隐藏几个窗口

image.png
点击图上画红框的按钮即可，这个按钮点击后会自动收缩它所在的那个部分的窗口，同理，你可以点击AS上任意你想隐藏的窗口，做同样的处理，直到你认为工作区域足够舒适。
如果你的编辑器显示的是一堆代码，不用害怕，请单击窗口底部的“ 设design”选项卡。

image.png
之后依次点击图上画红框的按钮，直到和图片上的状态一摸一样。
（Pixel XL 那一栏可选择多种不同的机型，建议选择近两年谷歌出的手机，尽量不要选nexus系列，因为年代过于久远）

image.png

单击工具栏中的边距设置，也就是图上机型按钮下面的那个魔法棒图标旁边的按钮，然后选择 16（仍然可以稍后调整每个视图的边距，我们选16是为了配合谷歌官方的教程）。
下面我们解释下左下角的Component Tree窗口。它负责显示布局（layout）的视图层次结构。在这种情况下，根视图是一个ConstraintLayout，只包含一个 TextView（也就是hello world）。
（在传统的Android开发当中，界面基本都是靠编写XML代码完成的，然而自从Google大幅度更新AS后，ConstraintLayout是用可视化的方式来编写界面的一大神器，也就是说，在目前的学习中，你不需要花太大的精力区学习xml相关的知识）

ConstraintLayout是一种布局，它根据同级视图和父布局的约束来定义每个视图的位置。通过这种方式，您可以使用平面视图层次结构创建简单和复杂的布局。也就是说，它避免了嵌套这种情况的出现。

添加一个文本框

需要删除布局中已有的内容。因此，在左边的窗口中单击 TextView，然后按Delete。（当然也可以直接用键盘的delete删除）

点击palette，会出现许多神奇的工具和按钮，搜索plain text（纯文本），将纯文本拖放到右边的设计编辑器中，它是接受纯文本输入的一个部件（变成应用后，我们可以在这个地方输入文字）。

image.png

点击设计编辑器中的视图。现在可以在每个角落（方块）看到调整大小手柄，并在每侧（圆圈）上显示约束锚点。（如图操作）

image.png

拖拽后上左都设置局限为16，看起来像下面的这张图

image.png

如果发现了右边出现了黄色的感叹号小三角，并且点击后如下图显示

image.png

需要进行下面的操作

点击design旁边的text，切换到xml代码界面，在
android:id="@+id/editText"
后面添加一行
android:labelFor="@id/editText"
即可解决第一个感叹号的问题

2.切换到app>res>values>strings.xml 依次点击图上的按钮

image.png

3.点击加号

image.png

创建一个新字符串作为文本框的“提示文本”。

image.png

创建完后，为了方便我们的下一步，我们再创建一个马上要添加的按钮的文本。

image.png

4.返回之前的activity_main.xml文件，回到design界面，双击文本框，右边会出现对应的属性框，点击图上的按钮，选择我们之前建好的message文本，即可消除第二个感叹号。

同理，我们再选择右侧的palette面板，搜索button，拖拽至编辑器，如图操作

image.png

之后从中间的线拖拽至文本框中间，然后再点击按钮的左边框，和文本的右边框之间添加一个16sp的限制（如下图）

image.png

此时编辑好后，双击按钮，出现按钮对应的属性页面，选择文字那一项，和之前的纯文本的文字替换做相同处理，换成我们之前创建的send文字。

为了让我们的程序响应不同屏幕尺寸的布局，现在将使文本框伸展以填充所有剩余的水平空间。

选择两个视图（单击一个，按住Shift并单击另一个视图），然后右键单击视图并选择Chain > Create Horizontal Chain。布局应如图所示。

image.png

接下来更改按钮的右边距也为16，如图

image.png

选择文本框查看属性。单击宽度指示器两次，以使其设置为Match Constraints

image.png

此时此刻，如果你点击最下面的text，你的代码应该是这个样子

现在插上手机，运行一下这个程序试试吧，你会看到程序神奇的出现在了你的手机上。下一次，我们将为这个程序添加一些小功能。

image.png