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

实现功能:
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);
        }
    }
}

上一篇:Python接收邮件的几种方式


下一篇:springboot(十):邮件服务