NGUI是做UI的，自然不能不談各種UI元件。常見的NGUI的元件有按鈕button、輸入框InputField、複選框Checkbox、下拉列表PopList、滑塊Slider，當然還有在《【NGUI】標籤頁》（點選開啟連結）提及過的單選框Toggle。HTML僅有<input><checkbox><select><radiobutton><button>都能做一大堆事情，我相信NGUI這些控制元件靈活運用的話足矣讓你佈置遊戲的UI。本文將舉一個例子介紹這些NGUI控制元件的使用，同時說明它們的數值如何用獲取。

其實也是《【Unity3D】場景切換、UGUI元件事件、開始遊戲與關閉遊戲》（

當然製作過程，畢竟NGUI是專門做UI的，方便不少，而且介面比原生的UGUI好看。具體制作過程如下：

一、場景佈置

1、首先和《【NGUI】Helloworld》（點選開啟連結）一樣匯入NGUI，佈置一個2D UI隱藏照相機。之後，我們可以在Asset直接搜尋Control，你會發現NGUI已經提供好一大堆準備好的控制元件預設了。如圖所示，拖入InputField、Checkbox、PopupList、Slider和Button，同時建立4個Label。你會發現比起《【Unity3D】Unity3D 4.x利用原生UGUI完成下拉列表DropDownList》（

對於每個控制元件修改旗下Label字型的時候注意，由於NGUI對於中文支援實在是爛，因此你需要改回Arial才能輸入中文。

而對於下拉列表，你需要修改的地方有三處，而不僅僅是Label，否則下拉選項也是沒法顯示中文的。除了PopupList旗下的Symbol和Label，還有自身的字型修改，如圖所示。

2、上述所有元件擺放好，設定好之後，我們在於這些東西之上弄一個Sprite，然後放一個Label並且再拖一個Button，做獲取資訊的彈出訊息框，如下圖所示。並理清各個元件的Depth，Depth其實就是和網頁中Z-index的一個意思，設定哪個東西在上頭。

弄好之後可以先將這個Sprite點選如圖的勾隱藏，以便進行和後續的工作，和Photoshop隱藏圖層是一個意思~

3、大家可以注意到NGUI的按鈕不像原生的UGUI自帶點選事件的，你翻遍右側的屬性列表都沒找到Onclick事件，我們需要自己新增。具體是給三個按鈕新增Event Listener元件。沒錯，你沒看錯，就是三個，因為NGUI的Checkbox的本質是一個Button，你在指令碼翻遍都沒有這個類的。

二、指令碼編寫

之後你就可以新建一個空物體GameObject，賦予以下指令碼GetValue.cs。

using UnityEngine;
using System.Collections;

public class GetValue : MonoBehaviour
{

    public GameObject checkbox;//複選框
    public UIInput input_field;//輸入框
    public UIPopupList poplist;//下拉列表
    public UISlider slider;//滑塊
    public GameObject button;//確認按鈕 

    public GameObject Sprite;//彈出框
    public UILabel label;//彈出框上面的文字
    public GameObject close_button;//關閉按鈕

    private bool checkbox_oncheck;//用於記錄複選框的狀態

    void Awake()
    {
        //設定按鈕的監聽，指向本類的ButtonClick、CheckBoxClick、CloseButtonClick方法中。
        //同時可以寫成：UIEventListener.Get(button).onClick += ButtonClick
        UIEventListener.Get(button).onClick = ButtonClick;
        UIEventListener.Get(checkbox).onClick = CheckBoxClick;
        UIEventListener.Get(close_button).onClick = CloseButtonClick;
        checkbox_oncheck = true;//在場景開始的時候，複選框是預設被選中的
        Sprite.SetActive(false);//彈出框是隱藏的
    }

    /*按鈕的點選事件*/
    void ButtonClick(GameObject button)
    {
        //除了複選框，各個元件的值，可以用.value獲取
        //除了UILabel，其餘UI類用.text獲取值已經在NGUIv3.9過時，需要用到.value獲取這個值
        label.text = "姓名：" + input_field.value + ",\n" +
          "SB與否：" + checkbox_oncheck + ",\n" +
         "特徵：" + poplist.value + ",\n" +
         "心情指數：" + slider.value + "。\n";
        Sprite.SetActive(true);//顯示彈出框
    }

    /*複選框的點選事件*/
    void CheckBoxClick(GameObject button)
    {
        checkbox_oncheck = !checkbox_oncheck;//複選框被點選一次則改變一次複選框的狀態
    }

    /*關閉按鈕的點選事件*/
    void CloseButtonClick(GameObject button)
    {
        Sprite.SetActive(false);//隱藏彈出框     
    }

}

至此整個工程完畢。

可以看到NGUI對元件的指令碼編寫和原生的UGUI大有不同，當然你也用UGUI的方法，強行獲取這些控制元件裡面的值，但這樣做並不明智。現在NGUI通過Event Listen將按鈕的點選弄到同一個指令碼中管理，這是NGUI的思維，而不是像UGUI在控制元件的屬性面板指明是哪個指令碼中的什麼方法。

而大家也看到了，常用的元件輸入框InputField、下拉列表PopList、滑塊Slider都有相應的類UIInput、UIPopList、UISlider，直接通過.value則可以獲取到相應的值。同樣UI元件基本上有相應的類對應，防止了元件皆用GameObject表示，更加清晰吧。

不過怎麼樣都好，關鍵是你完成任務，個人感覺，NGUI和原生的UGUI是兩個不同的做UI思維，但都不難。