HarmonyOS實戰——ToastDialog元件基本使用

1. ToastDialog 簡介

在這裡插入圖檔描述

• ToastDialog 是 CommonDialog 的子類，他們的用法幾乎是一緻的，隻不過 ToastDialog 有自己的特性
• ToastDialog 的組成如下：标題、提示内容、選擇按鈕

  

  在這裡插入圖檔描述
• 一般隻會用中間的提示内容，因為 ToastDialog 出現的意義就是用來作消息提示的
• ToastDialog 彈框有自己的展示時間，預設展示 2 秒鐘，時間到了之後彈框就會自動消失

2. ToastDialog 案例

案例：點選按鈕彈出一個2秒的彈框提示資訊

ability_main

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

    <Text
        ohos:id="$+id:msg"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="30fp"
        ohos:text_color="#FFFFFF"
        ohos:text_alignment="center"
        ohos:background_element="#464343"
        />

</DirectionalLayout>           

複制

MainAbilitySlice

package com.xdr630.toastapplication.slice;

import com.xdr630.toastapplication.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;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        //找到界面中的按鈕
        Button but = (Button) findComponentById(ResourceTable.Id_but);
        //添加點選事件
        but.setClickedListener(this);

    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    public void onClick(Component component) {
        //出現一個 ToastDialog 彈框
        // this:表示目前的彈框展示在目前的界面
        ToastDialog td = new ToastDialog(this);
        //給ToastDialog設定要展示的文本内容
        td.setText("吐司彈框出現了");
        //設定居中
        td.setAlignment(LayoutAlignment.CENTER);
        //設定出現的時間，機關：毫秒。下面就是設定彈框時間隻有兩秒
        td.setDuration(2000);
        //讓彈框出現
        td.show();
    }
}           

複制

• 運作：

  

  在這裡插入圖檔描述
• 點選按鈕，可以看到彈框提示資訊出現了

  

  在這裡插入圖檔描述
• 兩秒後彈框消失

注意事項：

• 基本使用：

ToastDialog t = new ToastDialog(this);
t.setText("要顯示的内容")
t.setAlignment(LayoutAlignment.CENTER);
t.show();           

複制

• 相關設定：

ToastDialog toastDialog = new ToastDialog(this);
//設定的大小
//如果不寫，預設包裹内容
toastDialog.setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT,
DirectionalLayout.LayoutConfig.MATCH_CONTENT);
//設定持續時間
//如果不寫，預設2秒
toastDialog.setDuration(2000);
//設定自動關閉
//如果不寫，就是自動關閉
toastDialog.setAutoClosable(true);
//設定位置
//如果不寫，預設居中
toastDialog.setAlignment(LayoutAlignment.CENTER);
//設定提示資訊内容
toastDialog.setText("要顯示的内容");
//讓吐司展示出來
toastDialog.show();           

複制

3. ToastDialog 抽取工具類

ToastDialog

擴充

1. 可以給ToastDialog彈框一個布局
2. 把ToastDialog抽取到一個工具類當中，以後用到彈框的時候就不需要再寫了，直接調用工具類的方法就可以了

案例：

• 建立一個布局檔案，名為：

  mytoast

  

  在這裡插入圖檔描述

  

  在這裡插入圖檔描述
• 把父類布局也改成

  match_content

  

  在這裡插入圖檔描述
• 在布局檔案寫一個文本就可以了，因為

  ToastDialog

  也隻有一個文本提示
• 因為在每次彈出消息的時候要修改文本裡的内容，是以要給文本一個

  id

  ，文本内容是變化的，是以要在Java代碼那裡設定

  

  在這裡插入圖檔描述

mytoast.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"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="30fp"
        ohos:text_color="#FFFFFF"
        ohos:text_alignment="center"
        ohos:background_element="#464343"
        />

</DirectionalLayout>           

複制

• 建立工具包和類

  

  在這裡插入圖檔描述

  

  在這裡插入圖檔描述

  

  在這裡插入圖檔描述

ToastUtils

package com.xdr630.toastapplication.MyToastUtils;

import com.xdr630.toastapplication.ResourceTable;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.LayoutScatter;
import ohos.agp.components.Text;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;
import ohos.app.Context;

public class ToastUtils {
    public static void showDialog(Context context,String message){

        //1.把 xml 檔案加載到記憶體當中
        DirectionalLayout dl = (DirectionalLayout) LayoutScatter.getInstance(context).parse(ResourceTable.Layout_mytoast, null, false);

        //2.擷取到目前布局對象中的文本元件
        Text msg = (Text) dl.findComponentById(ResourceTable.Id_msg);

        //3.把需要提示的資訊設定到文本元件
        msg.setText(message);

        //4.建立一個ToastDialog對象
        ToastDialog td = new ToastDialog(context);
        //設定彈框的大小，預設是包裹内容
        //寬高都要設定
        td.setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT,DirectionalLayout.LayoutConfig.MATCH_CONTENT);
        //設定出現的時間
        td.setDuration(2000);
        //設定對齊方式
        td.setAlignment(LayoutAlignment.CENTER);
        //把 xml 對象交給ToastDialog
        td.setContentCustomComponent(dl);
        //讓彈框出現
        td.show();
    }
}           

複制

• 在 MainAbilitySlice 中修改 onClick 方法中去調用工具類方法

  

  在這裡插入圖檔描述

package com.xdr630.toastapplication.slice;

import com.xdr630.toastapplication.MyToastUtils.ToastUtils;
import com.xdr630.toastapplication.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;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        //找到界面中的按鈕
        Button but = (Button) findComponentById(ResourceTable.Id_but);
        //添加點選事件
        but.setClickedListener(this);

    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    public void onClick(Component component) {

        ToastUtils.showDialog(this,"吐司彈框抽取工具類");
        
    }
}           

複制

• 運作：

  

  在這裡插入圖檔描述
• 點選

  

  在這裡插入圖檔描述
• 這個彈框就跟我們平時玩的APP中的彈框有些類似，唯一差別就是有點大，在

  mytoast.xml

  去調節彈框的大小，

  ToastUtils.java

  調節彈框的位置

  

  在這裡插入圖檔描述

  

  在這裡插入圖檔描述
• 還可以給彈框添加一個偏移量，如Y軸添加200px

  

  在這裡插入圖檔描述
• 運作，點選後，發現彈框往上偏移了

  

  在這裡插入圖檔描述