项目2-2 用户登录界面设计
学习目标
■ 掌握ImageView、CheckBox、ImageButton和Toast组件的使用方法。
■ 掌握Android中CheckBox组件事件监听器处理机制。
■ 掌握Android相对布局技术。
■ 学会运用Android相对布局设计用户登录界面。
项目描述
运用 Android 相对布局技术，设计一个用户管理系统登录界面，要求在登录界面上运用ImageView、CheckBox和ImageButton组件。
知识储备
2.2.1 ImageView组件
在Android中，ImageView是用于显示任意图像的组件，如显示图标。ImageView组件继承自View类，ImageView类可以加载各种来源的图片（如资源或图片库）。
1.在XML文件中添加ImageView的基本语法
格式如下：
<ImageView
属性列表
/>
2.ImageView组件常用的属性及对应方法
ImageView组件常用的属性及对应方法如表2-7所示。
表2-7 ImageView组件常用的属性及对应方法
表2-8 android:scaleType属性的取值
3.ImageView类常用成员方法
ImageView类的常用成员方法如表2-9所示。
表2-9 ImageView类的常用成员方法
【例2-4】在Android Studio中新建一个Android项目，在XML文件中设置显示两张图片，第一张图片是通过src属性直接指定为res/drawable/ic_launcher图片，另一张图片是通过在Java代码中运用setImageResource(int)方法指定ID的资源获取。
启动Android Studio，新建一个Android项目，修改res/layout目录下的activity_main.xml布局文件，将默认添加的相对布局（RelativeLayout）修改成线性布局（LinearLayout），并设置线性布局中的 android:orientation="vertical"，即垂直方向对齐，并将默认添加的 TextView组件删除，添加两个ImageView组件。ImageView组件的程序清单的代码如下：
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
android:id="@+id/img01"/>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:id="@+id/img02"
/>
在Java代码中指定ID的资源获取图片，方法如下：
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 获得ImageView的对象
ImageView imageview = (ImageView) this.findViewById(R.id.img02);
// 设置ImageView的图片资源
imageview.setImageResource(R.drawable.ic_launcher);
}
运行效果如图2-7所示。
图2-7 运行效果
2.2.2 Toast（消息提示框）
Toast是Android系统中非常有用的消息提示组件。该组件可用于在屏幕中显示一个消息提示框，该消息提示框没有任何控制按钮，并且不会获得焦点，经过一定时间后自动消失，因此，在用户使用Android应用程序时，常用Toast来显示一些快速提示的信息。
Toast组件的使用只需要以下4个步骤即可实现。
① 调用Toast.makeText()方法来创建一个Toast对象。
② 设置调用Toast对象的成员函数来设置Toast的显示位置和显示内容。
③ 如果需要自定义Toast样式，只需创建对应的View组件，并通过Toast中的setView()函数来显示用户自定义的视图布局。
④ 调用Toast的show()函数显示消息提示框。
下面介绍 Toast 最常见的使用方法，一个是显示普通文本的 Toast，另一个是显示带图片的Toast。
1.创建显示普通文本的Toast
利用Toast.makeText()方法创建一个Toast对象，然后显示Toast信息。Java程序代码如下：
// Toast.makeText参数注释
// 第1个参数：当前的上下文环境。可用getApplicationContext()或this
// 第2个参数：要显示的字符串。也可是R.string中的字符串ID
// 第3个参数：显示的时间长短。Toast默认的参数有LENGTH_LONG（长）和LENGTH_SHORT（短），也
// 可以使用毫秒，如2000ms
Toast toast=Toast.makeText(getApplicationContext(), "默认的Toast", Toast.LENGTH_SHORT);
//显示Toast信息
toast.show();
2.创建显示带图片的Toast
首先调用 Toast.makeText()方法来创建一个 Toast 对象，然后，通过 Toast 的 getView()获取Toast视图，并创建一个线性布局和图像组件的视图，之后把Toast和ImageView加入到线性布局中组成一个新的视图，最后显示Toast信息。Java程序代码如下：
Toast toast=Toast.makeText(getApplicationContext(), "显示带图片的toast", 3000);
toast.setGravity(Gravity.CENTER, 0, 0);
//创建图片视图对象
ImageView imageView= new ImageView(getApplicationContext());
//设置图片
imageView.setImageResource(R.drawable.ic_launcher);
//获得Toast的布局
LinearLayout toastView = (LinearLayout) toast.getView();
//设置此布局为横向的
toastView.setOrientation(LinearLayout.HORIZONTAL);
//将ImageView加入到此布局中的第1个位置
toastView.addView(imageView, 0);
toast.show();
2.2.3 CheckBox组件
在Android中，CheckBox组件被称为多选按钮，该组件可允许用户在一组选项中进行单选或多选，如兴趣爱好、课程等不同选项的选择。
1.CheckBox在XML文件中的基本语法
格式如下：
<CheckBox
属性列表
/>
2.CheckBox选中或未选中状态的设置方法
在CheckBox组件中有一个checked属性，它可用于判断CheckBox是否被选中。一般改变checked属性有以下3种方法。
① 在XML文件中，通过android:checked设置，当取值为true时表示选中，当取值为false时表示未选中。
② 在Java程序代码中，通过setChecked(boolean)设置CheckBox是否被选中，还可以利用isChecked()方法来判断组件状态是否被选中。
③ 通过用户触摸改变选中状态。
当 CheckBox 组件状态发生改变时，将会触发 OnCheckedChange 响应事件，因此，我们可以通过OnCheckedChangeListener方法设置事件监听器，以实现对CheckBox状态变化的监控，并根据程序设计的不同要求重写OnCheckedChange响应事件中的代码。
下面通过示例，介绍利用CheckBox组件设置兴趣爱好多个选项的设计方法。
【例2-5】在Android Studio中新建一个Android项目。首先，在XML文件中用CheckBox组件设置兴趣爱好多个选项，要求界面设计中文字来源于strings.xml文件，然后，当选择不同选项时，要求显示出所选选项的消息框。
启动Android Studio，新建一个Android项目，修改res/layout目录下的activity_main.xml布局文件，将默认添加的相对布局（RelativeLayout）修改成线性布局（LinearLayout），并设置线性布局中的android:orientation=" horizontal"，即水平方向对齐。添加3个CheckBox 组件，设置属性，并将兴趣爱好文字设置在strings.xml文件中。布局文件中TextView、CheckBox组件设置的代码如下：
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hobby"
android:textSize="20sp"
/>
<CheckBox
android:id="@+id/cb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="false"
android:text="@string/cb1_name"
android:textSize="20sp"
/>
<CheckBox
android:id="@+id/cb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="false"
android:text="@string/cb2_name"
android:textSize="20sp"
/>
<CheckBox
android:id="@+id/cb3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="false"
android:text="@string/cb3_name"
android:textSize="20sp"
/>
strings.xml文件设置如下：
<resources>
<string name="app_name">Text</string>
<string name="hobby">爱好：</string>
<string name="cb1_name">游泳</string>
<string name="cb2_name">打篮球</string>
<string name="cb3_name">唱歌</string>
</resources>
在 MainActivity.java 程序中编写 CheckBox 选项状态变换时的处理程序，首先定义CheckBox多选项变量，然后，通过findViewById（R.id.id名称）获取每个CheckBox对象，再对每个选项设置setOnCheckedChangeListener事件监听器。代码如下：
public class MainActivity extends AppCompatActivity {
//定义3个多选项变量
private CheckBox m_CheckBox1;
private CheckBox m_CheckBox2;
private CheckBox m_CheckBox3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
/ * 取得每个CheckBox对象 */
m_CheckBox1 = (CheckBox) findViewById(R.id.cb1);
m_CheckBox2 = (CheckBox) findViewById(R.id.cb2);
m_CheckBox3 = (CheckBox) findViewById(R.id.cb3);
//对m_CheckBox1选项设置事件监听
m_CheckBox1.setOnCheckedChangeListener(new CheckBox.OnChecked_
ChangeListener(){
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean
isChecked)
{
if(m_CheckBox1.isChecked())
{
Toast.makeText(MainActivity.this,"你选择了：" + m_CheckBox1.
getText(),Toast.LENGTH_SHORT).show();
}
}
});
// m_CheckBox2和m_CheckBox3选项设置事件监听方法同m_CheckBox1相似
// 在此省略
}
}
运行效果如图2-8所示。
图2-8 CheckBox运行效果
2.2.4 ImageButton组件
ImageButton是带有图标的按钮组件。该组件继承自ImageView类，ImageButton组件与Button 组件的主要区别是 ImageButton 中没有 text 属性，即按钮中将显示图片而不是文本。ImageButton组件中设置按钮显示的图片可以通过android:src属性实现。
例如，在 XML 文件中添加 ImageButton 组件，调用 res/drawable 文件夹下的按钮图片btn_focu.png，代码如下：
<ImageButton
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/btn_focu" />
2.2.5 相对布局
相对布局是一种常用的布局方式，它是通过指定界面元素与其他元素的相对位置来确定界面中所有元素的布局位置，相对布局可以使用相对布局管理器实现。
在Android中，可以使用XML布局文件定义相对布局管理器，也可以使用Java来创建，但推荐使用XML布局文件定义相对布局管理器。在XML布局文件中，定义相对布局管理器是使用RelativeLayout标记，其基本语法格式如下：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
属性列表>
</RelativeLayout>
在相对布局中，布局内摆放组件是参照父容器或者其他组件位置来决定的。它的属性根据参照物不同可以分为以下3类。
第1类参照父容器，属性值为true 或false，如表2-10所示。
表2-10 参照父容器设置的属性
第2类参照另一个控件，属性值必须为ID的引用名@id/id-name，如表2-11所示。
表2-11 参照另一个控件设置的属性
第3类参照窗口相对位置，属性值为具体的像素值，如表2-12所示。
表2-12 参照窗口相对位置设置的属性
项目实施
1.项目分析
运用Android相对布局技术，设计一个用户管理系统登录界面，效果如图2-9所示。
图2-9 用户管理系统登录界面
用户登录界面设计特点：
① 整个UI界面设计了背景图片。
② 标题由图片和文字组成。
③ 有一个“记住密码”复选框。
④“登录”按钮是图片按钮，“注册”按钮是文本按钮，但设置了背景图片。
分析结果：
① UI界面中有1个ImageView组件、3个 TextView组件、2个 EditText组件、1个 CheckBox 组件、1个ImageButton组件和1个Button组件。
② 采用相对布局技术。
③ 密码输入有数字格式要求。
2.项目实现
（1）新建用户登录项目。
启动 Android Studio，在 Android Studio 起始页选择【Start a new Android Studio project】，或在Android Studio主页菜单栏上选择【File】→【New】→【New Project】，新建 Android 工程。在 New Project 页面上输入应用程序的名称（Test）、公司域名（com.zzhn.zheng）和存储路径，单击【Next】按钮。然后，选择工程的类型以及支持的最低版本，单击【Next】按钮。之后选择是否创建Activity以及创建Activity的类型，选择【Empty Activity】，单击【Finish】按钮。
（2）设计布局文件。
在res/layout文件夹中，打开布局的activity_main.xml文件，使用相对布局技术，添加界面组件，在设置组件属性时，要定义每个组件的 ID，通过组件的 ID，并参照组件与组件之间的相对位置，运用android:layout_below和android:layout_toRightOf属性设置组件之间的相对位置。
操作方法：展开【res】→【layout】文件夹，双击【activity_main.xml】文件，打开右侧布局文件text编辑窗口，在编辑窗口中输入activity_main.xml文件代码，如下：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="40dp"
android:paddingLeft="40dp"
android:paddingRight="40dp"
android:paddingTop="80dp"
android:background="@drawable/bj"
tools:context="com.zzhn.zheng.test.MainActivity">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/contacts_selected"
android:id="@+id/contacts"
android:layout_marginTop="20dp"
android:layout_marginLeft="40dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:gravity="center"
android:layout_toRightOf="@id/contacts"
android:text="用户管理系统"
android:textSize="30sp"
android:id="@+id/title" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/title"
android:layout_marginTop="20dp"
android:id="@+id/usertext"
android:background="#cbcccf"
android:text="用户名："
android:textSize="20sp" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/title"
android:layout_toRightOf="@id/usertext"
android:layout_marginTop="20dp"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:background="#ffffff"
android:hint="用户ID"
android:gravity="left"
android:id="@+id/usersid"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/usertext"
android:layout_marginTop="20dp"
android:id="@+id/pwtext"
android:background="#cbcccf"
android:text="密 码："
android:textSize="20sp"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:layout_toRightOf="@id/pwtext"
android:layout_below="@id/usersid"
android:background="#ffffff"
android:hint="密码"
android:inputType="numberPassword"
android:gravity="left"
android:id="@+id/pwid"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/pwtext"
android:layout_below="@id/pwid"
android:layout_marginTop="20dp"
android:textColor="#3F51B5"
android:text="记住密码"
android:textSize="15sp"
android:checked="false"
android:id="@+id/rememberpw" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/rememberpw"
android:src="@drawable/btn_focu"
android:id="@+id/login"
android:onClick="dl"
android:layout_marginTop="20dp"
android:layout_marginLeft="30dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/rememberpw"
android:layout_toRightOf="@id/login"
android:layout_marginTop="30dp"
android:text="注册"
android:textSize="20sp"
android:onClick="reg"
android:id="@+id/reg"
android:background="@drawable/btn_press"/>
</RelativeLayout>
注意
ImageButton组件是通过android:src属性调用按钮图片，而Button组件是通过android:background属性设置背景图片。
（3）调试运行。
① 单击工具栏上的AVD Manager图标
，打开虚拟设备对话框，在虚拟设备对话框中单击启动虚拟设备的命令按钮，打开Android Studio模拟器。
② 单击工具栏上的“三角形”运行按钮
，运行本项目。
项目总结
通过本项目的学习，读者应学会采用相对布局技术设计用户登录界面的方法。
① 用户登录界面是由TextView、EditText、ImageView、CheckBox、ImageButton和Button等组件组成的，读者应了解这些组件的常用属性。
② 采用相对布局技术，进行用户登录界面设计。读者应掌握相对布局中android:layout_below、android:layout_toRightOf、android:layout_marginTop和android:layout_marginLeft属性的运用。
项目训练——仿QQ的用户登录界面
用相对布局设计一个仿QQ的用户登录界面，要求如下。
① UI界面上显示QQ图标；
② 输入栏目为用户名和密码，用户名输入为普通字符，长度小于10，密码输入的密码长度小于9，并以小点“.”显示；
③ UI界面上要显示“登录”和“注册”两个图片按钮，并设置“记住密码”复选框；
④ 要求设置UI界面的背景图片。
练习题
2-2-1 修改用户管理系统登录界面的 XML 文件，要求将界面上显示的文字放置于strings.xml文件中。
2-2-2 说明相对布局设计的特点。
2-2-3 说明ImageButton和Button的区别。
2-2-4 如何设置CheckBox选中状态？如何监控CheckBox组件选中状态的改变？