思路
下面我们玩点复杂的:设计一个登录页面。这个登录页面大体上是这样:最上面是一个头像,中间是用户名输入框,其下是密码输入框,最下面的登录按钮。
先想一下怎么设计。为了美观一些,我们希望这些内容整体居中显示,这里指的是纵向上的居中。因为屏幕一般都是竖着看的。文本输入控件和按钮控件都可以把高度设置为“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编程通俗演义》-清华大学出版社,京东淘宝及各大书店有售)