5.4　设计登录页面

下面设计一个登录页面。这个登录页面最上面是一幅图像，中间是用户名输入框，接着是密码输入框，最下面是登录按钮。

为了美观一些，希望这些内容整体居中（纵向居中）显示，因为屏幕一般都是竖着的。可以把文本输入控件和按钮控件的高度设置为“wrap_content”，即由文本的字体大小决定高度（这个值不会太大）。图像控件的大小也由内容（也就是图像）来决定的话就不合适了，可能很小，也可能很大。所以我们应该把图像控件设置成合适的固定大小，然后让图像保持比例缩放来自适应地填充到图像控件中。总之，一般情况下都是为图像控件指定固定的大小。至于文本输入控件，也不让它在横向上充满整个父控件，所以将宽度设置为固定值，高度则由其内容决定。

纵向上的居中怎么设置好呢？如果让图像在纵向上居中，其他控件以它为基准往下摆，整体内容看起来就会偏下，不如以图像下面的用户名输入框为基准。把用户名输入框设置为在容器控件中纵向居中，其他控件都以它为基准上下摆放，效果如下：

下面让我们一步一步设计出这个登录界面。

5.4.1　添加用户名输入控件

修改当前的Activity界面（res/layout/activity_main.xml），在当前的基础上改造一下。先把“Hello World”这个文本控件删掉，用不着了。

当前，图像控件处于纵向居中，我们先把它移到顶端。很简单，把图像控件下边界的约束删掉即可。

然后，拖一个文本输入控件到页面内，在“Text”组中拖一个“Plain Text”控件到页面中，放在图像控件的下面，如图5-48所示。

为了保证文本输入控件在运行时真的位于图像控件下面，需要在图像的下边界与文本框的上边界之间添加一个约束。这个约束的默认Margin为8dp，离得太近了，改成16dp，如图5-49所示。

我们还应让文本框左右居中。另外，文本框的宽度默认是wrap_content，但是一般我们都希望它在横向上充满整个空间，只要把layout_width属性改为match_constraint（或0dp）即可，如图5-50所示。

注意，“Text”这个组下有很多控件，比如“Email”“Phone”等。这些控件用于输入不同的文本格式，“Email”是专门输入邮箱地址的控件，“Phone”是专门输入电话号码的控件。但是，其实它们是同一个类（这个类叫作“EditText”），只是把EditText的某些属性预设成了不同的值，我们完全可以自己改变这些值。现在使用最通用的一种“Plain Text”，对输入文本的格式没什么限制，因为用户名一般都没有限制。

只有文本输入控件还不行，还要有提示性文字，以告诉用户这个地方应输入什么。以前都是将一个文本显示控件（比如TextView）。放在输入框的左边或上边，提示应输入什么，现在的做法变了，变成了直接在输入框中显示提示，这在Android中很容易做到，只需设置输入控件的“hint（提示）”属性，如图5-51所示。

注意，必须将text属性的值清空才能显示出hint的值。

因为其他控件要相对它的位置摆放，需要引用它，所以还要设置它的ID，界面设计器会自动为它取个ID，最好为它的ID设置一个有意义的名字，如图5-52所示。

修改ID时，Android Studio会弹出一个对话框，如图5-53所示。

提示是否真要更新ID，因为更新ID会更新XML文件中所有的引用和R类中相应字段的值。单击“Yes”按钮。为了以后不再让它出来添麻烦，最好选中“Don't ask again during this session（不要在这次会话中再问了）”。

5.4.2　添加密码输入控件

添加密码输入控件，效果如图5-54所示，并将ID设置为“editTextPassword”。

5.4.3　添加登录按钮

参考前面的内容进行设置，只是把ID设置为“buttonLogin”，效果如图5-55所示。注意，修改标题的方式是设置其text属性的值。

5.4.4　完成收工

最后把头像设置一下，取消宽高比（在设置宽高比的地方再点一下就取消了），将宽高都设为100dp。最终的layout源码如下：