道具图标长按下在其附近弹出详情框的实现

发表于2017-06-01

游戏项目中，会有许多道具UI图标作为奖励呈现在很多系统中如活动、任务、背包等等。我们一般不可能把每个道具的详细信息“平放”在一级界面当中，那样会显得界面很杂乱且信息太过密集，一般会采用二级弹出框的方式来做，这样一级界面会美观整洁。只要玩家长按住道具的图标，就会弹出关于该道具内容与使用的详细信息。

道具详情弹出框实现脚本如下，读者可参考如下：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
/*
 * Author:LuShang
 * 长按某个道具图标在其“附近”弹出详情介绍框
 */
public class DetailInfoPanel : MonoBehaviour {
    /// 
    /// 道具名称
    /// 
    public Text ItemName;
   /// 
   /// 道具详细介绍信息
   /// 
    public Text Desc;
    /// 
    /// 道具图标
    /// 
    public RawImage IconPic;
    /// 
    /// 如果没有加载当前道具对应的贴图，就使用默认的贴图
    /// 
    public Texture Default;
 
    private GameObject ParentObj;
    /// 
    /// 详弹框的目标位置
    /// 
    private Vector2 targetPos = Vector2.zero;
 
    /// 
    /// 设置道具详情弹出框
    /// 
    /// 道具名称
    /// 道具详细介绍
    /// 道具图标名称
    /// 道具详情弹出框显示的目标位置
    public void ShowDetailInfoPnanel(string itemName, string desc, string iconName, RectTransform targetRect)
    {
        //设置道具名称
        ItemName.text = itemName;
        //设置道具详情
        Desc.text = desc;
        //设置道具图标，本章主要讲解如何在长按的道具图标“附近位置”弹出显示道具详情弹出框，因此这里略掉加载特定贴图的实现，直接使用默认贴图
        IconPic.texture = Default;
 
        //记录下详细弹框的当前父级对象
        ParentObj = transform.parent.gameObject;
 
        //暂时设定：详细弹框的当前父级对象为目标道具图标
        transform.SetParent(targetRect.transform);
 
        RectTransform rtTrans = gameObject.transform as RectTransform;
 
        //获得偏移量，以防止弹框始终保持在屏幕范围内且完全显示在道具图标“左上角”、“右上角”、“左下角”、“右下角”
        float shiftX = rtTrans.rect.size.x + targetRect.rect.size.x;
        float shiftY = (rtTrans.rect.size.y + targetRect.rect.size.y) * -1;
 
        targetPos = Vector2.zero;
        rtTrans.anchoredPosition = targetPos;
 
        //重新设定：详细弹框的父级对象为最初的父级对象
        transform.SetParent(ParentObj.transform);
        targetPos.x = rtTrans.anchoredPosition.x;
        targetPos.y = rtTrans.anchoredPosition.y;
 
        //检测：弹出框能否在道具图标左侧显示完全其“宽度”，如果大于等于0，说明可以，则跳过；反之，说明弹出框需要“换到”道具图标右侧来显示，x加上偏移
        if ((rtTrans.anchoredPosition.x - rtTrans.rect.size.x) < 0)
        {
            targetPos.x += shiftX;
        }
 
        //检测：弹出框若能在道具图标上方显示完全其“高度”，如果小于或等于0，说明可以，跳过；反之，说明弹出框需要“换到”道具图标下方来显示，y加上偏移
        if ((rtTrans.anchoredPosition.y + rtTrans.rect.size.y) > 0)
        {
            targetPos.y += shiftY;
        }
 
        //重设设定弹出框的正确位置
        rtTrans.anchoredPosition = targetPos;
 
        this.gameObject.SetActive(true);
    }
 
    /// 
    /// 隐藏弹出框
    /// 
    public void HideDetailPanel()
    {
        this.gameObject.SetActive(false);
    }
}

另外场景中挂载该脚本的对象结构如下截图：

红圈之内关于Anchor与Pivot的设置，关系到弹出框能否在道具图标正确方位显示。因此务必按上述值设置好！

测试脚本如下：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
/*
 * Author:W
 * 测试点击道具弹出详情弹出框
 */
public class Test2 : MonoBehaviour {
    /// 
    /// 道具图标
    /// 
    public GameObject ItemBtn;
 
    /// 
    /// 弹出框
    /// 
    public DetailInfoPanel detailInfoPanel;
 
    private void Awake()
    {
        UGUIListener.Get(ItemBtn).onDown = OnItemBtnDownEvent;
        UGUIListener.Get(ItemBtn).onUp = OnItemBtnUpEvent;
    }
 
    private void OnDestroy()
    {
        UGUIListener.Get(ItemBtn).onDown = null;
        UGUIListener.Get(ItemBtn).onUp = null;
    }
 
    /// 
    /// 按下道具图标的事件处理：弹出详情框
    /// 
    /// 
    private void OnItemBtnDownEvent(GameObject obj)
    {
        detailInfoPanel.ShowDetailInfoPnanel("八哥犬","中国土狗！","", ItemBtn.GetComponent());
    }
 
    /// 
    /// 抬起道具图标的事件处理：关闭弹出框
    /// 
    /// 
    private void OnItemBtnUpEvent(GameObject obj)
    {
        detailInfoPanel.HideDetailPanel();
    }
}

另外，关于UGUIListener脚本可以之前的发表关于UGUI事件监听文章中得到。