本项目作为鸿蒙开发课的大作业，供大家学习，本项目主要实现了，登录、注册修改密码界面的实现，并且实现了三个页面之间的互相切换。

一、项目搭建

1.1、项目配置

【牛角书】基于HarmoyOS的登陆界面实现这里注意API要用7及以下的，可以用Java开发。

1.2、项目结构

【牛角书】基于HarmoyOS的登陆界面实现

二、绘制三个界面

界面的绘制网上有很多的模板这里只说我觉得重要的点

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、三个页面

【牛角书】基于HarmoyOS的登陆界面实现

三、实体类

3.1、页面切换

这里的页面切换是指主页面叶子页面之间的切换，不同应用间的页面切换与之大同小异。页面切换分为三类，一类直接切换，一类带参切换，一类带返回值切换。在本demo中只实现了第一类。

首先，利用compent类中的ClickedListener方法创建事件，然后利用onclick判断是否点击事件以下是代码截图

【牛角书】基于HarmoyOS的登陆界面实现

另外两个页面的切换回来也是如此，不做过多的赘述。

3.2、密码遮盖

在java代码中将刚刚编写的布局文件加载进来，并通过给文本框组件的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);

总结

好了，本次的项目就到这里，通过这次的项目实战学习到了很多东西，尤其在页面切换那里卡了很久，也找了很多的教程，最终也是实现了，收获满满，项目也有很多的不足，需要后面去不断地改进。

zut——LH

附代码

登录页面

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

MainAbilitySlice

package com.example.login.slice;

import com.example.login.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.agp.utils.Color;

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

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

        account = (TextField) findComponentById(ResourceTable.Id_account1);
        password = (TextField) findComponentById(ResourceTable.Id_password1);
        ForgetPassword = (Text) findComponentById(ResourceTable.Id_ForgetPassword);
        login = (Button) findComponentById(ResourceTable.Id_login);
        register = (Button) findComponentById(ResourceTable.Id_register);

        ForgetPassword.setClickedListener(this);
        login.setClickedListener(this);
        register.setClickedListener(this);

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


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

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

    @Override
    public void onClick(Component component) {
        if (component==ForgetPassword){
            Intent i=new Intent();
            present(new ForgetAbilitySlice(),i);

        }else if(component==login){

        }else if (component==register){
            Intent i=new Intent();
            present(new RegisterAbilitySlice(),i);

        }

    }

}

ForgetAbilitySlice

package com.example.login.slice;

import com.example.login.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.InputAttribute;
import ohos.agp.components.TextField;
import ohos.agp.utils.Color;

public class ForgetAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    TextField password;
    TextField AgainPassword;
    Button finish;

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

        password = (TextField) findComponentById(ResourceTable.Id_password3);
        AgainPassword = (TextField) findComponentById(ResourceTable.Id_AgainPassword2);

        finish = (Button) findComponentById(ResourceTable.Id_finish1);
        finish.setClickedListener(this);

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

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

    }


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

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


    @Override
    public void onClick(Component component) {
        if (component == finish) {
            Intent i = new Intent();
            present(new MainAbilitySlice(), i);
        }
    }
}

RegisterAbilitySlice

package com.example.login.slice;

import com.example.login.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.InputAttribute;
import ohos.agp.components.TextField;
import ohos.agp.utils.Color;

public class RegisterAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    TextField account;
    TextField password;
    TextField AgainPassword;
    Button finish;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_register);
        account = (TextField) findComponentById(ResourceTable.Id_account2);
        password = (TextField) findComponentById(ResourceTable.Id_password2);
        AgainPassword = (TextField) findComponentById(ResourceTable.Id_AgainPassword1);
        finish = (Button) findComponentById(ResourceTable.Id_finish2);
        finish.setClickedListener(this);

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

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

    }


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

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


    @Override
    public void onClick(Component component) {
        if (component == finish) {
            Intent i = new Intent();
            present(new MainAbilitySlice(), i);
        }
    }
}

秒客网

【牛角书】基于HarmoyOS的登陆界面实现

一、项目搭建

1.1、项目配置

1.2、项目结构

二、绘制三个界面

2.1、文本框的提示内容

2.2、三个页面

三、实体类

3.1、页面切换

3.2、密码遮盖

相关文章