Experimento cinco de desarrollo de terminales móviles: el uso de cuadros de diálogo

resultado de la operación

 

Objetivo

1. Domina el uso de los componentes de Toast;
2. Domine el uso de los componentes de AertDialog;
3. Domine el uso de oyentes de botones de diálogo;
4. Ser capaz de aplicar hábilmente varios administradores de diseño y controles para el diseño de la interfaz.

Contenido y pasos experimentales

            Diseñe las funciones de inicio de sesión y registro de una aplicación, haga clic en el botón "Iniciar sesión" en la interfaz de inicio de sesión y verifique el nombre de usuario y la contraseña ingresados ​​(requisito: el nombre de usuario debe iniciar sesión con una dirección de correo electrónico que se ajuste al formato de correo electrónico ; la contraseña debe ser una combinación de letras, números y símbolos, y comienza con una letra), solicitudes de componentes de brindis que no cumplen con los requisitos de formato; haga clic en el botón "Registrarse" en la interfaz de inicio de sesión y aparecerá un cuadro de diálogo de registro aparece para operaciones de registro (los botones Aceptar y Cancelar en el cuadro de diálogo no necesitan procesamiento de eventos por ahora).

paso:

• Cree un archivo de diseño de inicio de sesión activity_login.xml y un archivo de diseño de registro activity_register.xml en la carpeta Diseño .
• Escriba un evento de clic para el botón "Iniciar sesión" para lograr la verificación de inicio de sesión (parte del código se proporciona a continuación, complételo)
• Escriba un evento de clic para el botón "Registrarse" para realizar la visualización de la interfaz de registro (parte del código se proporciona a continuación, complételo)

Referencias:

( 1 ) Los siguientes son archivos dibujables , que deben copiarse en la carpeta dibujable . 
hat.png: icono de registro 
login_logo.png: icono de inicio de sesión

Código de extracción de enlace de recurso de imagen  : 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. Copie la imagen a la carpeta correspondiente

 2. Crear un nuevo archivo de diseño

 Y asígnele el nombre register_layout.xml (el nombre será consistente en el futuro)

3. En activity_main.xml, haga el diseño de la página de inicio para iniciar sesión y registrarse

 【Código de referencia】

<?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. Realice el diseño interno del cuadro de diálogo en register_layout.xml

 【Código de referencia】

<?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>

No es necesario crear un título, ya que el código Java configurará la barra de título del cuadro de diálogo más adelante.

5. Escribir código JAVA

【Código de referencia】

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();
                }
            }
        });

    }
}

【Explicación del código】

1. Cree y muestre AlertDialog, configure el archivo de diseño como activity_register, el ícono como hat.png, el título como "Registro rápido" y los botones incluyen "Cancelar" y "Registrar".

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