首页 > 其他分享 >【牛角书】基于HarmoyOS的登陆界面实现

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

时间：2022-12-18 12:31:43浏览次数：49  
标签：牛角 界面 void Component HarmoyOS ResourceTable import password public

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

一、项目搭建

1.1、项目配置

屏幕截图 2022-12-17 163533.png 这里注意API要用7及以下的，可以用Java开发。

1.2、项目结构

屏幕截图 2022-12-17 201337.png

二、绘制三个界面

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

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

未命名的设计.png

三、实体类

3.1、页面切换

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

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

屏幕截图 2022-12-17 204402.png

屏幕截图 2022-12-17 204418.png

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

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

标签：牛角,界面,void,Component,HarmoyOS,ResourceTable,import,password,public
From： https://blog.51cto.com/u_15535683/5950850

相关文章

  • 『牛角书』基于鸿蒙开发小小音乐播放器
    鸿蒙开发小应用-音乐播放器话不多说，展示。第一次进去会申请访问权限，点击“始终允许”点击“始终允许”后退出一下，再次点击进入该应用会看到一首音乐DreamitPossible，因为模......
  • vue3项目，记录我是如何用1h实现产品预估1天工作量的界面需求
    最近在编写前端界面，硬是一人一周时间加班加点写完了一个项目的前端界面（一级菜单有12个页面+一个控制台大屏，二三级界面有N个），之前预估前端界面的编写需要一个月，我是自己......
  • 『牛角书』鸿蒙基础计算器
    简介这是我自己的鸿蒙期末考查大作业，通过一学期课程的学习，研究出来的一些成果，代码还有很多需要优化的地方，本文内容仅为利用组件简单的计算器页面。成果展示开发思路计算器......
  • Python Tkinter界面应用开发-黄棒清-专题视频课程
    PythonTkinter界面应用开发—1773人已学习课程介绍        如果你想在Python中构建图形用户界面应用程序，Tkinter是一个的选择.，TkInter应用程序几乎可以在任何桌面......
  • 3Dmax界面_视图调整
    一.试图模型显示效果的切换'默认是真实显示效果'线框模式 快捷键F3 ---->真实显示效果和线框显示效果的切换（切换到线框显示效果再按F3就切换到了真实显示效果）。线面......
  • 『牛角书』基于HarmonyOS的计算器页面
    @​​toc​简介这里分享的是我自己的鸿蒙期末考查大作业，通过一学期课程的学习，研究出来的一些成果，代码还有很多需要优化的地方，本文内容仅为利用组件形成的计算器页面。成果展......
  • B/S端界面控件DevExtreme内置的图标库介绍
    DevExtreme拥有高性能的HTML5/JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NETCore，jQuery，Knockout等）构建交互式的Web应用程序，该套件附带功能......
  • pyqt5图书管理系统--6、用户界面之借阅书籍和归还书籍
    本节分为两个部分：借阅书籍界面设计、归还书籍界面设计。主要流程：1、通过进入借阅书籍界面，点击借阅书籍按钮，实现借阅书籍的消息框提醒，和相关数据库内容变动。     2......
  • 15 个很棒的 Bootstrap UI 界面编辑器
    [导读]​​BootstrapMagic​​​​BootSwatchr​​​​BootstrapLiveEditor​​​​FancyBoot​​ ​​StyleBootstrap​​​​Lavish​​​​BootstrapThemeRol......
  • 图形用户界面（GUI）编程可以学习C++ Builder，多图、实例、书籍
    个人觉得SDK纯API方式编写Windows程序已经过时了，效率太低，了解一下原理就可以了，主要是消息机制。图形用户界面（GUI）编程可以学习C++Builder，架构先进（和C#一样拖控件），入门比较......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99