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