Android9编程九：使用RelativeLayout设计登录页面

上一篇：Android9编程八：RelativeLayout排版

思路

下面我们玩点复杂的：设计一个登录页面。这个登录页面大体上是这样：最上面是一个头像，中间是用户名输入框，其下是密码输入框，最下面的登录按钮。

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

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

• 图像控件
• 用户名输入框
• 密码输入框
• 登录按钮

其中用户名输入框纵向居中，其余控件在纵向上以它为基准摆放。
下面让我们一步一步设计出这个登录界面。

添加用户名输入控件

还是修改当前的Activity的界面（res/layout/activity_main.xml，见[图3.4.4-1]），在当前的基础上改造一下。我们还是先把“Hello World”这个文本控件删掉吧，用不着它了。

当前，图像控件处于纵向居中，我们先把它移到左上角，等摆好了用户名输入框再摆放它的位置。很简单，在源码中把图像控件的位置相关的属性删掉：

下面，拖一个文本输入控件到页面内，在“Text”组中拖了一个“Plain Text”控件到页面中，当看到横向和纵向上的对齐线都出现时，放开它：

当然你他可以不用拖到合适的位置就放开它，但之后需要手动设置其layout相关属性进行位置调整。我们不想让这个输入控件在横向上充满整个空间，所以为它设置一个固定的宽度：300dp，现在，这个文本输入控件与layout有关的属性如下图：

注意，“Text”这个组下有很多控件，比如“Email”、“Phone”等。这些控件用于输入不同的文本格式，“Email”是专门输入邮箱地址的控件，“Phone”是专门输入电话号码的控件。但是，其实它们是同一个Java类（这个控件的类叫做“EditText”），只是把EditText的某些属性预设成了不同的值，我们完全可以自己改变这些值。我们现在使用了最通用的一种：“Plain Text”，对输入文本的格式没什么限制，因为用户名一般都没限制。
只有文本输入控件还不行，我们还要有提示性文字，以告诉用户这个地方应输入什么，以前都是弄一个文本显示控件（比如TextView），放在输入框的左边或上边，提示应输入什么，现在的做法变了，直接在输入框中提示。在Android中很容易做到，只需设置输入控件的“hint（提示）”属性（请仔细寻找）：

你还需要把输入控件的默认内容清除掉，找到它的“text”属性，把里面的内容清掉：

现在这个控件的样子是这样的：

因为其它控件要相对它的位置摆放，需要要引用它，所以我们还要设置它的ID，为它的ID设置一个有意义的名字：

添加密码输入控件

拖一个“Password”控件到界面上，如下图（注意指示相对位置的箭头）：

设置其layout属性为：左右边界都与用户名输入框的左右边界对齐（这样就与用户名输入框宽度保持一致了），纵向上位于用户名输入框下面24dp；并为它设置有意义的ID：

现在layout源码看起来这样子：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="niuedu.com.andfirststep.MainActivity">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        app:srcCompat="@drawable/female" />

    <EditText
        android:id="@+id/editTextName"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:ems="10"
        android:hint="请输入用户名"
        android:inputType="textPersonName" />

    <EditText
        android:id="@+id/editTextPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/editTextName"
        android:layout_alignLeft="@+id/editTextName"
        android:layout_alignRight="@+id/editTextName"
        android:layout_alignStart="@+id/editTextName"
        android:layout_below="@+id/editTextName"
        android:layout_marginTop="24dp"
        android:ems="10"
        android:hint="请输入密码"
        android:inputType="textPassword" />
</RelativeLayout>

添加登录按钮

拖一个按钮进来，放到密码框下面：

设置属性使它与用户名框左右边界对齐，并改变其显示的标题为：“登录”。

给它一个有意义的ID：buttonLogin。

设置头像

我们依然利用现有的图像控件，把它的宽和高都设置成100dp。把它拖到左右居中并在用户名框上面一定距离:

然后稍微设置一下属性，最终如图:

最终得到的界面如下：

虽然不漂亮，但也算小清新了。运行起来看看真实效果吧。

这个页面（activity_main.xml）的源码是：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="niuedu.com.andfirststep.MainActivity">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_above="@+id/editTextName"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24dp"
        android:background="@color/colorAccent"
        app:srcCompat="@drawable/female" />
    <EditText
        android:id="@+id/editTextName"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:ems="10"
        android:hint="请输入用户名"
        android:inputType="textPersonName" />
    <EditText
        android:id="@+id/editTextPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/editTextName"
        android:layout_alignLeft="@+id/editTextName"
        android:layout_alignRight="@+id/editTextName"
        android:layout_alignStart="@+id/editTextName"
        android:layout_below="@+id/editTextName"
        android:layout_marginTop="24dp"
        android:ems="10"
        android:hint="请输入密码"
        android:inputType="textPassword" />
    <Button
        android:id="@+id/buttonLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/editTextPassword"
        android:layout_alignLeft="@+id/editTextPassword"
        android:layout_alignRight="@+id/editTextPassword"
        android:layout_alignStart="@+id/editTextPassword"
        android:layout_below="@+id/editTextPassword"
        android:layout_marginTop="24dp"
        android:text="登录" />
</RelativeLayout>

（摘自《Android9编程通俗演义》-清华大学出版社，京东淘宝及各大书店有售）