3.8 [Harmonyos Development] Component ToastDialog

Author: Han Ru

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

Hongmeng Bus columnist

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

So its characteristics:

You can’t interact with the user, you can’t click, you can’t touch
Does not affect the user’s other operations
After a short display, it will disappear automatically

Create a ToastDialog

Click the button and the ToastDialog pops up.

We are now in the XML layout file:

<? The 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_size="50px" ohos:top_margin=" 20VP "ohos:padding=" 20VP" /> </DirectionalLayout>

Layout effect:

In Java code:

// 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 ToastDialog ").show(); }});

Operation effect:

Set the 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" />

Java code:

//2. Set location of ToastDialog Button btn2 = (Button) findComponentById(ResourceTable. ID_btn2); btn2.setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) { /* / / a LayoutalAlignment / / b with a LayoutalAlignment / / b. The LEFT side shows a LayoutalAlignment / / b with a LayoutalAlignment. } / New ToastDialog(GetContext ()).setText(" The ToastDialog is centered ").setAlignment(LayoutalAlignment. Center).show(); }});

Operation effect:

2. Customize the Component of ToastDialog

First we add a button, ability_main.xml layout file, continue 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" />

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

<? The 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: Layout_Alignment =" Center "ohos: Text_Size =" 16FP" ohos: Text =" Custom ToastDialog" ohos:padding="20vp" ohos:background_element="$graphic:background_toast_element"/> </DirectionalLayout>

Where background_toast_element.xml under graphic:

<? The 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>

The 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(); }});

Operation effect:

3. Customize ToastDialog with pictures

First we add a button, ability_main.xml layout file, continue 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 images "ohos:text_size="50px" ohos:top_margin="20vp" ohos:padding="20vp" />

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

<? The 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_size=" 16FP "ohos:top_padding=" 4VP "/> </DirectionalLayout>

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

The 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); new ToastDialog(getContext()) .setContentCustomComponent(layout) .setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT, DirectionalLayout.LayoutConfig.MATCH_CONTENT) .setAlignment(LayoutAlignment.CENTER) .show(); }});

Operation effect:

1, community: https://www.harmonybus.net/ HongMeng bus

2. Official Account: Harmonybus

3, technical exchange QQ group: 714518656

Lesson 4, video: https://www.chengxuka.com

3.8 [Harmonyos Development] Component ToastDialog