Unity的UGUI學習

UGUI和NGUI在使用上很相似，但UGUI封裝的更好，使用起來更加方便

UGUI的基礎組件

Pos x  、Pos y 、Pos z  是UI元素在Canvas中以錨點為原點的坐標

Width   Height是UI元素的大小

Anchors：是確定UI元素的錨點，錨點是固定UI元素於父物體的位置的，在改變父物體的大小時，子UI與錨點的相對距離不變

pivot：是元素的中心點，Rotation   Scale都是以中心點進行變化的

Rotation：對ui進行旋轉

Scale：放大縮小UI元素

UGUI中的UI元素

1：Canvas

     問題：Canvas中選擇世界模式時，縮小canvas的大小，則在canvas中創建UI元素時,UI元素相對於canvas會很大，這個怎么辦？

     解決：在Canvas中創建UI元素時，直接用Rect Transform中的Scale 直接縮小UI元素

2：Panel

3：Button

image是指定按鈕的背景精靈  Image type：是設置精靈的顯示類型，和NGUI是一樣的，Sliced是九宮切、、、、、、

Button ：Transition 是選擇按鈕被選中時的變化種類，Sprite swap 可以用四個精靈圖片的切換表示按鈕的按下  color t ine用顏色的變化來表示按鈕按下的效果

    創建方法   1直接Create---UI----Button物體，這個物體是有Image和Button組件的，可以用Image為Button指定精靈，Button是實現按鈕功能的腳本， 再在Button物體下下創建一個                           Text用來顯示button的作用

                      2 直接創建一個Image精靈對象，再在精靈對象下加Button腳本，這樣也可以具有Button的功能。

   使用Button   1：使用面板在代碼中得到Button組件，對Button組件進行操作，使用面板中的OnClick綁定Button點擊時觸發的腳本中的方法。

                        2：使用代碼得到並控制Button組件

                          

using UnityEngine.UI;
using UnityEngine.SceneManagement;

public class PlayGame : MonoBehaviour {

    private Button PlayButton;
    void Awake()
    {
        PlayButton = this.transform.GetComponent<Button>();//獲取物體身上的Button組件
        PlayButton.onClick.AddListener(PlayButtonOnClick);//給按鈕添加觸發方法
    }
    void Start () {
    
    }
    
    // Update is called once per frame
    void Update () {
    
    }
    void PlayButtonOnClick()//點擊觸發的方法
    {
        SceneManager.LoadScene("PlayScenes");
    }
}

 

    

4：Text：用來顯示文字相當於NGUI的label

      創建方法：Create---UI---Text

      

     Text：顯示文字

     Line  spaceing ：行間距比例

     Horizontal Overflow：設置文字的水平顯示

                                      wrap：文字按大小顯示，沒地方顯示的文字就不顯示

                                      Overflow：將文本框的大小按水平方向顯示的文字數量自動調整

     Vertical overflow：truncate 文字按大小顯示，沒地方顯示的文字就不顯示

                                   Overflow ：文字按設置的大小顯示，文本框不夠大，自動在垂直方向擴展文本框，來顯示剩下的文字

      使用Text   1：使用面板在代碼中得到Text組件，對Text組件進行操作

                            public Text text//使用面板將Text組件賦予text

                            text.text=string;//更改文本顯示的內容

                           2：使用代碼得到並控制Text組件

                                private Text text;

                                text=Gameobject.find().getcomonent<text>()

                                text.text=ssring 

5：Image：用來將圖片精靈顯示到UI界面上，和NGUI中的sprite功能是一樣的

      

 

     用代碼控制更改圖片精靈

    

using UnityEngine;
using UnityEngine.UI;

public class imageui : MonoBehaviour {
    private Image image;//image組件
    public Sprite sprite;//面板賦值的精靈圖片
    void Awake()
    {
        image = transform.GetComponent<Image>();     //獲取image腳本
    }
    void Update () {
        image.sprite = sprite;//替換場景中的精靈
    }
}

Sprite sprit = Resources.Load("") as Sprite;//從資源文件夾中加載精靈
game.GetComponent<Image>().sprite = sprit;//更改場景中的精靈

 

