鸿蒙系统登陆页面开发教程源码可下载

本文主要是介绍鸿蒙系统登陆页面开发教程源码可下载，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

实现功能：
1、输入邮箱
2、输入不可见密码
3、邮箱和密码校验；测试邮箱为：test@test.com 密码为：123；输入邮箱和密码正确跳转到成功页面，否则提示邮箱和密码错误。
源码下载地址：点击下载（访问密码：2604）
页面演示：

输入邮箱和密码错误提示页面：

登陆成功提示页面：

上代码：
页面布局 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"
    >

    <include
        ohos:id="$+id:head_text"
        ohos:height="56vp"
        ohos:layout="$layout:head"
        ohos:width="match_parent"
        ohos:align_parent_top="true"/>

    <ScrollView
        ohos:id="$+id:scrollview"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:below="id:head_text"
        ohos:top_margin="150vp">
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:orientation="vertical"
            ohos:background_element="#f1f3f5">

            <TextField
                ohos:id="$+id:mail"
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:bottom_padding="4vp"
                ohos:element_cursor_bubble="#00000000"
                ohos:end_margin="5vp"
                ohos:end_padding="5vp"
                ohos:hint="$string:mail"
                ohos:multiple_lines="false"
                ohos:start_margin="5vp"
                ohos:start_padding="5vp"
                ohos:text_alignment="bottom"
                ohos:text_input_type="pattern_text"
                ohos:text_size="26vp"
                ohos:top_padding="5vp"
                ohos:top_margin="10vp"
                ohos:vertical_center="true"
                />
            <DirectionalLayout
                ohos:height="1vp"
                ohos:width="match_parent"
                ohos:background_element="#33000000"
                ohos:end_margin="4vp"
                ohos:start_margin="4vp"/>

            <Text
                ohos:id="$+id:errorMail"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:text="$string:errorMail"
                ohos:visibility="hide"
                ohos:text_size="24vp"/>

            <TextField
                ohos:id="$+id:password"
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:text_input_type="pattern_password"
                ohos:hint="$string:password"
                ohos:top_margin="10vp"
                ohos:text_size="26vp"
                ohos:start_margin="5vp"
                ohos:start_padding="5vp"/>

            <DirectionalLayout
                ohos:height="1vp"
                ohos:width="match_parent"
                ohos:background_element="#33000000"
                ohos:end_margin="4vp"
                ohos:start_margin="4vp"/>

            <Text
                ohos:id="$+id:errorPassword"
                ohos:height="match_content"
                ohos:width="match_content"
                ohos:text="$string:errorPassword"
                ohos:visibility="hide"
                ohos:text_size="24vp"/>

            <Button
                ohos:id="$+id:loginButton"
                ohos:height="match_content"
                ohos:width="match_parent"
                ohos:background_element="$graphic:background_login"
                ohos:bottom_margin="24vp"
                ohos:end_margin="24vp"
                ohos:start_margin="24vp"
                ohos:top_padding="15vp"
                ohos:bottom_padding="15vp"
                ohos:text="$string:login"
                ohos:text_alignment="center"
                ohos:text_color="#F2FFFFFF"
                ohos:text_size="24vp"
                ohos:top_margin="20vp"/>

        </DirectionalLayout>
    </ScrollView>
</DirectionalLayout>

后台java代码片段：

package com.xiao.hmexample.slice;

import com.xiao.hmexample.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.Text;
import ohos.agp.components.TextField;
import ohos.hiviewdfx.HiLog;

/**
 * 登陆样例
 */
public class MainAbilitySlice extends AbilitySlice {

    private TextField mail;
    private TextField password;
    private Button loginButton;
    private Text errorMail;
    private Text errorPassword;

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

        initCompent();
        initListener();
    }

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

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

    /**
     * 初始化组件
     */
    private void initCompent(){
        //邮箱错误提示
        errorMail = (Text)findComponentById(ResourceTable.Id_errorMail);
        //密码错误提示
        errorPassword = (Text)findComponentById(ResourceTable.Id_errorPassword);
        //邮箱和密码输入框
        mail = (TextField)findComponentById(ResourceTable.Id_mail);
        password = (TextField)findComponentById(ResourceTable.Id_password);
        //登陆按钮
        loginButton = (Button)findComponentById(ResourceTable.Id_loginButton);

    }

    /**
     * 初始组件事件
     */
    private void initListener(){
        //点击登陆按钮执行登陆方法
        loginButton.setClickedListener(component->login(mail.getText(),password.getText()));
    }

    /**
     * 登陆方法，用户名和密码对的跳转到登陆成功页面，否则提示失败
     * @param mail test@test.com
     * @param password 123
     */
    private void login(final String mail,final String password){
        System.out.println("邮箱："+mail+" 密码："+password);
        if(!mail.equals("test@test.com")){
            errorMail.setVisibility(Component.VISIBLE);
        }else if(!password.equals("123")){
            errorPassword.setVisibility(Component.VISIBLE);
        }else{
          Intent intent =new Intent();
          this.present(new IndexAbilitySlice(),intent);
        }
    }
}

这篇关于鸿蒙系统登陆页面开发教程源码可下载的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！