Button
Button控件除了公共的Rect Transform與Canvas Renderer兩個UI元件外，Button還預設擁
有Image(Script)與Button(Script)兩個元件。
元件Image(Script)裡的屬性與前面所講的Image控件的Image(Script)元件裡的屬性是一樣的，例如Source Image的圖像類型仍為一個Sprite（精靈），通過為此指派，就可改變此Button的外觀了，如果你為屬性指派了圖檔精靈，那麼此Button的外觀就與此精靈一緻了。
Button是一個複合控件，它中還包含一個Text子控件：
通過此子控件可設定Button上顯示的文字的内容、字型、樣式、字大小、顔色等，與前面所講的Text控件是一樣的。
Button(Script)元件裡的屬性：
Interactable：是否啟用（互動性）
如果你把其後的對勾
去掉，此Button在運作時将點不動，即失去互動性了。
Transition：過渡方式
None：沒有過渡方式
Color Tint：顔色過渡
Target Graphic：目标圖像
Normal Color：正常顔色
Highlighted Color：經過高亮色
Pressed Color：點選色
Disabled Color：禁用色
Color Multiplier：顔色倍數
Fade Duration：變化過程時間
Sprite Swap：精靈交換。需要使用相同功能不同狀态的貼圖。
Target Graphic：目标圖像
Highlighted Sprite：滑鼠經過時的貼圖
Pressed Sprite：點選時的貼圖
Disabled Sprite：禁用時的貼圖
Animation：動畫。最複雜，效果最絢麗。
其中的Normal Trigger、Highlighted Trigger、Pressed Trigger、Disabled Trigger等屬性是不能指派的，它們是自動生成的。當單擊“Auto Generate Animation”（自動生成動畫）按鈕時，系統會為你打開一個New Animation Contoller（建立動畫控制器）視窗，要求你選擇動畫存放的路徑，是以我們要先在Project中建立一個檔案夾，專門用來存放動畫，比如此檔案夾取名為_Animator，此時就可選中此檔案夾，并給此動畫取名（動畫的名預設為該Button的名字，當然其擴充名為controller），建立成功後，會在Project中的_Animator檔案夾中可看到剛才建立的動畫檔案（動畫的名預設為該Button的名字），且在這個Button的Inspector檢視圖中可看到會為此Button增加一個Animator元件：
該事件處理器中有3個元件：
Event System：事件系統元件（事件）
Standalone Input Module：獨立輸入子產品 （輸入）
Touch Input Module：觸控輸入子產品 （觸控）
如果我們将Event System (Script) 前的勾去掉，則管理整個場景的事件系統則不起作用了，此時運作程式，如果有Button，單擊它時就不會有反應了。
InputField
輸入域控件:在其層級Hierarchy視圖将其展開
該控件為一個複合控件,在主要件上還包含兩個子控件，一個為Placeholder與Text，其Text就是前面所介紹的文本控件,程式運作時使用者所輸入的内容就儲存在這個Text中，而Placeholder是占位符，它表示程式運作時在使用者還沒有輸入内容時顯示給使用者的提示資訊在這裡我們把它設定為“請輸入…”，設定方法是在層級視圖中展開這個InputField控件，選中其子控件Placeholder，在Inspecter視圖中可發現其Text(Sript)元件，修改其值為“請輸入…”即可，如下圖所示：
InputField控件與其他控件一樣，也有Image(Script)元件，自身元件InputField(script)中也有變換Transition屬性，其預設值也為顔色變換，除此之外，它有一個重要的屬性：
ContentType（内容類型），有10個選項，如下圖：
Standard：标準的
Autocorrected：自動修正
Integer Number：整數
Decimal Number：十進制小數
Alphanumeric：字母數字
Name：人名
Email Address：郵箱
Password：密碼
Pin：
Custom：定制的
第一個InputField的内容類型設為第5個Alphanumeric：字母數字，
第二個InputField的内容類型設為第8個Password：密碼，這樣程式就可啟用其自動驗證功能，例如在使用者名稱輸入框中如果你輸入的不是字母或數字則不能輸入進去，第二個密碼框中輸入密碼時它會預設以*号占位輸入的密碼。
Slider控件
Slider也是一個複合控件
Background是背景，預設顔色是白色，我們保持不變Fill Area是填充區域，其子控件Fill中隻有一個Image(Script)專有元件，假設我們将其顔色改為紅色Handle Slice Area中的子控件Handle（搖桿）中也隻有一個Image(Script)專有元件。
當我們在Hierarchy中選中Slider控件，其Inspector中的Slider(Script)屬性面闆如下圖所示：
上部的Interactable、Transition與前面介紹的控件是差不多的，下面談談它特有的一些屬性：
Fill Rect：填充矩形區域
Handle Rect：搖桿矩形區域
Direction：Slider的擺放方向，可以從左到右、從右到左、從上到下、從下到上
Min Value：最小數值
Max Value：最大數值
Whole Numbers：整數數值。假設我們将Min Value設為1，Max Value設為100，那麼調節搖桿時，對應的值在1到100之間，而且是一個小數，如55.67，有時我們希望它是整數，那麼選中該項即可。
Slider的動态事件
假設我們想在拖動搖桿的時候，讓其值顯示在右邊的一個文本框中，如下圖所示：
這就要用到Slider的動态事件了
指的是Slider的滑塊滑動其值發生改變時而産生的動态事件，它有一個參數Single：單精度，實際上這裡指的是float，整個事件的機理是，當滑動滑塊時，其值發生改變，事件産生，而且會實時将滑塊所對應的值傳給此事件，儲存在這個參數中，供程式使用。
ScrollBar 控件
其屬性與前面的Slider差不多，動态事件也是一樣的，這裡就隻談其特有的屬性：
Value：當拖支滑塊時，其值是在0到1之間變化的
Size：是滑塊的大小，如果把它改成0.5，滑塊就會大到占滑條的一半大。
Number Of Steps：數值的步驟。假設設定為5，那麼就會把Value分成5個值，調節滑塊時其值就在這5個值中變化。
Toggle控件
Toggle開關，當我們建立它後可發現它也為一個複合型控件
它有Background與Label兩個子控件，而Background控件中還有一個Checkmark子子控件，如果我們将其拖散可清楚地看見,Background是一個圖像控件，而其子控件Checkmark也是一個圖像控件，其Label控件是一個文本框，它們與我們所講的控件是一緻的，我們通過改變它們所擁有的屬性值，即可改變Toggle的外觀，如顔色、字型等等。下面來看看Toggle的一些重要屬性。
Is On：目前是處于開還是關。用滑鼠點選那個Toggle按鈕，将發現其中的對勾符号會在出現與不出現之間切換，同時與之相對應的，在其Inspector面闆中，屬性In On後面的對勾也在勾選與不勾選之間切換。
Graphic：圖像。用滑鼠點選那個Toggle按鈕，其對勾符号會在出現與不出現之間切換，它的原理就是控制那個對勾圖像出現與不出現而實作的，這個Graphic就是設定這個屬性值的，你可以通過
設定
Group：組（單選框功能）
在Hierarchy面闆中，選中我們剛才建立的Toggle，然後按鍵盤Ctrl+D兩次，就可複制出兩個Toggle了，并在場景視圖中拖動它們的位置，使它們都可見，運作，我們将發現這個三個都可選中，即它們是複選框。如果我們把這三個組成一個組，讓它們關聯，就可做成單選了。
從Group屬性可看出它需要一個ToggleGroup。我們先在畫布上建立一個空對象，并命名為_ToggleGroup，在其Inspector中單擊
AddComponent這個按鈕，為其添加元件，在彈出的菜單中選擇UI，在後續彈出菜單中
選擇“Toggle Group”，這樣我們就為此對象添加了ToggleGroup元件了。在Hierarchy中同時選中要成組的那3個Toggle，把已添加了ToggleGroup元件的_ToggleGroup拖到Inspector的
中即可，這樣我們便把這3個Toggle成組了，于是它們3個就隻能單選其中一個了。為了更完美，首先調整空對象_ToggleGroup的位置與大小，讓其包含那3個Toggle控件，然後在Hierarchy中，把3個Toggle選中并拖到_ToggleGroup中成為子物體
這樣在邏輯上與外觀上均完備，且移動父物體時子物體也會跟着移動。
Toggle控件動态事件On Value Changed(Boolean)
進階控件ScrollRect
滑動區域控件ScrollRect是在一個較小區域顯示較多内部控件的一種機制。在UI系統中，這種控件的原型是沒有的，它是我們開發者利用UI系統裡已有的基本控件組合而成的。不過在UI系統裡有ScrollRect這個類，即它是一個元件，不是控件。
控件與元件有什麼差別呢？簡單地說，在一個控件裡可以添加元件，如在Button上可添加Animator元件。有些控件在建立時，它會預設自帶一些元件，如Panel會自帶Image元件，其帶括号的Script就表示這個Image是元件，因在UI系統裡有Image這個基本控件的，故加上一個帶括号的Script來差別控件與元件，說明此處的Image是元件而不是控件。同理，當我們建立一個Button控件時，預設情況下我們可以在其Inspector視圖裡發現它帶有Image與Button兩個元件的。
實際上我們可以這樣了解，元件是一個腳本，是一個類，控件是這個類的執行個體化對象，是一個具體實作，比如Button控件裡含有Button元件就好了解了。
1 、ScrollRect是待開發者自己去建立的控件，我們暫時把它稱作隐形控件。下面我們來建立這個控件。
建立一個畫布Canvas，在畫布上建立兩個空對象，其中一個命名為ScrollRect，另一個命名為Content，再建立一個Scrollbar。調整它們的大小與位置，大緻如下：
2、在Content上建立幾個子對象，這裡我們建立4個Button，并調整它們的位置，使它們平鋪在Content中，同時設定Button的Image的SourceImage的值
3、組裝ScrollRect：3個元件2個屬性
添加ScrollRect元件：選中空對象ScrollRect，在其Inspector視圖中單擊“AddComponent”按鈕，選擇UI中的Scroll Rect，這樣便為這個空對象添加上了ScrollRect元件。此元件裡有2個重要屬性Content、Horezontal Scrollbar，其功能簡單說是用滑動條的滑動去控制内容區域的移動。根據此原理我們把Hierarchy視圖中的Content與Scrollbar分别拖挂到這兩屬性值框中即完成了對象的指定工作。試運作程式并拖動滑動條，發現Content中4個按鈕圖檔确實能随着滑動條的移動而移動了，如圖：
但這還不完美，如果能隐藏多餘的内容，隻顯示特定區域的内容，就象網頁中的滾動條那樣就好了，如下圖所示：
要達到此功能，還要為已添加了ScrollRect元件的對象增添Image、Mask（遮罩）兩個元件，其添加方法與上一緻。至此，組裝ScrollRect的3個元件ScrollRect、Image、Mask ，2個屬性：ScrollRect中的Content、ScrollRect中的Horezontal Scrollbar已完備，但當我們運作時，其效果仍然與前面相同，不能隐藏多餘部分。如果在Hierarchy視圖中我們把Content拖到ScrollRect上，使Content成為ScrollRect的子對象，就可達到我們想要的效果了。
其原因是，我們所添加的Image與Mask是在ScrollRect上，那麼用圖像去遮罩的對象是ScrollRect，是以我們要把Content作為ScrollRect的子對象才能達到此效果。
Viewport :拖動後内容的傳回位置
進階控件 标簽頁面TagPage
如圖，當我們點選頂部不同的标簽時，下部的内容區域會顯示對應的内容版面。
在畫布上建立一個空對象，命名為Lable，建立一個Image，布局上Lable在上面，Image在下面，如下圖：
在Lable中建立三個子控件，它們均為Toggle，命名為Toggle1、Toggle2、Toggle3，并調整它們的
Background與Checkmark，使其看起來像按鈕：
詳細制作過程
Background是背景，是未被選中時表現出來的圖景。首先在場景視圖中将其大小調大，使其與整個按鈕形狀一樣大，然後在其Inspector視圖中的Image元件裡設定Source Image或Color屬性值，這裡為了簡便，我們将其Color值設為較暗的灰階色，用于它未被選中時展現出來的顔色。
Checkmark是選中時表現出來的圖景，預設是一個對鈎，同理首先在場景視圖中将其大小調大，使其與整個按鈕形狀一樣大，這樣一來，Checkmark與Background一樣大，兩個重疊起來了，當未選中時，表現出來的是Background的景象，選中後表現出來的是Checkmark的景象。對于Checkmark的調整，然後在其Inspector視圖中的Image元件裡設定Source Image或Color屬性值，這裡為了簡便，将Image元件裡的Source Image屬性設為空None，即去掉那個對鈎圖像，并将其Color值設為較亮的灰階色，用于它被選中時展現出來的顔色。
這三個按鈕狀的Toggle按設計思路應該為單選，是以按以前所學的知識，需設定它們的Group屬性值為Lable ，同時，對于它們的Is On屬性，第一個Toggle的保持勾選，另兩個去掉勾選，即使開始時，第一個處于預設選中狀态。
在Image上建立三個為空的子控件，分别命名為Page1、Page2、Page3，并調整它們的大小，使其與Image一樣大，位置上與Image重疊。再在Page1、Page2、Page3上各自建立一個Text子控件，也調整它們的大小大緻與Image相當，且位置上也與Image重疊，并分别輸入要顯示的文本内容。這三個Text是重疊在一起的，顯示時，其内容也會重疊，如果我們隻勾選第一個Text的父控件Page1的 ，另兩個去掉勾選，那麼顯示時會預設顯示第一個，另兩個處于未激活狀态，不會顯示出來，自然就不會發生顯示的重疊了。
最後一步我們來實作當我們點選頂部不同的标簽時，下部的内容區域會顯示對應的内容版面。也許你會認為這要用到腳本，實際上有更簡便的方法，當然會離不開事件處理機制的。下面以Toggle1為例，選中它，在其Inspetctor視圖中，單擊：
中的“+”号，為其添加事件，如下圖：
委托事件處理對象，這裡我們把Page1拖給 None(Object)如下圖
雖然我們沒有編寫自己的腳本，但Unity有内置的許多方法的，這裡我們選擇第二項GameObject：
選擇上邊的動态方法：SetActive，設定結果如下圖：
這個事件的運作機理是：當Toggle1的選中狀态發生改變時（注意是狀态發生改變，選中時會産生事件，那麼由選中到取消選中，也會産生事件），所挂接的對象Page1會被激活或失效。
根據這個原理，Toggle2的事件委托對象為Page2，Toggle3的事件委托對象為Page3，這樣就實作了當我們點選頂部不同的标簽時，下部的内容區域會顯示對應的内容版面了，如下圖：
布局器使用
添加布局元件
點選事件的三種實作形式
Unity3D的uGUI系統的将UI可能觸發的事件分為12個類型，即EventTriggerType枚舉的12個值。
先以PointerClick為例。這個是用于某點點選事件。其他事件都可以根據相同的辦法調用。
實作事件主要有3種方式：
方式一：繼承基礎接口實作
步驟一：建立ClickEvent腳本。繼承MonoBehaviour和IPointerClickHandler
using UnityEngine;
using System.Collections;
using UnityEngine.EventSystems;
public class ClickEvent : MonoBehaviour,IPointerClickHandler
{
public void OnPointerClick (PointerEventData eventData)
{
Debug.Log("點選了我");
}
}
步驟二：實作public void OnPointerClick(PointerEventData eventData)方法：
步驟三：建立一個名為Panel_IPointer的UI對象。并且将ClickEventt腳本附加到對象上。
步驟四：啟動，并點選Panel_IPointer對象。在Console輸出如下：
方式二：Unity3D編輯器操作設定實作
步驟一：建立一個C#腳本。在腳本中添加一個public方法。
步驟二：建立一個命名為Empty的UI對象，用于接收和響應點選事件。建立一個名為Panel的UI對象，用于觸發點選事件。
步驟三：Panel對象添加EventTrigger元件，” Add New” -> 選擇” PointerClick”。将Empty對象拖拽到觸發者位置。然後點選”No Function”選擇我們寫在Test腳本中的OnTestClick事件。
方式三：程式動态設定實作
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;
using UnityEngine.EventSystems;
public class ClickTest : MonoBehaviour {
// Use this for initialization
void Start ()
{
var trigger = transform.gameObject.GetComponent<EventTrigger>();
if (trigger == null)
{
trigger = transform.gameObject.AddComponent<EventTrigger>();
}
// 執行個體化delegates
trigger.triggers = new List<EventTrigger.Entry>();
// 定義需要綁定的事件類型。并設定回調函數
EventTrigger.Entry entry = new EventTrigger.Entry();
// 設定 事件類型
entry.eventID = EventTriggerType.PointerClick;
// 設定回調函數
entry.callback = new EventTrigger.TriggerEvent();
UnityAction<BaseEventData> callback = new UnityAction<BaseEventData>(OnScriptControll);
entry.callback.AddListener(callback);
// 添加事件觸發記錄到GameObject的事件觸發元件
trigger.triggers.Add(entry);
}
public void OnScriptControll(BaseEventData arg0)
{
Debug.Log("Test Click");
}
}
事件運作模式
在事件元件面闆中，第一個選項框中的值我們在Button時就是一直使用的是其預設值：Runtime Only，如下圖所示：
當我們單擊該選項時，出現的下拉菜單如下：
Off：關閉事件處理功能；
Editor And Runtime：編輯與運作時，其事件處理功能均起作用,調編輯器參數時管用；
Runtime Only：僅在運作時，其事件處理功能才起作用。