【鸿蒙】显示一个自定义即时反馈（类似 Android 中的 To

写在前面：本文章创建的是鸿蒙 Java 开发项目，使用 Java 语言进行开发。

一、背景介绍

在 Android 中，我们通常会让应用程序显示一个 Toast 来通知用户做了什么事情。但是在鸿蒙中，显示这样一个消息的方法不同于 Android ，需要用到 ToastDialog 来实现。

温馨提示：由于 ToastDialog 的默认样式过于简陋，并且不美观，所以需要进行自定义，以达到与 Android 相似的效果。

二、实现过程

1. 首先在 MyApplication.java 中添加两个静态方法。

src/main/java/com/example/toastdemo/MyApplication.java

public static void showToast(Context context, String msgStr, int position) {
    DirectionalLayout toastLayout = (DirectionalLayout) LayoutScatter.getInstance(context)
            .parse(ResourceTable.Layout_layout_toast, null, false);
    Text toastMsg = (Text) toastLayout.findComponentById(ResourceTable.Id_msg_toast);
    toastMsg.setText(msgStr);
    new ToastDialog(context)
            .setContentCustomComponent(toastLayout)
            .setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT, DirectionalLayout.LayoutConfig.MATCH_CONTENT)
            .setAlignment(position)
            .show();
}

public static void showToast(Context context, int msgResId, int position) {
    DirectionalLayout toastLayout = (DirectionalLayout) LayoutScatter.getInstance(context)
            .parse(ResourceTable.Layout_layout_toast, null, false);
    Text toastMsg = (Text) toastLayout.findComponentById(ResourceTable.Id_msg_toast);
    toastMsg.setText(msgResId);
    new ToastDialog(context)
            .setContentCustomComponent(toastLayout)
            .setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT, DirectionalLayout.LayoutConfig.MATCH_CONTENT)
            .setAlignment(position)
            .show();
}

2. 自定义 Toast 的布局文件。

src/main/resources/base/layout/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:background_element="$graphic:background_toast"
        ohos:bottom_padding="6vp"
        ohos:layout_alignment="center"
        ohos:left_padding="16vp"
        ohos:multiple_lines="true"
        ohos:right_padding="16vp"
        ohos:text_color="$color:toast_msg_color"
        ohos:text_size="16fp"
        ohos:top_padding="6vp"/>
</DirectionalLayout>

3. 自定义 Toast 的背景资源文件。

src/main/resources/base/graphic/background_toast.xml

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

4. 字符串、颜色的资源文件。

(1) src/main/resources/base/element/string.json

{
  "string": [
    {
      "name": "mainability_toast_msg_center",
      "value": "This is a center toast!"
    }
  ]
}

(2) src/main/resources/base/element/color.json

{
  "color": [
    {
      "name": "toast_bg_color",
      "value": "#ff666666"
    },
    {
      "name": "toast_msg_color",
      "value": "#ffffffff"
    }
  ]
}

5. 在 Java 代码中使用自定义 Toast。

src/main/java/com/example/toastdemo/MainAbility.java

// 显示一个居中的 Toast
MyApplication.showToast(this, ResourceTable.String_mainability_toast_msg_center, LayoutAlignment.CENTER);

// 显示一个底部的 Toast
MyApplication.showToast(this, "This is a bottom toast!", LayoutAlignment.BOTTOM);

// 显示一个顶部的 Toast
MyApplication.showToast(this, "This is a top toast!", LayoutAlignment.TOP);

三、效果展示

捕获.PNG

文章到这里就结束了，如果帮到了你，不要忘了点个赞哦！