Unity---UGUI入門基礎

[Toc] <br>

一、UGUI介紹

GUI就是Graphical User Interface（圖形用戶界面）簡稱。在Unity還未更新UGUI以前最流行的作UI的插件是NGUI。自從Unity4.6開始後，集成到了編輯器中，大大方便了開發。 <br>

二、UGUI基本控件

2.1 Canvas---畫布

每當你建立一個UI物體時，Canvas都會自動建立。全部的UI元素都必須是Canvas的子物體。 和Canvas一同建立的還有一個EventSystem，其是一個基於Input的事件系統，能夠對鍵盤、觸摸、鼠標、自定義輸入進行處理。

<font color=Red>Render Mode</font> Screen Space - Overlay：讓UI始終位於界面最上面部分 Screen Space - Camera：賦值一個相機，按照和相機的距離先後顯示物體和UI World Space：讓畫布變成一個3D物體能夠移動等 <font color=Red>UI Scale Mode</font> Constant Pixel Size：根據像素大小計算UI位置和尺寸。當屏幕尺寸改變時，UI大小不會變而其餘物體會變。 &ensp&ensp&ensp Scale Factor：UI縮放係數 Scale With Screen Size：根據不一樣屏幕尺寸自動改變UI大小 &ensp&ensp&ensp Reference Resolution：設置爲屏幕尺寸 Constant Physical Size：根據物理

Graphic Raycaster：圖片射線 Ignore Reversed Graphic：圖片翻轉後點擊無效 Blocking Objects：阻擋點擊物體(當UI前面有物體時，點擊前面的物體射線是否阻擋) Blocking Mask：阻擋層級

<br> ## 2.2 Text  **Line Spacing**：行間距

Rich Text：富文本---能夠結合多種字體類型和大小，尋找文本中的標記標籤，就和HTML中對字體的類型設置很像。 <font color=Red>若是想在同一個Text中實現不一樣的字體有不一樣的大小顏色等效果就可使用富文本。</font> 格式和Html5的格式大致相同，但並非徹底兼容

<b>粗體</b>
<i>斜體</i>
<size=50>大小</size>
<color=#ff000000>顏色</color>
<color=red>顏色</color>

Alignment：設置對齊 Align By Geometr：幾何方向的對齊 Horizontal Overflow：選擇溢出的處理方式---文本水平超出最大寬度時，是自動換行仍是就溢出不顯示。 Vertical Overflow：以上同理 Best Fit：是否忽略對文字大小的設置---選中文字會自動改變大小來所有顯示出來。 Raycast Target：UGUI建立的全部組件都會默認勾選，UI事件會在EventSystem的Update的Process觸發。UGUIh會遍歷全部Raycast Target是true的UI，發射射線找到玩家最早觸發的那個UI，拋出事件給邏輯層去響應。

private Text text;

	void Start () {
		text = transform.GetComponent<Text>();
		text.text = "你好呀";
		text.fontSize = 20;
		text.color = Color.blue;
		text.fontStyle = FontStyle.Bold;
	}

<br> ## 2.3 Image  **Source Image**：轉爲Sprite格式的圖片能夠賦值。 **Preserve Aspect**：圖像寬高是否按原始比例 **Set Native Size**：返回原始大小

Image Type：

1. Simple：在拉伸區域內徹底顯示一張圖片
2. Sliced：按九宮格顯示，九宮格在圖片資源中設置。拉伸時九宮格四周大小不變，上下只會左右拉，左右只會上下拉。
3. Tiled：平鋪，在選中範圍內顯示n張原始大小的圖片。
4. Filled：按各類方法切割圖片。<font color=Red>(常常用於技能冷卻)。</font>

public Image image;
    public Sprite sprite;

	//能夠修改Image的圖片
	void Start () {
        image = transform.GetComponent<Image>();
        image.sprite = sprite;
	}

<br> ## 2.4 RawImage  Image顯示的是Sprite格式的圖片。 RawImage顯示的是Texture格式的圖片。 RawImage通常用於背景、圖標上，通常用於顯示外部圖片。 當顯示一張外部加載的圖片且不用交互時，所用時間遠低於Image。

UV Rect：紋理座標，能夠用其實現幀動畫。

Raw Image的另外一個使用技巧：<font color=Red>在2D界面上實現3D物體</font>

1. 新建一個Render Texture，賦值到相機的Target Texture。用於獲取相機的3D顯示內容。
2. 把RT賦值到Raw Image。讓Raw Image接收相機的3D內容。
3. 再新建個相機，就能夠在新建相機2D界面中添加3D內容。

<br> ## 2.5 Button 

Interactable：是否可交互 Transition：過渡方式

1. 顏色過分 Target Graphic：過渡效果做用目標 Normal Color：默認顏色 Highlighted Color：高亮顏色 Pressed Color：按下顏色 Diasbled Color：禁用顏色 Color Multiplier：顏色切換系數 Fade Duration：衰落延遲
2. 圖片過分---基本同理
3. 動畫過分

