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

Android9编程九:使用RelativeLayout设计登录页面这个登录页面大体上是这样:最上面是一个头像,中间是用户名输入框,其下是密码输入框,最下面的登录按钮。

欢迎大家来到IT世界,在知识的湖畔探索吧!

思路

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

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

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

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

其中用户名输入框纵向居中,其余控件在纵向上以它为基准摆放。

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

添加用户名输入控件

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

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

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

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

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

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

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

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

只有文本输入控件还不行,我们还要有提示性文字,以告诉用户这个地方应输入什么,以前都是弄一个文本显示控件(比如TextView),放在输入框的左边或上边,提示应输入什么,现在的做法变了,直接在输入框中提示。在Android中很容易做到,只需设置输入控件的“hint(提示)”属性(请仔细寻找):

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

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

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

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

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

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

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

添加密码输入控件

拖一个“Password”控件到界面上,如下图(注意指示相对位置的箭头):

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

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

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

现在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>

欢迎大家来到IT世界,在知识的湖畔探索吧!

添加登录按钮

拖一个按钮进来,放到密码框下面:

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

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

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

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

设置头像

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

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

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

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

最终得到的界面如下:

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

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

这个页面(activity_main.xml)的源码是:

欢迎大家来到IT世界,在知识的湖畔探索吧!<?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编程通俗演义》-清华大学出版社,京东淘宝及各大书店有售)

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/30323.html

(0)
上一篇 2024年 5月 1日 下午6:55
下一篇 2024年 5月 2日 上午8:55

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信