实验目的
掌握Image View、View等控件的使用方式；
实验要求
实验内容
步骤一，创建Android工程
打开Android Studio创建名为Code05的工程，选择Empty Activity模板。
本次项目需要实现应用的登录界面布局，登录界面效果图如图1. Code05登录界面效果所示。
步骤二，构建页面布局
1. 页面所需控件，根据效果图可知，需要如下控件进行布局：
ImageView，显示Logo、账号、密码、密码样式等四个图标；
2. 根据效果图可将页面分为三个部分：
页面顶部，包含应用的Logo。可采用RelativeLayout；
页面中部，包含账号、密码输入框等。可采用RelativeLayout；
页面底部，包含登录按钮。可采用RelativeLayout；
页面整体可采用LinearLayout进行布局，代码如下所示，对于页面三个部分的高度可通过指定页面顶部元素、底部元素的android:layout_weight，使得顶部和底部占满页面，而中部则根据控件实际大小进行设置。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical"
tools:context=".LoginActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
...
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp">
...
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp">
...
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="wrap_content">
...
</RelativeLayout>
</LinearLayout>
3. 加入应用的Logo图标资源。
将名为ic_logo.png按照像素密度分别放入res/mipmap-XXXXX等文件夹中。
4. 在activity_main.xml加入ImageView控件显示Logo。
ImageView作为整个页面的顶部显示的元素，把其放入顶部的RelativeLayout中。通过设置ImageView的android:layout_centerInParent属性可以ImageView在其父容器中居中。设置android:src属性则 可设置为ImageView控件设置图片源。
通过设置顶部的RelatvieLayout的android:layout_marginTop属性， 可调整ImageView距离顶部的位置，使得整个页面空间更加协调，代码下所所示。
<LinearLayout
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:orientation="vertical"
tools:context=".LoginActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="48dp">
<ImageView
android:layout_width="108dp"
android:layout_height="108dp"
android:src="@mipmap/ic_logo"
android:layout_centerInParent="true"
/>
</RelativeLayout>
...
5. 加入用户账号、密码图标Vector Asset资源。
用户账号、密码的图标采用Android Studio提供的内置Vector Asset资源。在工程窗口右击app模块，选择【New】-> 【Vector Asset】菜单，弹出的Asset Studio窗口中按照以下步骤进行设置：
在res/drawable目录下看到ic_person_outline_black_24dp.xml drawable图标资源；
使用同样的方式添加lock outline、visibility、visibility off三个图标。
6. 设置用户账户、密码布局。
对于布局中用户账号一栏，使用了2个控件，分别是ImageView、EditText，这两个控件均在RelativeLayout中。 设置两个控件的android:layout_alignParentBottom属性可以使得2个控件底部与父容器RelativeLayout对齐。
设置ImageView控件的android:layout_width和android:layout_height属性为32dp。
设置EditText控件的android:layout_marginStart和android:layout_marginEnd属性为48dp。
%由于EditText控件的样式（例如：底部横线颜色，文本光标颜色等）与App的主题色不符，在此可通过一些属性设置来改变。
%首先设置EditText控件的android:background属性为``@null''用于取消该控件的底部横线以及背景，文本光标的颜色则通过设置android:textCursorDrawable
以同样的方式设置用户密码一栏的布局。不同的是密码栏的右侧还增加了一个ImageView用于设置密码可见操作。因此这一栏实际上有三个控件，分别是ImageView、EditText、ImageView。页面中部的布局代码下所示。
<LinearLayout
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:orientation="vertical"
tools:context=".LoginActivity">
...
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="48dp">
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginBottom="4dp"
android:layout_alignParentBottom="true"
android:src="@drawable/ic_person_outline_black_24dp"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_alignParentBottom="true"
android:layout_gravity="center"
android:inputType="text"
android:hint="Email/Account"
android:layout_marginStart="48dp"
android:layout_marginEnd="48dp"
android:maxLines="1"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="16dp">
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginBottom="4dp"
android:layout_alignParentBottom="true"
android:src="@drawable/ic_lock_outline_black_24dp"/>
<EditText
android:id="@+id/et_pwd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_alignParentBottom="true"
android:inputType="textPassword"
android:hint="Password"
android:layout_marginStart="48dp"
android:layout_marginEnd="48dp"
android:maxLines="1"/>
<ImageView
android:id="@+id/iv_pwd_switch"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginBottom="6dp"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:src="@drawable/ic_visibility_off_black_24dp"/>
</RelativeLayout>
...
7. 设置登录按钮布局。
登录按钮的布局相对较简单，将Button控件置于底部的RelativeLayout中，并设置其 android:textColor、android:layout_alignParentTop等属性，具体代码如下所示。
<LinearLayout
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:orientation="vertical"
tools:context=".LoginActivity">
...
<RelativeLayout
android:layout_width="match_parent"
android:layout_marginBottom="32dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<Button
android:text="Login"
android:textColor="@android:color/white"
android:background="@color/colorPrimary"
android:layout_marginTop="32dp"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
</LinearLayout>
步骤三，设置App启动图标
工程窗口中右击工程的app模块，在弹出的菜单中选择【New】-> 【Image Asset】，弹出如图3. Asset Studio窗口所示的Asset Studio窗口。 按照以下步骤进行设置：
在Icon Type中选择Launcher Icons (Adaptive and Legacy)。
在Foreground Layer标签中的Source Asset中选择Asset Type为Image，并在Path中选择所需要使用的图标文件（在本例中为ic_logo.png）。
在Background Layer标签中的Source Asset中选择Color，并设置Color为白色。
步骤四，实现密码明文切换图标动作
当用户点击密码栏中的密码明文切换图标时，可将密码EditText控件中的输入类型进行切换，这需要在LoginActivity活动中增加ImageView控件的OnClickListener事件侦听器并对EditText控件的inputType属性进行设置即可，具体代码如下所示。
public class LoginActivity extends AppCompatActivity {
private Boolean bPwdSwitch = false;
private EditText etPwd;
@Override
protected void onCreate(Bundle savedInstanceState) {
...
final ImageView ivPwdSwitch = findViewById(R.id.iv_pwd_switch);
etPwd = findViewById(R.id.et_pwd);
ivPwdSwitch.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
bPwdSwitch = !bPwdSwitch;
if (bPwdSwitch) {
ivPwdSwitch.setImageResource(
R.drawable.ic_visibility_black_24dp);
etPwd.setInputType(
InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
} else {
ivPwdSwitch.setImageResource(
R.drawable.ic_visibility_off_black_24dp);
etPwd.setInputType(
InputType.TYPE_TEXT_VARIATION_PASSWORD |
InputType.TYPE_CLASS_TEXT);
etPwd.setTypeface(Typeface.DEFAULT);
}
}
});
实验小结
通过本次实验，你应该掌握了如下知识内容：
使用LinearLayout，Relative Layout进行页面布局；
