uGUI練習(九) Toggle Button

練習目標

練習單選框，多選框

Toggle Group：Toggle容器

Toggle：單一的選項

練習步驟

1、創建一個Panel，命名TogglePanel，添加Toggle Group組件，可以看到ToggleGroup面板十分的簡潔，那看來Toggle觸發的事件要在child下完成了.

TogglePanel屬性面板

2、在TogglePanel下創建兩個Toggle,命名ToggleRed,ToggleBlue，默認創建的Toggle，是這樣的

屬性面板如下( 屬性標注出了可以攔截的事件)：

3、在步驟1說過，ToggleGroup並沒有提供可設置的屬性，所以觸發事件要在Toggle下完成了，通過觀察Toggle，發現了下面這個事件

Toggle事件示例

4、所以需要我們自己寫腳本，來處理Toggle事件啦，創建ToggleScene.cs 綁定在TogglePanel上，

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

public class ToggleScene : MonoBehaviour {
    public Toggle toggle1;
    void Start()
    {
        toggle1.onValueChanged.AddListener(OnValueChanged);
    }

    void OnValueChanged(bool check)
    {
        Debug.Log(check);
    }
}

單選框效果

把Toggle1賦給腳本中的toggle1，Ctrl+P 運行

選擇不同的Toggle，可以看到控制台Log

Toggle切換Panel效果

下面使用Toggle來切換Panel，效果如下所示

步驟

1、繼續上面的步驟，添加兩個Panel，命名Red Panel ，Blue Panel,把這兩個Panel疊在一起(位置和大小相同，顏色不同)，隱藏其中一個

修改示例代碼

2、修改ToggleScene.cs

using UnityEngine;
using UnityEngine.UI;

public class ToggleScene : MonoBehaviour
{
    [SerializeField]
    private GameObject bluePanel, redPanel;
    [SerializeField]
    private Toggle toggleRed, toggleBlue;

    void Start()
    {
        toggleRed.onValueChanged.AddListener(OnValChangedRed);
        toggleBlue.onValueChanged.AddListener(OnValChangedBlue);
    }

    void OnValChangedRed(bool check)
    {
        bluePanel.SetActive(!check);
        redPanel.SetActive(check);
    }
    void OnValChangedBlue(bool check)
    {
        bluePanel.SetActive(check);
        redPanel.SetActive(!check);
    }
}

3、把ToggleScene綁定在 Toggle Panel上，並賦好值，按Ctrl+P 運行，即可切換Panel