第六个项目——登陆界面

实验目的

  • 掌握布局的组合使用方式;

  • 掌握Vector Asset资源的使用方式;

  • 掌握Image ViewView等控件的使用方式;

实验要求

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

实验内容

步骤一,创建Android工程

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

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

图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中。通过设置ImageViewandroid:layout_centerInParent属性可以ImageView在其父容器中居中。设置android:src属性则 可设置为ImageView控件设置图片源。

通过设置顶部的RelatvieLayoutandroid: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 outlinevisibilityvisibility off三个图标。

图2. Select Icon窗口

6. 设置用户账户、密码布局。

对于布局中用户账号一栏,使用了2个控件,分别是ImageViewEditText,这两个控件均在RelativeLayout中。 设置两个控件的android:layout_alignParentBottom属性可以使得2个控件底部与父容器RelativeLayout对齐。

设置ImageView控件的android:layout_widthandroid:layout_height属性为32dp

设置EditText控件的android:layout_marginStartandroid:layout_marginEnd属性为48dp

%由于EditText控件的样式(例如:底部横线颜色,文本光标颜色等)与App的主题色不符,在此可通过一些属性设置来改变。

%首先设置EditText控件的android:background属性为``@null''用于取消该控件的底部横线以及背景,文本光标的颜色则通过设置android:textCursorDrawable

以同样的方式设置用户密码一栏的布局。不同的是密码栏的右侧还增加了一个ImageView用于设置密码可见操作。因此这一栏实际上有三个控件,分别是ImageViewEditTextImageView。页面中部的布局代码下所示。

<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:textColorandroid: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)

  • 设置Nameic_launcher

  • Foreground Layer标签中的Source Asset中选择Asset TypeImage,并在Path中选择所需要使用的图标文件(在本例中为ic_logo.png)。

  • Background Layer标签中的Source Asset中选择Color,并设置Color为白色。

  • 点击确定完成Logo图标的导入。

图3. Asset Studio窗口

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

当用户点击密码栏中的密码明文切换图标时,可将密码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);
                }
            }
        });

实验小结

通过本次实验,你应该掌握了如下知识内容:

  • 使用LinearLayoutRelative Layout进行页面布局;

  • 使用Vector Asset添加图标资源;

  • 使用Image Asset导入应用启动图标;

Last updated

Was this helpful?