UnityのuGUIでラジオボタンを実装、選ばれたLabelを取得

UnityのuGUIには様々な部品が用意されていますが、「選択肢を並べてどれか一つを選ぶ」という、webの`form`にある`<input type="radio">`で実装するようなラジオボタンが予め用意されていません。これを実装するのにON/OFFを切り替える`Toggle`を複数並べて`Togglegroup`で連携すると、一つだけ選べるラジオボタンに出来ます。別に用意されたボタンを押すと、選択された`Toggle`のラベル(`String`型)を取得する例です。

#オブジェクトの準備

まずは、エディタで必要な`GameObject`を配置します。uGUIの'ToggleGroup`の使用法がお分かりの方は飛ばしていただいて結構です。

##`Toggle`を配置

今回は、3択として3つをならべてみます。
配置には、メニューから、[GameObject]>[UI]>[Toggle]を選びます。配置される場所は、[Game]タブで確認します。初期状態は画面の左下に表示されます。
[![https://gyazo.com/eaf0b19ac84a263f0340580b3e5a777b](https://i.gyazo.com/eaf0b19ac84a263f0340580b3e5a777b.png)](https://gyazo.com/eaf0b19ac84a263f0340580b3e5a777b)
UIオブジェクトを配置すると、[Heerarchy]タブを見ると自動的に`Canvas`オブジェクトが配置されるのが判ります。
[![https://gyazo.com/dede41a722f6921fd267661ade05ae67](https://i.gyazo.com/dede41a722f6921fd267661ade05ae67.png)](https://gyazo.com/dede41a722f6921fd267661ade05ae67)

チェックボックスの横に表示されてる文字列は、`Toggle`オブジェクトの子として配置されている｀Text`型のコンポーネントをもつオブジェクトに入っています。"Toggle"になっているところを"small"に変えてみましょう。
[![https://gyazo.com/1af0b44369460455a628bd194ba07116](https://i.gyazo.com/1af0b44369460455a628bd194ba07116.png)](https://gyazo.com/1af0b44369460455a628bd194ba07116)
[![https://gyazo.com/fffdbc967620552198c70c15b1b09592](https://i.gyazo.com/fffdbc967620552198c70c15b1b09592.png)](https://gyazo.com/fffdbc967620552198c70c15b1b09592)

表示されている場所は、`Toggle`オブジェクトの｀Rect Transform`で適宜、変えて下さい。

上記を使って、３つを並べてみました。
[![https://gyazo.com/6564a4aee4b26d7aaea60656dac9bd28](https://i.gyazo.com/6564a4aee4b26d7aaea60656dac9bd28.png)](https://gyazo.com/6564a4aee4b26d7aaea60656dac9bd28)
[![https://gyazo.com/38fe79c4f76a25486c88b3f730c3533a](https://i.gyazo.com/38fe79c4f76a25486c88b3f730c3533a.png)](https://gyazo.com/38fe79c4f76a25486c88b3f730c3533a)

さらに、[GameObject]>[UI]>[Button]で、Buttonオブジェクトを用意します。
[![https://gyazo.com/2eae29c1e1494befd48b3b2e63c5f23b](https://i.gyazo.com/2eae29c1e1494befd48b3b2e63c5f23b.png)](https://gyazo.com/2eae29c1e1494befd48b3b2e63c5f23b)

##`ToggleGroup`を作る
今回は「どれか一つだけ選ばれた状態」にする仕様なので、一つだけ選ばれた状態を予め作ります。
チェックを外したい`Toggle`にアタッチされている`Toggle`(Script)コンポーネントにある"Is On"のチェックを外しておきます。
[![https://gyazo.com/3a10060638693e7dffdb5e861b7946dc](https://i.gyazo.com/3a10060638693e7dffdb5e861b7946dc.png)](https://gyazo.com/3a10060638693e7dffdb5e861b7946dc)

[![https://gyazo.com/43d7b47a33a81066f07d634b47cdcb96](https://i.gyazo.com/43d7b47a33a81066f07d634b47cdcb96.png)](https://gyazo.com/43d7b47a33a81066f07d634b47cdcb96)

この状態で実行してみると、未チェックのところを選べます。
[![https://gyazo.com/b5037f30e13aaf94edabc2ce94ee8ceb](https://i.gyazo.com/b5037f30e13aaf94edabc2ce94ee8ceb.gif)](https://gyazo.com/b5037f30e13aaf94edabc2ce94ee8ceb)

ここに`ToggleGroup`を設定していきます。今回は、`ToggleGroup`を`Toggle`のどれか一つにコンポーネントをアタッチし、それを他の'Toggle`が参照する形にします。

まず、最初に配置していた`toggle`の[Inspector]で[Add Component]>[UI]>[ToggleGroup]を選びます。
[![https://gyazo.com/4afdec8428f1ea24754ed0f49eb54251](https://i.gyazo.com/4afdec8428f1ea24754ed0f49eb54251.png)](https://gyazo.com/4afdec8428f1ea24754ed0f49eb54251)

これで`ToggleGroup`がアタッチされました。

次に、全ての`Toggle`で、この`ToggleGroup`を参照します。それぞれで施して下さい。
[![https://gyazo.com/d6599ab58f6aa92d502577560a22327a](https://i.gyazo.com/d6599ab58f6aa92d502577560a22327a.png)](https://gyazo.com/d6599ab58f6aa92d502577560a22327a)

再び実行すると、一つだけ選ばれる状態になっているのが確認できます。
[![https://gyazo.com/e56b1915961f5e01e5b933daac6edb60](https://i.gyazo.com/e56b1915961f5e01e5b933daac6edb60.gif)](https://gyazo.com/e56b1915961f5e01e5b933daac6edb60)

HTMLのラジオボタン風の画像にしたい場合は更に他の部分の変更が必要ですが、ここでは割愛します。

#Scriptの用意

以下を用意しました。

```csharp:SubmitButton.cs
using UnityEngine;
using UnityEngine.UI;
using System.Collections;
using System.Linq;

public class SubmitButton : MonoBehaviour {

    //連携するGameObject
    public ToggleGroup toggleGroup;

    // Use this for initialization
    void Start()
    {
    }
    // Update is called once per frame
    void Update()
    {
    }

    public void onClick()
    {
        //Get the label in activated toggles
        string selectedLabel = toggleGroup.ActiveToggles()
            .First().GetComponentsInChildren<Text>()
            .First(t => t.name == "Label").text;

        Debug.Log("selected " + selectedLabel);

    }
}

```

処理を説明します。今回は、処理を`onClick()`というメソッドに用意しています。

0. 指定された`ToggleGroup`から`ActiveToggles()`によって選ばれている`Toggle`の配列を取得します。今回は一つだけ選ばれていることが条件なので、実質的に一つだけ返されます。
0. 取得された配列から`First()`によって先頭のひとつの`Toggle`だけ取り出します。
0. `toggle`の子の配列に在る`Text`型をGetComponentsInChildren<Text>()によって取り出します。
0. 名前が`"Label"`の`Text`オブジェクトを取り出し、コンポーネントのtextの値を取り出します。 

#Scriptをアタッチ

用意したSciriptアセットを、`Button`オブジェクトのInspectorの[Add Component]ボタンから追加します。
[![https://gyazo.com/4b9666a71e0935b869796c462946041f](https://i.gyazo.com/4b9666a71e0935b869796c462946041f.png)](https://gyazo.com/4b9666a71e0935b869796c462946041f)

更に、`ToggleGroup`を`Scene`から選択します。
[![https://gyazo.com/3b53905dfdc6bf261da32b29ba20815d](https://i.gyazo.com/3b53905dfdc6bf261da32b29ba20815d.png)](https://gyazo.com/3b53905dfdc6bf261da32b29ba20815d)

このコンポーネントのメソッドを、On Clickイベントで呼び出す設定をします。
上に在るイベントハンドラの設定で、先ずどのGameObjectのメソッドを呼ぶかを設定します。

今回は自分自身である`Button`を選びます。
[![https://gyazo.com/2b2dfe6b84e2e77fa55695a8cb86b73f](https://i.gyazo.com/2b2dfe6b84e2e77fa55695a8cb86b73f.png)](https://gyazo.com/2b2dfe6b84e2e77fa55695a8cb86b73f)

更に、呼び出すメソッド`onClick()`を選びます。
[![https://gyazo.com/de84db72025d3df4519f8291097ba59a](https://i.gyazo.com/de84db72025d3df4519f8291097ba59a.png)](https://gyazo.com/de84db72025d3df4519f8291097ba59a)

実行して確かめます。
[![https://gyazo.com/708d20e0bb0cfdf31130933f12827f99](https://i.gyazo.com/708d20e0bb0cfdf31130933f12827f99.gif)](https://gyazo.com/708d20e0bb0cfdf31130933f12827f99)

今回の方法以外に、UniRxを用いる方法や、Toggle内にOn Changedを拾う動作から値を取得することも可能です。
詳しくは、コメントを御覧ください。
尚、この方法では`ToggleGroup`が適切に設定され、確実に要素が一つ、選ばれていることを想定しています。`ToggleGroup`は他のScriptによって状態が変わるなどの実行時の要因には対応しませんので、注意してください。
そうした場合にどういう対応が望ましいかは、適宜、実装時に検討してください。フェイルセーフに関しては細かい配慮はしていません(外部も適切であればきちんと動作します)。

ご協力頂いた[toRisouP](http://qiita.com/toRisouP)さん、ありがとうございました。