第六个项目——登陆界面

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

Last updated 4 years ago

Was this helpful?

第六个项目——登陆界面

实验目的

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

实验要求

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

实验内容

步骤一，创建Android工程

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

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

步骤二，构建页面布局

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；
选择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启动图标

在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导入应用启动图标；