提要
本人大二学生党,刚接触鸿蒙开发,写了个登录页面在小Demo,不足之处希望多多包含
1、XMl
1、登录页面
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<Text
ohos:id="$+id:login_head"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:bottom_margin="400vp"
ohos:text="$string:login_top"
ohos:text_alignment="center"
ohos:text_size="28fp"
ohos:top_margin="210vp"
>
</Text>
<!--输入账户对应栏位-->
<DirectionalLayout
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="left"
ohos:left_margin="20vp"
ohos:orientation="horizontal"
ohos:top_margin="260fp"
>
<Text
ohos:id="$+id:username_label"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="$string:username"
ohos:text_alignment="left"
ohos:text_color="#FF090909"
ohos:text_size="20fp"
ohos:weight="1"/>
<TextField
ohos:id="$+id:username"
ohos:height="60vp"
ohos:width="match_parent"
ohos:background_element="$graphic:color_cyan_element"
ohos:basement="#000099"
ohos:right_margin="70vp"
ohos:hint="$string:username_hint"
ohos:hint_color="#FF424275"
ohos:text_alignment="center"
ohos:text_color="#FF090909"
ohos:text_size="20fp"
ohos:weight="1"/>
</DirectionalLayout>
<!--密码对应栏位-->
<DirectionalLayout
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="left"
ohos:left_margin="20vp"
ohos:orientation="horizontal"
ohos:top_margin="340fp"
>
<Text
ohos:id="$+id:password_label"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="$string:password"
ohos:text_alignment="left"
ohos:text_color="#FF090909"
ohos:text_size="20fp"
ohos:weight="1"/>
<TextField
ohos:id="$+id:password"
ohos:height="60vp"
ohos:width="match_parent"
ohos:background_element="$graphic:color_cyan_element"
ohos:basement="#000099"
ohos:right_margin="70vp"
ohos:hint="$string:password_hint"
ohos:hint_color="#FF424275"
ohos:text_alignment="center"
ohos:text_color="#FF090909"
ohos:text_font="$string:font"
ohos:text_size="20fp"
ohos:weight="1"/>
</DirectionalLayout>
<!--登录按钮-->
<Button
ohos:id="$+id:login_submit"
ohos:height="40vp"
ohos:width="150vp"
ohos:background_element="$graphic:background_button"
ohos:layout_alignment="center"
ohos:text="$string:submit_bt"
ohos:text_color="#FFFFFEFE"
ohos:text_size="20vp"
ohos:top_margin="430vp"
ohos:left_margin="120vp"
/>
</DependentLayout>
2、ListTab内容
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<Text
ohos:id="$+id:text_f4_cky"
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_ability_main"
ohos:layout_alignment="horizontal_center"
ohos:text="$string:cky"
ohos:text_size="24fp"
ohos:center_in_parent="true"
/>
<Image
ohos:id="$+id:imageContext"
ohos:width="100vp"
ohos:height="100vp"
ohos:image_src="$media:myson_cky"
ohos:above="$id:text_f4_cky"
ohos:max_text_lines ="1"
ohos:multiple_lines="false"
ohos:layout_alignment="horizontal_center"
ohos:center_in_parent="true"
/>
</DependentLayout>
3、首页(登录后即到达这里)
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<TabList
ohos:id="$+id:tab_list"
ohos:height="40vp"
ohos:width="match_parent"
ohos:tab_length="60vp"
ohos:text_size="20fp"
ohos:normal_text_color="#FF0C0C0C"
ohos:selected_text_color="#FFF70303"
ohos:selected_tab_indicator_color="#FF0AEB0A"
ohos:selected_tab_indicator_height="2vp"
ohos:orientation="horizontal"
ohos:center_in_parent="true"
ohos:text_alignment="center"
ohos:above="$id:text_helloworld"
ohos:tab_margin="10vp"
ohos:bottom_margin="800px"
></TabList>
<DirectionalLayout
ohos:id="$+id:tab_container"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:bottom_margin="1000px"
/>
<Text
ohos:id="$+id:text_helloworld"
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_ability_main"
ohos:layout_alignment="horizontal_center"
ohos:text="$string:erzhiyu"
ohos:text_size="24fp"
ohos:center_in_parent="true"
/>
<Button
ohos:height="match_content"
ohos:width="match_content"
ohos:id="$+id:button"
ohos:text_color="#FF1B1919"
ohos:text="按钮"
ohos:text_size="24fp"
ohos:bottom_padding="8vp"
ohos:top_padding="8vp"
ohos:left_padding="70vp"
ohos:right_padding="70vp"
ohos:top_margin="8vp"
ohos:background_element="$graphic:background_button"
ohos:below="$id:text_helloworld"
ohos:center_in_parent="true"
/>
<Image
ohos:id="$+id:imageContext"
ohos:width="100vp"
ohos:height="100vp"
ohos:image_src="$media:icon"
ohos:below="$id:button"
ohos:layout_alignment="horizontal_center"
ohos:center_in_parent="true"
/>
</DependentLayout>
2、string.json
{
"string": [
{
"name": "app_name",
"value": "MyApplication"
},
{
"name": "mainability_description",
"value": "Java_Phone_Empty Feature Ability"
},
{
"name": "HelloWorld",
"value": "Hello World"
},{
"name": "erzhiyu",
"value": "跳转"
},{
"name": "cky",
"value": "cky床位号1,体重75kg,喜欢喝饮料"
},{
"name": "yhb",
"value": "叶宏斌床位号2,体重75kg,喜欢喝饮料"
},{
"name": "zxy",
"value": "zxy床位号3,体重75kg,喜欢喝饮料"
},{
"name":"hyh",
"value": "hyh床位号4,体重75kg,喜欢喝饮料"
},{
"name": "login_top",
"value": "登录"
},{
"name": "username",
"value": "输入账户"
}, {
"name": "font",
"value": "serif"
},
{
"name": "username_hint",
"value": "输入账户"
},
{
"name": "password_hint",
"value": "输入密码"
},
{
"name": "password",
"value": "输入密码:"
},
{
"name": "submit_bt",
"value": "点击登录"
}
]
}
3、background
1、按钮
<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<corners
ohos:radius="100"
/>
<solid
ohos:color="#FFF70303"/>
</shape>
2.主程序
1、首页面
package com.etc.myapplication.slice;
import com.etc.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
public class LoginAfter extends AbilitySlice {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_loginafter);
TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
tabList.removeAllComponents();
TabList.Tab tab1 = tabList.new Tab(getContext());
tab1.setText("cky");
tabList.addTab(tab1);
TabList.Tab tab2 = tabList.new Tab(getContext());
tab2.setText("zxy");
tabList.addTab(tab2);
TabList.Tab tab3 = tabList.new Tab(getContext());
tab3.setText("yhb");
tabList.addTab(tab3);
TabList.Tab tab4 = tabList.new Tab(getContext());
tab4.setText("hyh");
tabList.addTab(tab4);
tabList.setFixedMode(true);
AbilitySlice slice = this;
tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
@Override
public void onSelected(TabList.Tab tab) {
//某个Tab页从未选中到选中调用这个方法
ComponentContainer container = (ComponentContainer) findComponentById(ResourceTable.Id_tab_container);
if(tab.getText().equals("cky")){
container.removeAllComponents();
Component cky = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_f4_cky,null,false);
Text text = (Text)cky.findComponentById(ResourceTable.Id_text_f4_cky);
text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
text.startAutoScrolling();
text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
container.addComponent(cky);
}else if(tab.getText().equals("zxy")) {
container.removeAllComponents();
Component zxy = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_f4_zxy,null,false);
Text text = (Text)zxy.findComponentById(ResourceTable.Id_text_f4_zxy);
text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
text.startAutoScrolling();
text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
container.addComponent(zxy);
}else if(tab.getText().equals("yhb")){
container.removeAllComponents();
Component yhb= LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_f4_yhb,null,false);
Text text = (Text)yhb.findComponentById(ResourceTable.Id_text_f4_yhb);
text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
text.startAutoScrolling();
text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
container.addComponent(yhb);
}else{
container.removeAllComponents();
Component hyh = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_f4_hyh,null,false);
Text text = (Text)hyh.findComponentById(ResourceTable.Id_text_f4_hyh);
text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
text.startAutoScrolling();
text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
container.addComponent(hyh);
}
}
@Override
public void onUnselected(TabList.Tab tab) {
//某个Tab页从选中到未选中
}
@Override
public void onReselected(TabList.Tab tab) {
//某个Tab已经是选中状态,再次被选中调用这个方法
}
});
Button button = (Button) findComponentById(ResourceTable.Id_button);
button.setClickedListener(listener -> present(new SecondAbilitySlice(),new Intent()));
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
2、登录页面
package com.etc.myapplication.slice;
import com.etc.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;
public class MainAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
Button button = (Button) findComponentById(ResourceTable.Id_login_submit);
TextField textUsername = (TextField) findComponentById(ResourceTable.Id_username);
TextField textPassword =(TextField) findComponentById(ResourceTable.Id_password);
button.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
String username = textUsername.getText().toString().trim();
String password = textPassword.getText().toString().trim();
if(button!=null && username.equals("cyz") && password.equals("1234")){
present(new MainAbilitySlice(),new Intent());
new ToastDialog(getContext()).setText("登录成功").setAlignment(LayoutAlignment.CENTER).show();
// button.setClickedListener(listener -> present(new LoginAfter(),new Intent()));
present(new LoginAfter(),new Intent());
}else {
new ToastDialog(getContext()).setText("用户名或密码有误请重新输入").setAlignment(LayoutAlignment.CENTER).show();
}
}
});
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
3、首页按钮跳转页面
package com.etc.myapplication.slice;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.DependentLayout;
import ohos.agp.components.Text;
import ohos.agp.components.TextField;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;
public class SecondAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent){
super.onStart(intent);
DependentLayout myLayout = new DependentLayout(this);
myLayout.setWidth(DependentLayout.LayoutConfig.MATCH_PARENT);
myLayout.setHeight(DependentLayout.LayoutConfig.MATCH_PARENT);
ShapeElement background = new ShapeElement();
background.setRgbColor(new RgbColor(255,255,255));
myLayout.setBackground(background);
TextField text = new TextField(this);
text.setText("\n" +
"鼓浪屿(英文:Kulangsu,古属泉州府同安县 [35-36] )原名“圆沙洲”,别名“圆洲仔”,南宋时期命“五龙屿”,明朝改称“鼓浪屿”。隶属于厦门市思明区鼓浪屿街道,下辖龙头社区、内厝澳社区,辖区禁止机动车辆通行(警消等除外)至高点为日光岩,与厦门岛上的厦门世茂海峡大厦、厦门大学等隔海相望。\n" +
"鼓浪屿全岛的绿地覆盖率超过40%,植物种群丰富,各种乔木、灌木、藤木、地被植物共90余科,1000余种。代表景点有:日光岩、菽庄花园、皓月园、毓园、鼓浪石、鼓浪屿钢琴博物馆、郑成功纪念馆、海底世界、天然海滨浴场、海天堂构等。\n" +
"鼓浪屿风景名胜区获得国家5A级旅游景区、全国重点文物保护单位、中国最美五大城区等荣誉。2017年7月8日,“鼓浪屿:国际历史社区” [1] 被列入世界遗产名录,成为中国第52项世界遗产项目。 [2] \n" +
"自2020年3月6日8时起,鼓浪屿风景名胜区恢复开放,厦鼓游客航线同日恢复航行 [3] ;同时,为致敬奋战在抗“疫”一线的医护工作者,鼓浪屿风景名胜区将在恢复运营之日起至2020年12月31日止,对全国医护工作者及随行直系亲属实行免费开放政策。 [4] \n");
text.setWidth(DependentLayout.LayoutConfig.MATCH_PARENT);
text.setTextSize(100);
text.setTextColor(Color.GREEN);
DependentLayout.LayoutConfig textConfig = new DependentLayout.LayoutConfig(DependentLayout.LayoutConfig.MATCH_CONTENT,DependentLayout.LayoutConfig.MATCH_CONTENT);
textConfig.addRule(DependentLayout.LayoutConfig.CENTER_IN_PARENT);
text.setLayoutConfig(textConfig);
myLayout.addComponent(text);
super.setUIContent(myLayout);
}
}