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