鸿蒙登录Demo

本文档展示了鸿蒙系统中创建登录页面、列表页和首页的XML布局设计,包括文本框、按钮、标签页和内容切换。在首页中,实现了通过TabList进行内容动态加载,并为每个Tab配置了不同的内容。此外,还提供了登录验证的简单实现,当用户输入正确信息后,可以跳转至首页。
摘要由CSDN通过智能技术生成

提要

本人大二学生党,刚接触鸿蒙开发,写了个登录页面在小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);
    }
}

实现预览

在这里插入图片描述在这里插入图片描述在这里插入图片描述

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值