Navigation：按鈕導航---在EventSystem中，有個當前被選中的按鈕，能夠經過方向鍵或代碼控制，使被選中的按鈕進行更改。 Visualize：能夠把按鍵能導航到的路徑可視化，高亮黃色箭頭顯示。

<font color=Red>Button添加點擊事件的兩種方法</font>

1. 直接在界面OnClick處添加事件。
2. 經過代碼給按鈕添加點擊事件。

public Button btn1;
    public Button btn2;

    void Start()
    {
        btn1.onClick.AddListener(NoParameter);
        btn2.onClick.AddListener(()=>HaveParameter("Hello"));
    }

    private void NoParameter()
    {
        Debug.Log("Hello");
    }

    private void HaveParameter(string str)
    {
        Debug.Log(str);
    }

<br> ## 2.6 Toggle 

主要選項和Button相同 Is On：默認是否選中。 Toggle Transtion：切換是是否有過渡效果，Fade表示有，None表示沒有。 Graphic：設置開關要起做用的對象，不必定非要是默認的對號。 Group：設置分組。<font color=Red>把多個Toggle放在同一個物體下，在這個物體上添加Toggle Group，並給Toggle賦值，就能夠實現單選。</font> On Value Change：當Toggle值改變時所調用的函數。

<br> ## 2.7 Slider  

Slider下的Background：表示未進度的區域的顯示圖片。 Slider下的Fill：已經進度的顯示圖片。 Slider下的Handle：可滑動塊塊的圖片 Fill Rect：設置用於顯示已是進度區域的圖片。 Handle Rect：設置可滑動塊塊的圖片。 Direction：方向，從左到右、從上到下之類的。 Min Value：最小值。 Max Value：最大值。 Whole Numbers：是否按整型來改變值。 Value：值 On Value Changed：值改變時，觸發的事件

Slider通常能夠與文本之類的結合，來解決內容過多顯示不下的問題。 等待更新案例...

<br> ## 2.8 Scrollbar  

Size：可滑動塊塊的大小。 Number Of Steps：從最小到最大值一共須要幾步。設置0或1時效果和Slider基本同樣，都是能夠自由滑動。設置2時，滑塊只能在最小或者最大，只有這兩個位置。再大同理。

<br> ## 2.9 Scroll View   在content下添加所需的內容，便可實現此效果。

Horizontal：是否容許水平拖動 Vertical：是否容許豎直拖動 Inertia：是否有滾動慣性 Deceleration Rate：滾動慣性大小 Visibility：是否選擇自動隱藏滾動條

<br> ## 2.10 Dropdown   **Options**：能夠添加或刪除每一項 **Item**：每一個項目中的內容組合 **Caption---**：標題顯示的內容 **Item---**：每一個項目的小內容

<br> ## 2.11 InputField   **Character Limit**：輸入字符個數限制 **Content Type**：輸入字符類型 **Custom Caret Color**：光標顏色 **Selection Color**：選中文本顏色

2.12 Grid Layout Group

Padding：邊距 Spacing：每項的間距 Start Corner：元素排列方向 Start Axis：元素水平或豎直排列 Child Alignment：子項從哪開始排列 Constraint：能夠限制列數或行數

2.13 Content Size Fitter

用來設置UI的長寬。 好比能夠掛在Text上，就能夠設置內容的最小長寬。

<br> # 三、UGUI事件系統 ## 3.1 UGUI實現事件3種方法 1. 添加接口，調用事件。<font color=Red>(推薦)</font> 2. 在界面中直接添加Event Trigger控件。 3. 在代碼中添加Event Trigger控件

<br> ## 3.2 IDrag拖動接口 IBeginDragHandler 開始拖動 IDragHandler IEndDragHandler 結束拖動

實現拖動效果的兩種方法

public void OnDrag(PointerEventData eventData)
    {
        //eventData.position  拖動時的屏幕座標
        //由於物體的位置是世界座標，因此要把拖動時的屏幕座標轉換爲世界座標
        RectTransform rect = GetComponent<RectTransform>();
        Vector3 pos = Vector3.zero;
        RectTransformUtility.ScreenPointToWorldPointInRectangle(rect, eventData.position, eventData.enterEventCamera, out pos);
        rect.position = pos;
    }


    public void OnDrag(PointerEventData eventData)
    {
        RectTransform rect = GetComponent<RectTransform>();
        rect.anchoredPosition += eventData.delta;
    }

<br> ## 3.3 IPointerClick點擊接口 IPointerEnterHandler 鼠標進入 IPointerExitHandler 鼠標離開 IPointerDownHandler 鼠標按下 IPointerUpHandler 鼠標擡起 IPointerClickHandler

<br> ## 3.4 ISelectHandler 選中接口 ISelectHandler 點擊選中後執行一次 IDeselectHandler 取消選中後執行一次 IUpdateSelectedHandler 選中後一直執行

要配合Selectable控件才能使用

<br> ## 3.5 系統按鍵接口 IScrollHandler 點擊後鼠標滾輪觸發 ISubmitHandler 點擊後回車空格觸發 CancelHandler 點擊後Esc觸發 IMoveHandler 點擊後鍵盤移動觸發

要配合Selectable控件才能使用