HarmonyOS ToastDialog

Author: Han Ru

Company: Program Ka (Beijing) Technology Co., LTD

Hong Meng Bus columnist

A ToastDialog is a dialog box that pops up at the top of a window and is a simple feedback for notification actions. The ToastDialog disappears after a period of time during which the user can also manipulate other components of the current window.

So its features:

You can’t interact with the user, the user can’t click, the user can’t touch
Other operations are not affected
Automatically disappear after short time display

Create a ToastDialog

Click the button to pop up the ToastDialog.

We now have in the XML layout file:

<? 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:orientation="vertical">

    <Button
        ohos:id="$+id:btn1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#EEEEEE"
        ohos:layout_alignment="horizontal_center"
        ohos:text="Display a ToastDialog"
        ohos:text_size="50px"
        ohos:top_margin="20vp"
        ohos:padding="20vp"
        />

</DirectionalLayout>
Copy the code

Layout effect:

In Java code:

				// Click the button to bring up the ToastDialog
        Button btn1 = (Button) findComponentById(ResourceTable.Id_btn1);
        btn1.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                new ToastDialog(getContext())
                        .setText("This is a toast dialog.") .show(); }});Copy the code

Operation effect:

Set ToastDialog

1. Set the location

In the XML layout file, add another button:

<Button
        ohos:id="$+id:btn2"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#EEEEEE"
        ohos:layout_alignment="horizontal_center"
        ohos:text="Set ToastDialog position"
        ohos:text_size="50px"
        ohos:top_margin="20vp"
        ohos:padding="20vp"
        />
Copy the code

Code in Java:

				//2. Set the ToastDialog position
        Button btn2 = (Button) findComponentById(ResourceTable.Id_btn2);
        btn2.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                /* Layoutalignment. CENTER, CENTER layoutalignment. LEFT, vertical CENTER, RIGHT layoutalignment. BOTTOM etc.. * /
                new ToastDialog(getContext())
                        .setText("This ToastDialog is centered.") .setAlignment(LayoutAlignment.CENTER) .show(); }});Copy the code

Operation effect:

2. Customize ToastDialog Component

The ability_main. XML layout file is used to add button 3:

<Button
        ohos:id="$+id:btn3"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#EEEEEE"
        ohos:layout_alignment="horizontal_center"
        ohos:text="Custom ToastDialog"
        ohos:text_size="50px"
        ohos:top_margin="20vp"
        ohos:padding="20vp"
        />
Copy the code

In the Layout directory, create a new layout file, layout_toast.xml:

<? xml version="1.0" encoding="utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:orientation="vertical">
    <Text
        ohos:id="$+id:msg_toast"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="center"
        ohos:text_size="16fp"
        ohos:text="Custom ToastDialog"
        ohos:padding="20vp"
        ohos:background_element="$graphic:background_toast_element"/>
</DirectionalLayout>
Copy the code

Background_toast_element.xml under graphic:

<? xml version="1.0" encoding="utf-8"? > <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="30vp"/>
    <solid
        ohos:color="#33ff0000"/>
</shape>
Copy the code

Code in Java:

//3. Customize ToastDialog
        Button btn3 = (Button) findComponentById(ResourceTable.Id_btn3);
        btn3.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                DirectionalLayout toastLayout = (DirectionalLayout) LayoutScatter.getInstance(MainAbilitySlice.this)
                        .parse(ResourceTable.Layout_layout_toast, null.false);
                new ToastDialog(getContext())
                        .setContentCustomComponent(toastLayout)
                        .setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT, DirectionalLayout.LayoutConfig.MATCH_CONTENT)
                        .setAlignment(LayoutAlignment.CENTER)
                        .show();
            }
        });
Copy the code

Operation effect:

3. Customize ToastDialog with images

The ability_main. XML layout file is used to add button 3:

<Button
        ohos:id="$+id:btn4"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#EEEEEE"
        ohos:layout_alignment="horizontal_center"
        ohos:text="ToastDialog with picture"
        ohos:text_size="50px"
        ohos:top_margin="20vp"
        ohos:padding="20vp"
        />
Copy the code

In the Layout directory, create a new layout file, layout_toast_and_image.xml:

<? xml version="1.0" encoding="utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:orientation="horizontal">

    <Image
        ohos:width="30vp"
        ohos:height="30vp"
        ohos:scale_mode="inside"
        ohos:image_src="$media:t4"/>

    <Text
        ohos:id="$+id:msg_toast"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_toast_element"
        ohos:bottom_padding="4vp"
        ohos:layout_alignment="vertical_center"
        ohos:left_padding="16vp"
        ohos:right_padding="16vp"
        ohos:text="This is a ToastDialog with a picture."
        ohos:text_size="16fp"
        ohos:top_padding="4vp"/>
</DirectionalLayout>
Copy the code

Here we need to copy an image T4 to the media directory:

Code in Java:

 //4. Customize ToastDialog
        Button btn4 = (Button) findComponentById(ResourceTable.Id_btn4);
        btn4.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                DirectionalLayout layout = (DirectionalLayout) LayoutScatter.getInstance(MainAbilitySlice.this)
                        .parse(ResourceTable.Layout_layout_toast_and_image, null.false);
                newToastDialog(getContext()) .setContentCustomComponent(layout) .setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT, DirectionalLayout.LayoutConfig.MATCH_CONTENT) .setAlignment(LayoutAlignment.CENTER) .show(); }});Copy the code

Operation effect:

1. Community: Hongmeng Bus www.harmonybus.net/

2. HarmonyBus

3, technical exchange QQ group: 714518656

4. Video courses: www.chengxuka.com

HarmonyOS ToastDialog