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;
    }
}

原文地址:https://www.cnblogs.com/unknown6248/p/11784813.html

时间: 2024-10-09 04:31:32

unity 之 自定义弹出框的相关文章

鼠标拖动 自定义弹出框

/*设置自定义弹出框可移动*/jQuery(document).ready( function () { $('.popmodal .popheader').mousedown( function (event) { var isMove = true; var abs_x = event.pageX - $(this).offset().left; var abs_y = event.pageY - $(this).offset().top; $(document).mousemove(fun

Validform自定义提示效果-使用自定义弹出框

$(function(){ $.Tipmsg.r=null; $("#add").Validform({ tiptype:function(msg){ layer.msg(msg); } }); }) Validform自定义提示效果-使用自定义弹出框

js自定义弹出框

js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="text/css" > .layout { width:2000px; height:400px; border:solid 1px red; text-align:center; } </style> <script type="text/javascript&quo

react native仿微信性别选择-自定义弹出框

简述 要实现微信性别选择需要使用两部分的技术: 第一.是自定义弹出框: 第二.单选框控件使用: 效果 实现 一.配置弹出框 弹出框用的是:react-native-popup-dialog(Git地址:https://github.com/jacklam718/react-native-popup-dialog) 具体配置见Git文档~ 二.配置单选框 用的是:react-native-elements(Git地址:https://react-native-training.github.io/

自定义弹出框效果

对网站而言,弹出框是比较常见的.或是给出用户操作提示,或是通过弹出框打开一个小窗口以提示信息,或是给出错误警示等等. 但是由于浏览器自带的弹出窗口alert , confirm , prompt样式比较单调,且不同浏览器有不同的默认样式设置. 所以在日常工作中,给网站做一个自定义的弹出框十分必要.特别是富交互的网站 一.提示框 html部分: 1 <!--修改弹窗--> 2 <div class="pop-alert" id="pop" style

bootstrap插件bootbox参数和自定义弹出框宽度设置

插件官方地址:http://bootboxjs.com/ alert: 1 bootbox.alert("Hello world!", function() {}); dialog: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 bootbox.dialog({   //

android 自定义弹出框AlertDialog ,很炫的哦

于是就小小的模仿了下自己写了这个这样的效果,主要代码如下:dlg = new AlertDialog.Builder(context).create();dlg.show();dlg.getWindow().setContentView(R.layout.alert_style);LayoutInflater factory = LayoutInflater.from(context);View view = factory.inflate(R.layout.alert_style, null)

Vue利用Vue.extend()实现自定义弹出框

运用场景:如果想实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它,这时候Vue.extend + vm.$mount 组合就派上用场了. 简单介绍: Vue.extend(options) 参数:对象 用法:使用Vue构造器,创建一个“子类”,参数是一个包含组件选项的对象,其中,data选项中必须是函数 描述:Vue.extend返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue的实例构造器,它常常服务于Vue.component用来生成组件,可以

弹出框一 之 基于bootstrap和jquery的自定义弹出框

(function ($) { window.Ewin = function () { var html = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' + '<div class="modal-dialog modal-sm">' + '<div class=&