Mobile terminal development experiment five - the use of dialog boxes

operation result

 

Purpose

1. Master the use of Toast components;
2. Master the usage of AertDialog components;
3. Master the use of dialog button listeners;
4. Be able to skillfully apply various layout managers and controls for interface design.

Experimental content and steps

            Design the login and registration functions of an APP, click the "Login" button on the login interface, and verify the entered user name and password (requirement: the user name must be logged in with an email address, which conforms to the email format; the password must be a combination of letters, numbers, and symbols , and starts with a letter), prompts for toast components that do not meet the format requirements; click the "Register" button on the login interface, and a registration dialog box pops up for registration operations (the OK and Cancel buttons in the dialog box do not need event processing for now).

step:

• Create a login layout file activity_login.xml and a registration layout file activity_register.xml in the Layout folder .
• Write a click event for the "Login" button to achieve login verification (part of the code is given below, please complete it)
• Write a click event for the "Register" button to realize the display of the registration interface (part of the code is given below, please complete it)

References:

( 1 ) The following are drawable files, which need to be copied to the drawable folder. 
hat.png: registration icon 
login_logo.png: login icon

Image resource link  extraction code: 1234

Button register_btn = findViewById(R.id.register_btn);
Button login_btn = findViewById(R.id.login_btn);

register_btn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        RelativeLayout loginForm = (RelativeLayout) getLayoutInflater()
                .inflate(R.layout.activity_register, null);

//创建AlertDialog并显示，设置布局文件为activity_register、图标为hat.png、标题为“快速注册”、按钮包括“取消”和“注册”
           }
});

login_btn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        TextView t1=findViewById(R.id.login_password);
        Pattern pattern = Pattern.compile("[_0-9a-z]+");
        boolean tf = pattern.matcher(t1.getText()).matches();
        if(!tf) {

            //创建Toast提示“密码格式错误”，设置显示位置“居中显示”、字体颜色“红色”、显示时间3.5秒（Toast.LENGTH_LONG）
        }
    }
});

1. Copy the picture to the corresponding folder

 2. Create a new layout file

 And name it register_layout.xml (the naming will be consistent in the future)

3. In activity_main.xml, make the home page layout for login and registration

 【Reference Code】

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="center">
<!--    logo-->
    <ImageView
        android:id="@+id/img"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/login_logo"
        android:scaleType="centerCrop"
        android:layout_gravity="center_horizontal"/>
<!--    账号-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/zh_tv"
            android:layout_below="@+id/img"
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:textSize="20dp"
            android:text="账号："/>
        <EditText
            android:id="@+id/zh_et"
            android:layout_width="200dp"
            android:layout_height="60dp"
            android:hint="请输入账号（email）"
            android:inputType="textEmailAddress"
            android:singleLine="true"/>
    </LinearLayout>
<!--    密码-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/ps_tv"
            android:layout_below="@+id/zh_tv"
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:textSize="20dp"
            android:text="密码："/>
        <EditText
            android:id="@+id/ps_et"
            android:layout_below="@+id/zh_et"
            android:layout_toRightOf="@+id/ps_tv"
            android:layout_width="200dp"
            android:layout_height="60dp"
            android:hint="请输入密码"
            android:inputType="textPassword"
            android:singleLine="true"/>
    </LinearLayout>
<!--    登录、注册按钮-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/login_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="登录"/>
        <Button
            android:layout_marginLeft="80dp"
            android:id="@+id/register_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="注册"/>
    </LinearLayout>

</LinearLayout>

 4. Make the internal layout of the dialog box in register_layout.xml

 【Reference Code】

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_marginTop="20dp">
<!--    昵称-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/nc_tv"
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:text="昵称："
            android:textSize="20dp"/>
        <EditText
            android:id="@+id/nc_et"
            android:layout_width="200dp"
            android:layout_height="60dp"
            android:hint="请输入用户名" />
    </LinearLayout>
<!--    账号-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/zh_tv"
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:text="账号："
            android:textSize="20dp"/>
        <EditText
            android:id="@+id/zh_et"
            android:layout_width="200dp"
            android:layout_height="60dp"
            android:hint="请输入正确的邮箱"
            android:inputType="textEmailAddress"/>
    </LinearLayout>
<!--    密码-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/ps_tv"
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:text="密码："
            android:textSize="20dp"
            />
        <EditText
            android:id="@+id/ps_et"
            android:layout_width="200dp"
            android:layout_height="60dp"
            android:hint="请输入密码"
            android:inputType="textPassword"/>
    </LinearLayout>

</LinearLayout>

There is no need to make a title, because the java code will set the title bar of the dialog box later.

5. Write JAVA code

【Reference Code】

package com.example.a111;

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import java.util.regex.Pattern;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button register_btn = findViewById(R.id.register_btn);
        Button login_btn = findViewById(R.id.login_btn);

        register_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                LinearLayout loginForm = (LinearLayout) getLayoutInflater()
                        .inflate(R.layout.register_layout, null);
//创建AlertDialog并显示，设置布局文件为activity_register、图标为hat.png、标题为“快速注册”、按钮包括“取消”和“注册”
                AlertDialog.Builder builder=new AlertDialog.Builder(MainActivity.this);
                builder.setIcon(R.drawable.hat)
                        .setTitle("快速注册")
                        .setView(loginForm)
                        .setNegativeButton("取消",null)
                        .setPositiveButton("注册",null)
                        .create()
                        .show();
            }
        });

        login_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                TextView t1=findViewById(R.id.ps_et);
                Pattern pattern = Pattern.compile("[_0-9a-z]+");
                boolean tf = pattern.matcher(t1.getText()).matches();
                if(!tf) {
                    //创建Toast提示“密码格式错误”，设置显示位置“居中显示”、字体颜色“红色”、显示时间3.5秒（Toast.LENGTH_LONG）
                    Toast toast=new Toast(MainActivity.this);
                    toast.setGravity(Gravity.CENTER,0,0);
                    TextView textView=new TextView(MainActivity.this);
                    textView.setTextSize(14f);
                    textView.setTextColor(Color.RED);
                    textView.setText("密码格式错误");
                    toast.setDuration(Toast.LENGTH_LONG);
                    toast.setView(textView);
                    toast.show();
                }
            }
        });

    }
}

【Code Explanation】

1. Create and display AlertDialog, set the layout file as activity_register, the icon as hat.png, the title as "Quick Registration", and the buttons include "Cancel" and "Register"

AlertDialog.Builder builder=new AlertDialog.Builder(MainActivity.this);
                builder.setIcon(R.drawable.hat)
                        .setTitle("快速注册")
                        .setView(loginForm)
                        .setNegativeButton("取消",null)
                        .setPositiveButton("注册",null)
                        .create()
                        .show();