【NGUI实例开发】实现弹窗面板

所需组件

实现弹窗面板需要以下组件：Panel、Sprite、Label、BoxCollider 以及自定义的 PopupWindowHandle.cs 脚本组件。

实现方法

1. 制作控制弹窗的按钮

1.1 按钮组件添加

添加一个 Sprite，将其命名为 PopupWindowBtn。为该 Sprite 添加 BoxCollider 组件和 PopupWindowHandle 脚本组件，并为其添加一个子对象 Label，用于设置按钮上显示的名称。

1.2 PopupWindowHandle.cs 脚本代码

using UnityEngine;
using System.Collections;

public class PopupWindowHandle : MonoBehaviour {
// 需要弹出的面板 GameObject
public GameObject windowPanel;
// 用来控制弹出的按钮 GameObject
public GameObject btnLabelGO;
// 控制面板弹出弹回所用的时间
public float duration;
// 判断面板当前弹出状态
private bool isOpened = false;
// 获得按钮的 Label
private UILabel btnLabel;

void Start() {
// 设置面板初始大小缩小至 0
windowPanel.transform.localScale = Vector3.zero;
// 获得按钮的 Label，以便于对应面板不同的状态，显示不同的提示
btnLabel = btnLabelGO.transform.GetComponent<UILabel>();
}

public void PopupBtnOnClick() {
// 如果面板处于弹出状态
if (isOpened) {
// 设置面板大小缩小至 0
TweenScale.Begin(windowPanel, duration, Vector3.zero);
// 设置面板透明度至 0
TweenAlpha.Begin(windowPanel, duration, 0);
// 设置按钮的 Label 为 "Open"
btnLabel.text = "Open";
} else { // 如果面板处于隐藏状态
// 设置面板大小放大至 1
TweenScale.Begin(windowPanel, duration, Vector3.one);
// 设置面板透明度至 1
TweenAlpha.Begin(windowPanel, duration, 1);
// 设置按钮的 Label 为 "Close"
btnLabel.text = "Close";
}
// 每次按下按钮反置面板的弹出状态
isOpened = !isOpened;
}
}

1.3 按钮 Inspector 设置

设置按钮的 Inspector 界面，具体设置可参考图 1。

2. 制作展示弹窗的面板

2.1 添加 Panel

添加一个 Panel 组件，用于作为弹窗的容器。

2.2 面板内容添加

在 Panel 中添加自定义的背景或者文字。为了显示效果，这里简单添加了一个 Sprite 和一个 Label。

3. 相关面板截图

• Hierarchy 面板的截图可参考图 2。
• 运行后场景中的截图可参考图 3。

4. 效果达成

完成以上步骤后，即可实现弹窗面板的弹出和隐藏效果。