17. 输入文本框练习 - 搭建登录页面

ability_main.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:background_element="#F2F2F2">

    <TextField
        ohos:id="$+id:username"
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:hint="请输入用户名"
        ohos:text_size="17fp"
        ohos:hint_color="#999"
        ohos:text_alignment="center"
        ohos:top_margin="100vp"
        ohos:layout_alignment="horizontal_center"
        ohos:background_element="#FFFFFF"
        />

    <TextField
        ohos:id="$+id:password"
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:hint="请输入密码"
        ohos:text_size="17fp"
        ohos:hint_color="#999"
        ohos:text_alignment="center"
        ohos:top_margin="10vp"
        ohos:layout_alignment="horizontal_center"
        ohos:background_element="#FFFFFF"
        ohos:text_input_type="pattern_password"
        />

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="忘记密码了？"
        ohos:text_size="17fp"
        ohos:text_color="#979797"
        ohos:top_margin="13vp"
        ohos:layout_alignment="right"
        ohos:right_margin="20vp"
        />

    <Button
        ohos:height="47vp"
        ohos:width="319vp"
        ohos:text="登录"
        ohos:text_size="24fp"
        ohos:text_color="#FEFEFE"
        ohos:text_alignment="center"
        ohos:background_element="#21A8FD"
        ohos:top_margin="77vp"
        ohos:layout_alignment="horizontal_center"
        />

    <Button
        ohos:height="47vp"
        ohos:width="319vp"
        ohos:text="注册"
        ohos:text_size="24fp"
        ohos:text_color="#FEFEFE"
        ohos:text_alignment="center"
        ohos:background_element="#21A8FD"
        ohos:top_margin="13vp"
        ohos:layout_alignment="horizontal_center"
        />

    <Text
        ohos:id="$+id:msg"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="30fp"
        ohos:text_color="#FFFFFF"
        ohos:text_alignment="center"
        ohos:background_element="#464343"/>

</DirectionalLayout>

MainAbilitySlice.java

package com.example.myapplication.slice;

import com.example.myapplication.ResourceTable;
import com.example.myapplication.toastututils.ToastUtils;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;
import ohos.multimodalinput.event.TouchEvent;

import java.util.Random;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    Text forgetPassword;
    Button login;
    Button register;
    TextField username;
    TextField password;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        //1. 找到组件
        username = (TextField) findComponentById(ResourceTable.Id_username);
        password = (TextField) findComponentById(ResourceTable.Id_password);

        forgetPassword = (Text) findComponentById(ResourceTable.Id_forgetPassword);

        login = (Button) findComponentById(ResourceTable.Id_login);
        register = (Button) findComponentById(ResourceTable.Id_register);

        //2. 添加点击事件
        forgetPassword.setClickedListener(this);
        login.setClickedListener(this);
        register.setClickedListener(this);

    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    public void onClick(Component component) {
        if (component == forgetPassword){
            //跳转到忘记密码页面
            ToastUtils.showDialog(this,"用户点击了忘记密码");
        }else if (component == login){
            //比较用户名和密码是否正确
            String usernameInput = username.getText();
            String passwordInput = password.getText();

            //用用户输入的用户名和密码来比较是否正确
            //在实际开发中，是将用户名和密码传递给服务器进行比较
            //先写死

            if ("zhangsan".equals(usernameInput) && "123456".equals(passwordInput)){
                //如果正确，则跳转到APP主页面
                ToastUtils.showDialog(this,"登录成功");
            }else {
                //只要有一个错误了，都不能登录
                //需要给用户一个提示
                ToastUtils.showDialog(this,"用户名或密码错误");
            }

        }else if (component == register){
            //跳转到注册页面
            ToastUtils.showDialog(this,"注册成功");
        }

    }
}

ToastUtils.java

package com.example.myapplication.toastututils;


import com.example.myapplication.ResourceTable;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.LayoutScatter;
import ohos.agp.components.Text;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;
import ohos.app.Context;

public class ToastUtils {
    public static void showDialog(Context context,String message){

        //1.把xml文件加载到内存当中。
        DirectionalLayout dl = (DirectionalLayout) LayoutScatter.getInstance(context).parse(ResourceTable.Layout_mytoast, null, false);

        //2.获取到当前布局对象中文本组件
        Text msg = (Text) dl.findComponentById(ResourceTable.Id_msg);
        //3.把需要提示的信息设置到文本组件中
        msg.setText(message);

        //4.创建一个吐司对象
        ToastDialog td = new ToastDialog(context);
        //设置吐司的大小。--- 默认是包裹内容
        td.setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT,DirectionalLayout.LayoutConfig.MATCH_CONTENT);
        //设置出现的时间
        td.setDuration(2000);
        //设置对齐方式
        td.setAlignment(LayoutAlignment.BOTTOM);
        //把xml中的布局对象交给吐司
        td.setContentCustomComponent(dl);
        //把吐司做一个偏移
        //偏移是以吐司弹框的基准位置进行偏移的
        //如果是正数，就默认往屏幕中央去偏移
        //如果是负数，就往屏幕中央的反方向去偏移
        td.setOffset(0,200);
        //让吐司出现
        td.show();
    }
}