【江鸟中原】鸿蒙登录与注册页面

鸿蒙结课的作业，本项目主要实现了，登录、注册界面的实现。

一、项目搭建

1.1、项目配置

这里注意API要用7及以下的，可以用Java开发。

1.2、项目结构

二、界面设计

2.1、文本框的提示内容

首先在resource文件目录下的如图蓝色划线的两个文件里写如下内容

{
  "name": "reminder_text_phone",
  "value": "Enter mobile number"
},
{
  "name": "reminder_text_password",
  "value": "Enter mobile password"
}


{
  "name": "reminder_text_phone",
  "value": "请输入手机号"
},
{
  "name": "reminder_text_password",
  "value": "请输入密码"
}

2.2、密码掩盖

作为登录密码不能直接显示，所以为了安全我们要将密码掩盖，通过给文本框组件的id获得这个TextField组件的对象，并分别添加上焦点改变事件，当该文本框获得焦点改变事件后，将文本编辑颜色变为红色，失去焦点就变为黑色，并设置输入密码的文本框的文字不进行明文显示。代码如下:

password.setFocusChangedListener(new Component.FocusChangedListener() {
    @Override
    public void onFocusChange(Component component, boolean b) {
        if (b){
            //获得焦点，将文本编辑颜色改为红色
            password.setTextColor(Color.RED);
        }else {
            //失去焦点，变为黑色
            password.setTextColor(Color.BLACK);
        }
    }
});
//设置文本显示为密码类型
password.setTextInputType(InputAttribute.PATTERN_PASSWORD);

2.3、页面代码

登录界面代码

<?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:alignment="center"
    ohos:orientation="vertical"
    ohos:background_element="#f2f2f2"
    >


    <Text
        ohos:id="$+id:login_text"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:text="欢迎"
        ohos:text_color="#FF556569"
        ohos:text_size="35vp"
        ohos:top_margin="100vp"
        />
    <TextField
        ohos:id="$+id:account1"
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:hint="$string:reminder_text_phone"
        ohos:text_alignment="center"
        ohos:text_color="#999999"
        ohos:text_size="17fp"
        ohos:top_margin="100vp"
        ohos:background_element="#FFFFFF"
        ohos:layout_alignment="horizontal_center"
        />
    <TextField
        ohos:id="$+id:password1"
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:background_element="#FFFFFF"
        ohos:layout_alignment="horizontal_center"
        ohos:hint="$string:reminder_text_password"
        ohos:text_alignment="center"
        ohos:text_color="#999999"
        ohos:text_size="17fp"
        ohos:top_margin="10vp"
        />
    <Text
        ohos:id="$+id:ForgetPassword"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="right"
        ohos:right_margin="20vp"
        ohos:text="忘记密码了?"
        ohos:text_color="#979797"
        ohos:text_size="17fp"
        ohos:top_margin="13vp"
        />

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


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

</DirectionalLayout>

注册界面

<?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:account2"
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:hint="$string:reminder_text_phone"
        ohos:text_alignment="center"
        ohos:text_color="#999999"
        ohos:text_size="17fp"
        ohos:top_margin="100vp"
        ohos:background_element="#FFFFFF"
        ohos:layout_alignment="horizontal_center"
        />
    <TextField
        ohos:id="$+id:password2"
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:background_element="#FFFFFF"
        ohos:layout_alignment="horizontal_center"
        ohos:hint="$string:reminder_text_password"
        ohos:text_alignment="center"
        ohos:text_color="#999999"
        ohos:text_size="17fp"
        ohos:top_margin="10vp"
        />


    <Text
        ohos:id="$+id:AgainPassword1"
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:hint="$string:reminder_text_password"
        ohos:text_size="17fp"
        ohos:text_color="#999999"
        ohos:text_alignment="center"
        ohos:top_margin="7vp"
        ohos:layout_alignment="horizontal_center"
        ohos:background_element="#FFFFFF"
        />

    <Button
        ohos:id="$+id:finish2"
        ohos:height="47vp"
        ohos:width="319vp"
        ohos:text="完成"
        ohos:text_size="24vp"
        ohos:text_color="#FEFEFE"
        ohos:text_alignment="center"
        ohos:background_element="#21a8fd"
        ohos:top_margin="13vp"
        ohos:layout_alignment="horizontal_center"/>

</DirectionalLayout>

页面就不做美化设计了。

登录界面

注册界面

以上只是简单设计了登录与注册两个页面，仍然还有很多不足，希望以后可以改进。