6：Slider：滑動器，用來調節物體數值的變化的

UGUI中創建的Slider由背景(Background) 填充物（Fill area）滑動器滑動時顯示的顏色 （ Hangle slider area ）游標顯示的顏色

slider

Transition ：游標被選中時變化的方式   

                    color Tint：用顏色的變化來表示游標被選中時的變化

                    Sprite Swap：用精靈的變化來顯示游標被選中

                    Animation：用動畫的變化來顯示游標被選中

color Multiplier 游標的透明度

Fill Rect：滑動器滑動時的變化，可以用更改精靈來更改滑動器滑動時的變化

Hand Rect：游標  ，可以自己替換精靈來更改游標

Driection：滑動器滑動的方向

Min Value /Max value 設置滑動器的最大值和最小值

Value：滑動器的值

獲取滑動器的Value值 float v=Slider.value

滑動器變化時就觸發方法 

  和NGUI中slider一樣，用面板綁定公共方法，在Value值發生變化時就觸發這個方法

  用代碼綁定方法，在Value值發生變化時

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class slider1 : MonoBehaviour {

    private Slider slider;
    void Awake()
    {
        slider = transform.GetComponent<Slider>();//獲取物體上的Slider腳本
        slider.onValueChanged.AddListener(OnSlider1);//把方法綁定到Slider上
        //想要把方法綁定到Slider上，這個方法必須要有一個float類型的參數，這個參數就是Value值
    }
   /// <summary>
   /// 把OnSlider1方法綁定到slider ，slider的value一變化就執行Onslider1方法
   /// </summary>
   /// <param name="str"></param>
    void OnSlider1(float str)//這個參數就是slider的value值
    {
        print(str);
    
    }
}

 

 

7：ScrollBar：滾動條，用來滑動物體顯示的

Handle是Scrollbar 的滑動器，

Image 是指定滑動器的背景精靈

Interactable ：滑動器是否可以與我們交互

Transition ：滑塊被選中時，滑塊的變化方法

 Handle Rect ：指定滑動器

Direction：滑動器的滑動方向

value：滑動器的值

Size ：滑動器的大小

On value Change：綁定方法，當Value值發生變化時，就會執行這個方法。

還可以有代碼將方法綁定到On value change 上,當Value值發生變化時就執行該方法

using UnityEngine;
using UnityEngine.UI;

public class Scrolll : MonoBehaviour {

    private Scrollbar scrollBar;
    void Start () {
        scrollBar = transform.GetComponent<Scrollbar>();//獲取Scrollbar腳本
        scrollBar.onValueChanged.AddListener(OnScrollBarClick);//將方法綁定到Onvalue change 上
    }
    
    /// <summary>
    /// 方法傳的Value值就是scrollBar的Value值
    /// </summary>
    /// <param name="value"></param>
    void OnScrollBarClick(float value)
    {
        print(value);
      //  print(scrollBar.value);
    }
    
}

 

8：Toggle ：單選框

interactable：是否可以讓玩家進行選擇

Is On ：單選框是否選中的狀態

Graphic：選中時顯示的圖標

Group：多個單選框指定同一個Group，就改造成復選框了，一次只能選中一個

On value changed：監聽單選框是否按下，可以用面板監聽，也可以用代碼監聽

using UnityEngine;
using UnityEngine.UI;

public class text2 : MonoBehaviour {

    private Toggle toggle;
    void Awake()
    {
        toggle = transform.Find("toggle1").GetComponent<Toggle>();
        toggle.onValueChanged.AddListener(onToggleClick1);//toggle的狀態變化時就會觸發這個事件
    } 
    void onToggleClick1(bool state)//state是Toggle的狀態
    {
        print(state);
    }
}

 

     把Toggle改造成復選框：多個Toggle屬於同一個Toggle Group，就是復選框了

    物體加上Toggle group腳本，再把物體給多個Toggle的Group屬性附上，這幾個單選框就改成復選框了。

9：Input Field：輸入框

placeholder：可以設置輸入框初始狀態的顯示

