鸿蒙系统，鸿蒙app简易登录界面，界面开发教程

鸿蒙系统，鸿蒙app简易登录界面，界面开发教程。

// 这个是主Ability
public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        //将界面展示出来
        super.setUIContent(ResourceTable.Layout_dy_main);
    }

}

element下string.json

{
  "string": [
    {
      "name": "app_name",
      "value": "dy"
    },
    {
      "name": "mainability_description",
      "value": "Java_Phone_Empty Feature Ability"
    },
    {
      "name": "title",
      "value": "解析抖音地址"
    },
    {
      "name": "hint_text",
      "value": "输入解析地址"
    },
    {
      "name": "btn_text",
      "value": "解析:"
    },
    {
      "name": "input_text",
      "value": "请输入内容"
    },
    {
      "name": "username",
      "value": "输入账户："
    },
    {
      "name": "submit_bt",
      "value": "点击登录"
    },
    {
      "name": "login_label",
      "value": "登录"
    },
    {
      "name": "password",
      "value": "输入密码："
    },
    {
      "name": "username_hint",
      "value": "输入账户"
    },
    {
      "name": "password_hint",
      "value": "输入密码"
    },
    {
      "name": "font",
      "value": "serif"
    }
  ]
}

graphic下面几个文件

background_ability_main.xml

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <solid
        ohos:color="#FF5B1414"/>
</shape>

background_button.xml 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="10"/>
    <solid
        ohos:color="#FF0C3F67"/>
</shape>

color_cyan_element.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="20"/>
    <solid
        ohos:color="#FFFFFFFF"/>
</shape>

简易布局dy_main.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_parent"
    >
    <!--最顶部的登录中心-->
    <Text
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:bottom_margin="-250vp"
        ohos:text="$string:login_label"
        ohos:text_alignment="center"
        ohos:text_size="28fp"
        ohos:top_margin="200vp"/>
    <!--输入账户对应栏位-->
    <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:italic="false"
            ohos:text="$string:username"
            ohos:text_alignment="center"
            ohos:text_color="#FF090909"
            ohos:text_font="$string:font"
            ohos:text_size="20fp"
            ohos:text_weight="1"
            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:italic="false"
            ohos:right_margin="70vp"
            ohos:hint="$string:username_hint"
            ohos:hint_color="#FF424275"
            ohos:text_alignment="center"
            ohos:text_color="#FF090909"
            ohos:text_font="$string:font"
            ohos:text_size="20fp"
            ohos:text_weight="1"
            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="40fp"
        >

        <Text
            ohos:id="$+id:password_label"
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:italic="false"
            ohos:text="$string:password"
            ohos:text_alignment="center"
            ohos:text_color="#FF090909"
            ohos:text_font="$string:font"
            ohos:text_size="20fp"
            ohos:text_weight="1"
            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:italic="false"
            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:text_weight="1"
            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="35vp"
        />
</DirectionalLayout>