LoginSignup
28

More than 1 year has passed since last update.

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

Last updated at Posted at 2015-10-22

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
UIオブジェクトを配置すると、[Heerarchy]タブを見ると自動的にCanvasオブジェクトが配置されるのが判ります。
https://gyazo.com/dede41a722f6921fd267661ade05ae67

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

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

上記を使って、3つを並べてみました。
https://gyazo.com/6564a4aee4b26d7aaea60656dac9bd28
https://gyazo.com/38fe79c4f76a25486c88b3f730c3533a

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

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

https://gyazo.com/43d7b47a33a81066f07d634b47cdcb96

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

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

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

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

次に、全てのToggleで、このToggleGroupを参照します。それぞれで施して下さい。
https://gyazo.com/d6599ab58f6aa92d502577560a22327a

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

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

#Scriptの用意

以下を用意しました。

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()というメソッドに用意しています。

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

#Scriptをアタッチ

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

更に、ToggleGroupSceneから選択します。
https://gyazo.com/3b53905dfdc6bf261da32b29ba20815d

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

今回は自分自身であるButtonを選びます。
https://gyazo.com/2b2dfe6b84e2e77fa55695a8cb86b73f

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

実行して確かめます。
https://gyazo.com/708d20e0bb0cfdf31130933f12827f99

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

ご協力頂いたtoRisouPさん、ありがとうございました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28