1. 程式人生 > >unity 之 自定義彈出框

unity 之 自定義彈出框

一、彈出框的搭建:

佈局如圖:Message為整個父物體,並且新增UiMessage程式碼。panel為遮罩。

MessageBox為整個提示框,Panel為標題,ok為確定按鈕,cancel為取消按鈕,retry為重試按鈕,Text為提示框的文字。

注意大小寫,後面程式碼會根據名稱進行獲取對應組建。

 

 效果如下:

 

 

 

二、MessageBox程式碼:

 要說明的都在程式碼中註釋了。仿照Windows的提示框功能,如果功能不足可自行新增。例如關閉按鈕、顯示圖示等。

using System;

public enum DialogResult
{
    Ok,
    OKCancel,
    RetryCancel,
    YesNo,
    YesNoCancel
}

public static class MessageBox
{
    /// <summary>
    /// true表示模態框
    /// </summary>
    public static bool type;
    //三個委託,分別為三個按鈕的點選執行事件
    public static Action clickOk;
    public static Action clickRetry;
    public static Action clickCancel;
    public static DialogResult dialogResult;
    //標題
    public static string headText;
    //文字
    public static string text;
    //狀態。用於顯示或隱藏彈出框
    public static bool state;

    /// <summary>
    ///重試按鈕點選事件
    /// </summary>
    public static void onClickRetry()
    {
        state = false;
        clickRetry?.Invoke();
        clickRetry = null;
    }
    /// <summary>
    /// 取消按鈕點選事件
    /// </summary>
    public static void onClickCancel()
    {
        state = false;
        clickCancel?.Invoke();
        clickCancel = null;
    }
    /// <summary>
    /// 確定按鈕點選事件
    /// </summary>
    public static void onClickOk()
    {
        state = false;
        clickOk?.Invoke();
        clickOk = null;
    }

    /// <summary>
    /// 顯示
    /// </summary>
    /// <param name="_text">內容</param>
    /// <param name="_head">標題</param>
    /// <param name="dialog">樣式</param>
    /// <param name="type">模式</param>
    public static void Show(string _text,string _head,DialogResult _dialog, bool _type = true)
    {
        text = _text;
        headText = _head;
        dialogResult = _dialog;
        type = _type;
        state = true;
    }
    public static void Show(string _text,string _head,bool _type = true)
    {
        text = _text;
        headText = _head;
        dialogResult = DialogResult.Ok;
        type = _type;
        state = true;
    }
    public static void Show(string _text, bool _type = true)
    {
        text = _text;
        headText = "資訊";
        dialogResult = DialogResult.Ok;
        type = _type;
        state = true;
    }

}

 

三、UiMessage程式碼:

 新增到Message物體上。用於控制彈出框的顯示等功能。

using UnityEngine;
using UnityEngine.UI;

public class UiMessage : MonoBehaviour
{
    public Button ok;
    public Button cancel;
    public Button retry;
    /// <summary>
    /// 遮罩
    /// </summary>
    public GameObject panel;
    public Text headText;
    public Text text;
    /// <summary>
    /// 彈出框
    /// </summary>
    private GameObject messageBox;

    private void Awake()
    {
        messageBox = gameObject.transform.GetChild(1).gameObject;
        ok = messageBox.transform.Find("ok").GetComponent<Button>();
        cancel = messageBox.transform.Find("cancel").GetComponent<Button>();
        retry = messageBox.transform.Find("retry").GetComponent<Button>();
        panel = gameObject.transform.Find("panel").gameObject;
        text = messageBox.transform.Find("Text").GetComponent<Text>();
        headText = messageBox.transform.GetChild(0).Find("head").GetComponent<Text>();

        //將提示框居中顯示
        messageBox.transform.position = new Vector3(Screen.width / 2 - messageBox.GetComponent<RectTransform>().rect.width / 2,
                Screen.height / 2 + messageBox.GetComponent<RectTransform>().rect.height / 2, 0);
        init();
    }

    private void OnEnable()
    {
        init();
    }

    private void init()
    {
        ok.onClick.AddListener(MessageBox.onClickOk);
        cancel.onClick.AddListener(MessageBox.onClickCancel);
        retry.onClick.AddListener(MessageBox.onClickRetry);
        text.text = MessageBox.text;
        headText.text = MessageBox.headText;

        //根據傳遞的引數,進行樣式的顯示
        switch (MessageBox.dialogResult)
        {
            case DialogResult.Ok:
                ok.gameObject.SetActive(true);
                cancel.gameObject.SetActive(false);
                retry.gameObject.SetActive(false);
                break;
            case DialogResult.OKCancel:
                ok.gameObject.SetActive(true);
                cancel.gameObject.SetActive(true);
                retry.gameObject.SetActive(false);
                break;
            case DialogResult.RetryCancel:
                ok.gameObject.SetActive(true);
                cancel.gameObject.SetActive(true);
                retry.gameObject.SetActive(true);
                break;
            case DialogResult.YesNo:
                ok.transform.GetChild(0).GetComponent<Text>().text = "是";
                cancel.transform.GetChild(0).GetComponent<Text>().text = "否";
                ok.gameObject.SetActive(true);
                cancel.gameObject.SetActive(true);
                retry.gameObject.SetActive(false);
                break;
            case DialogResult.YesNoCancel:
                ok.transform.GetChild(0).GetComponent<Text>().text = "是";
                cancel.transform.GetChild(0).GetComponent<Text>().text = "否";
                ok.gameObject.SetActive(true);
                cancel.gameObject.SetActive(true);
                retry.gameObject.SetActive(true);
                break;
        }
    }

    private void Update()
    {
        panel.SetActive(MessageBox.type);
        gameObject.SetActive(MessageBox.state);
    }
}

 

三、顯示框的呼叫:

此處呼叫可以自行設定一個按鈕,在其點選事件中註冊呼叫即可。

筆者使用專案中的方式進行演示。具體不做說明。呼叫方式已給出。

特別注意:由於UiMessage呼叫了MessageBox的方法,所以必須先初始化MessageBox的資料。使用什麼就初始化什麼。筆者使用了ok、cancel按鈕(預設不初始化模式,即為模態框,不初始化DialogResult即為只顯示ok按鈕),所以註冊了相應的點選事件(委託)。最後顯示彈出框(整個包含遮罩和彈出框)。

 

 

 

三、執行結果:

 

 

 

三、彈出框可拖拽移動:

將DragManage新增到MessageBox物體上面。(如果你想讓ui物體可拖拽,對其新增DragManage即可實現)

筆者就不做演示了

using UnityEngine;
using UnityEngine.EventSystems;

/// <summary>
/// 只是用來處理拖拽
/// </summary>
public class DragManage : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler
{
    private Vector3 offect;

    public void OnBeginDrag(PointerEventData eventData)
    {
        offect = Input.mousePosition - transform.position;
    }

    public void OnDrag(PointerEventData eventData)
    {
        transform.position = Input.mousePosition - offect;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        transform.position = Input.mousePosition - offect;
    }
}

 

&n