text：輸入框輸入的文字

 

interactable  是否啟用input

text component  顯示輸入框的輸入文字

text  也可以設置輸入框的默認文字

character limit 設置輸入框能輸入的文字數

content type 設置輸入框輸入文字的類型

line type 設置文本的行類型

placeholder  指定輸入框默認文字的text

selection color 選中輸入框內部分文字時，部分文字的背景色

hide mobile input  在移動端隱藏輸入框

read only 輸入框是否為只讀屬性

using UnityEngine;
using UnityEngine.UI;

public class text1 : MonoBehaviour {
    private InputField input1;
   // private Input input1;
    void Awake()

    {
        input1 = transform.GetComponent<InputField>();
        input1.onValueChanged.AddListener(test1);//每輸入一個字符執行test1一次
        input1.onEndEdit.AddListener(test2);//按回車時執行test2一次
    }
    
    public void test1(string str)//str是輸入框輸入的字符
    {
        print(str+"a");
    }
    public void test2(string str)
    {
        print(str + "b");
    }
}

 

 

10：mask腳本和ScrollRect腳本 

      Mask腳本，子物體只能在窗口內顯示，超出的部分不渲染，Mask只有掛在UI圖片精靈上才起作用。

      添加ScrollRect腳本的物體具有滑動的功能

      實現滑動界面象一頁一頁的效果，每滑動一次翻一頁

     ScrollRect.HorizontalNormalposition實現，重新實現IBeginDrayHandle IEndDrayHandle接口中的方法OnBeginDray 和OnEndDray方法

    在OnEndDray中獲取玩家想要滑到那一頁，用獲取ScrollRect.HorizontalNormalposition值判斷玩家滑到那一頁，在用插值把ScrollRect.HorizontalNormalposition值設置到那一頁，

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class Move : MonoBehaviour,IBeginDragHandler ,IEndDragHandler{

    private ScrollRect scroll;
    private float[] array = new float[] { 0, 0.333f, 0.667f, 1.0f };//記錄每一頁的 horizontalNormalizedPosition值
    private int  c = 0;//記錄要翻到哪一頁的下標
    void Awake()
    {
        scroll = gameObject.GetComponent<ScrollRect>();//獲取 ScrollRect組件
    }



    void Update()
    {
        scroll.horizontalNormalizedPosition = Mathf.Lerp(scroll.horizontalNormalizedPosition, array[c], Time.deltaTime * 4);//用插值預算將頁碼從當前頁划到目標頁
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
       
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        float a = 0;
        float b = 1;
        float h = scroll.horizontalNormalizedPosition;
        print(h);
        for (int i = 0; i < array.Length; i++)//判斷划到的這頁與那一頁值最近，就把當前頁調整到目標頁
        {

            a = Mathf.Abs(h - array[i]);
            if (a<b)
            {
                b = a;
                c = i;
            }

        }
    //    scroll.horizontalNormalizedPosition = array[c];
    
}
}

 

 11：RawImage

 12： DropDown

 13： Scroll view

9：Rect Transform介紹

布局元素控件

    1：   Layout Element布局元素控件

    2：   Content Size Fitter內容尺寸裁剪

    3：  Aspect Ratio Fitter  長寬比例剪裁

    4：Horizontial Layout Group   水平布局組

      

    5： Vertical layout Group：垂直布局組

  

Spacing ：設置物體的縱向間隔

Child Alignment ：設置子物體的中心點

  6：Grid Layout Group的使用和NGUI的Grid的使用是一樣的，功能也是一樣

       Grid layout group 在其子物體進行排序

Cell size 設置子物體的大小，如果我們不想讓cell size去修改我們的子物體的大小，可以設置一個空物體，把子物體放在空物體下，把空物體放在Grid Layout Group 下，這樣 cell size改變的就是空物體的大小，不會對我們的子物體有影響

Spacing ：設置子物體的間隔

Start Corner ：設置子物體排序的開始點

Start Axis：子物體是橫着排還是豎着排

Child Alignment：設置子物體排序的中心點

Constraint ：設置子物體排序的行列數