页面学习——鸿蒙登录页面设计

页面学习——鸿蒙登录页面设计

1.布局文件

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="vertical_center"
    ohos:background_element="$media:bg_login"
    ohos:orientation="vertical">

    <Text
        ohos:height="50vp"
        ohos:text_size="30vp"
        ohos:text="鸿蒙登录页面"
        ohos:text_alignment="center"
        ohos:text_weight="900"
        ohos:text_color="#FFFFFF"
        ohos:width="match_parent"/>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:background_element="$graphic:background_login_input"
        ohos:margin="20vp"
        ohos:orientation="horizontal"
        ohos:padding="10vp"
        >

        <Image
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:image_src="$media:icon_username"
            ohos:left_margin="10vp"
            ohos:scale_x="0.5"
            ohos:scale_y="0.5"/>

        <TextField
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:hint="请输入用户名"
            ohos:hint_color="#ffffff"
            ohos:left_margin="10vp"
            ohos:text_alignment="vertical_center"
            ohos:text_color="#ffffff"
            ohos:text_size="12fp"/>

    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:background_element="$graphic:background_login_input"
        ohos:margin="20vp"
        ohos:orientation="horizontal"
        ohos:padding="10vp"
        >


        <Image
            ohos:height="40vp"
            ohos:width="40vp"
            ohos:image_src="$media:icon_password"
            ohos:left_margin="10vp"
            ohos:scale_x="0.5"
            ohos:scale_y="0.5"/>

        <TextField
            ohos:height="40vp"
            ohos:width="match_content"
            ohos:hint="请输入密码"
            ohos:hint_color="#ffffff"
            ohos:left_margin="10vp"
            ohos:text_alignment="vertical_center"
            ohos:text_color="#ffffff"
            ohos:text_input_type="pattern_password"
            ohos:text_size="12fp"/>

    </DirectionalLayout>


    <Button
        ohos:id="$+id:loginButton"
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:background_element="$graphic:background_button"
        ohos:margin="20vp"
        ohos:text="登录"
        ohos:text_alignment="center"
        ohos:text_color="#FFFFFF"
        ohos:text_size="18vp"/>


</DirectionalLayout>

2. 背景图
   background_login_input.xml

<?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="#0AFFFFFF"/>

    <!--    边框-->
    <stroke
        ohos:width="2vp"
        ohos:color="#FFFFFF"
        />

</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="100"/>

    <solid
        ohos:color="#007DFF"/>

</shape>

3. 页面代码：

package com.example.myapplication.slice;

import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;

public class LoginAbilitySlice extends AbilitySlice {

    static final HiLogLabel label = new HiLogLabel(HiLog.LOG_APP, 0x00201, "LoginAbilitySlice");

    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        setUIContent(ResourceTable.Layout_ability_login);

        Button button = (Button) findComponentById(ResourceTable.Id_loginButton);

        if (null != button) {
            button.setClickedListener(new Component.ClickedListener() {
                @Override
                public void onClick(Component component) {
                    HiLog.info(label, "登录中...");

                    ToastDialog toastDialog = new ToastDialog(getContext());
                    toastDialog .setAlignment(LayoutAlignment.CENTER);
                    toastDialog.setText("登录中...").setDuration(1000).show();
                }
            });
        }
    }
}

4.效果图