ひとりでのアプリ開発 - fineの備忘録 -

ひとりでアプリ開発をするなかで起こったことや学んだことを書き溜めていきます

Unity - UI:Toggle の使い方 -

初めに

 オン/オフを切り替える機能であるToggle(トグル)についてまとめます。

Toggle とは

 Toggle とは、オン/オフを切り替える機能のことです。デフォルトでは、上の画像のように、チェックボックスになっています。

Toggle コンポーネント

Interactable 有効/無効の切り替え
Transition 遷移に関する設定
Navigation UIへのフォーカスの切り替えの制御
IsOn Toggle のチェックの On/Off
Toggle Transition チェック切り替え時の視覚的な表現の設定
Graphic チェックマークに該当する画像の設定
Group Toggle のグループ化の設定

Interactable

 Toggle の有効、無効の切り替えになります。チェックが入っている場合は 有効(Toggle を押すことができる)、チェックが入っていない場合は無効(Toggle を押すことができない)になります。

(有効時)

(無効時)

Transition

 Transition はクリック時、無効の時、マウスを乗せているときなど Toggle の状態に合わせて、Toggle の見え方を遷移させる設定です。


  • None

 何も変化しません。

  • Color Tint

 Toggle の状態で色を変化させます。デフォルトの設定はこれになります。

  • Sprite Swap

 Toggle の状態ごとに Sprite を設定できます。


  • Animation

 Toggle の状態ごとに Animaton を設定できます。

 別途、Animator が必要になります。Auto Generate Animation をクリックすると、Animator、Animation Clip を自動生成します。

 UI オブジェクトは方向キーで選択を遷移させることができます。Navigation はその遷移の仕方を確認、設定することができます。
 Visualize ボタンを押すと、Scene ビューで遷移の仕方を確認することができます。黄色い矢印のところへ遷移することができます。

 遷移のさせ方は次のようになっています。


  • Everything:すべて
  • None:遷移できない
  • Horizontal:左右キーによる水平方向の遷移のみ可能
  • Vertical:上下キーによる垂直方向の遷移のみ可能
  • Automatic:自動
  • Explicit:上下左右キーそれぞれ個別に遷移先のUIオブジェクトを設定できる
IsOn

 Toggle がチェックされている場合は、IsOn にもチェックが入ります。

Toggle Transition

 チェック切り替え時の視覚的な表現の設定できます。

  • None:On/Off を即座に切り替える
  • Fade:On/Off をフェードイン、フェードアウトで切り替える
Graphic

 デフォルトだとチェックマークにあたる画像が割り当てられています。こちらの画像を変えることでチェックマークに使用する画像を変更できます。
 また、Toggle の子オブジェクト、孫オブジェクトを確認すると Background、Checkmark があることがわかります。こちらの画像を直接変更することで、チェックマークや Toggle の背景に使用する画像を変更できます。


Group

 Toggle のグループ化の設定ができます。グループ化をした Toggle はどれか1つしかチェックをいれることができなくなります。

(グループ化の方法)

  • 複数の Toggle を用意する


  • グループ化したい Toggle の共通の親オブジェクトに Toggle Group コンポーネントをつける

 今回は Canvas につけました。Toggle Group の Arrow Switch Off にチェックを入れると、すべての Toggle を Off にすることを認めます。

  • Toggle の Group に Toggle Group コンポーネントをつけたオブジェクトをドラッグ&ドロップする


(実行)

スクリプトから Toggle を扱う

 Toggle の操作をスクリプトから取得する方法は下記の通りです。

  • Toggle が押されたときの処理を書いたスクリプトを用意する

 今回は Toggle にチェックが入った時、外れたときにログを出力するスクリプトを用意しました。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;  //ToggleはUIのため追加

public class ToggleScript : MonoBehaviour
{
     //Toggleを取得する
    [SerializeField]
    Toggle toggle;

    //Toggleの値が変更されたときに呼び出される関数
    //関数名はなんでもよい
    public void onValueChanged()
    {
      if(toggle.isOn)  //Toggleにチェックが入っていたら
      {
        Debug.Log("ToggleがOnになった");
      }
      else  //Toggleにチェックが入っていなかったら
      {
        Debug.Log("ToggleがOffになった");
      }
    }
}
  • ゲームオブジェクトに先ほどのスクリプトをアタッチする

 どのゲームオブジェクトに付けても問題ありません。本記事では、Toggle そのものにつけました。


 これで Toggle の操作を取得することができました。基本的な操作は Button と同じです。

最後に

 Toggle の使い方をまとめました。個人的には、グループ化とスクリプトの isOn だけ覚えていればなんとかなると思います。