第六个项目——登陆界面

实验目的

掌握布局的组合使用方式；
掌握Vector Asset资源的使用方式；
掌握Image View、View等控件的使用方式；

实验要求

创建布局文件并对根据要求对布局进行设置；

实验内容

步骤一，创建Android工程

打开Android Studio创建名为Code05的工程，选择Empty Activity模板。

本次项目需要实现应用的登录界面布局，登录界面效果图如图1. Code05登录界面效果所示。

步骤二，构建页面布局

1. 页面所需控件，根据效果图可知，需要如下控件进行布局：

ImageView，显示Logo、账号、密码、密码样式等四个图标；
EditText，输入用户名、密码等；
Button，登录按钮。

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窗口中按照以下步骤进行设置：

在Asset Type中选择Clip Art；
点击Clip Art 图标选项，弹出如图2. Select Icon窗口所示的Select Icon窗口；
选择person outline图标，点击确定；
在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)。
设置Name为ic_launcher。
在Foreground Layer标签中的Source Asset中选择Asset Type为Image，并在Path中选择所需要使用的图标文件（在本例中为ic_logo.png）。
在Background Layer标签中的Source Asset中选择Color，并设置Color为白色。
点击确定完成Logo图标的导入。

步骤四，实现密码明文切换图标动作

当用户点击密码栏中的密码明文切换图标时，可将密码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进行页面布局；
使用Vector Asset添加图标资源；
使用Image Asset导入应用启动图标；

Previous第五个项目——计数器2 Next第七个项目——新闻列表

Last updated 4 years ago

Was this helpful?