このブログはUnityの初心者向けに、Untiyの機能の使い方、基本のスクリプトファイルの使い方から応用までをご説明しています。中級以上の方に読んでいただきたい内容も随時更新していますので、お時間がある方、検索でここにアクセスされた方はぜひ立ち寄っていってください。
今回はUnityのUIの「Toggle」の活用についての記載していきます。
「Toggle」 はONとOFFが交互に呼び出されるスイッチのような機能を持ちます。「Button」と似ていますが「Button」は主にTriggerタイプ（ボタンを押したらイベントが発動）として使用されるのに対し、「Toggle」は主にBoolタイプ（TrueとFalse）として使用されることがメインとなります。もちろんどちらも、互いの使い方を補完することができます。（前回の記事の一時停止ボタンのように）
下の動画は「ファイブボックス 一分間Unity講座 UIのToggleでラジオボタンを作成する方法（素材作成編）」 のショート動画です。ご興味がございましたら、こちらの動画もご参照ください！
Panelの配置
まずは Toggle をまとめるPanelを配置します。ラジオボタンを一つのグループとしてまとめる親要素になります。
任意のCanvasの配下に UI⇒Panel でPanelを配置、名前を「TogglePanel」に指定。
追加された TogglePanel の Inspector から Add Component で「Toggle Group」コンポーネントを追加。
このコンポーネントは配下の Toggle を1つのグループとしてまとめるコンポーネントです。
同じ ToggleGroup を指定された Toggle はラジオボタンとしてふるまい、同時に1つのToggle のみが「ON」の状態を許可されます。
Toggle Group コンポーネントが持つ「Allow Swich Off プロパティ」にチェックを入れると、Toggleが「On」の状態でクリックされたときに「Off」になる機能が有効になります。
配置したTogglePanel の RectTransform コンポーネントを調整し、下のようなサイズ感のTogglePanel に変更します。このTogglePanelには、この後5つのToggleを配置しますので、幅を200、高さを150程度に指定しておきましょう。
Toggleの配置
作成した TogglePanel の配下に、UI ⇒ Toggle から、Toggleオブジェクトを配置します。
Toggleの Toggleコンポーネントの Groupプロパティには、上の課題で作成済みの「Toggle Group」コンポーネントをもつ TogglePanel をAssignしておきます。
※Toggle のTextはこの後の課題でスクリプトファイルから指定しますので、いったんそのままで結構です。
作成した Toggle を複製し、合計5個の Toggle を TogglePanel の子要素として配置します。
複製したToggleは同じ場所に重なって配置されています。
Grid Layout Group で整列
親要素の TogglePanel に「Grid Layout Group コンポーネント」を追加することで、子要素の配置を指定することができます。
サンプルでは下のように左の内余白に10，セルサイズに150×20、要素間の余白（Y）を5などを指定しています。
Grid Layout Group で指定することができるプロパティは下の通りです。
- Cell Size（セルのサイズ）
- 各グリッドセルのサイズを (Width, Height) の形式で指定します。
- 例えば、Cell Size = (100, 50) とすると、各セルは幅 100、高さ 50 のサイズで配置されます。
- Spacing（セル間の余白）
- セル間の水平 (X) および垂直 (Y) の間隔を (X, Y) の形式で指定します。
- 例えば、Spacing = (10, 5) とすると、セル同士の間隔が水平方向に 10、垂直方向に 5 の余白が追加されます。
- Start Corner（開始コーナー）
- グリッド配置を開始するコーナーを指定します。選択肢は以下の 4 つです：
- Upper Left（左上）
- Upper Right（右上）
- Lower Left（左下）
- Lower Right（右下）
- デフォルトは Upper Left です。例えば Lower Right を指定すると、グリッドの配置が右下からスタートし、左に向かって順に並びます。
- グリッド配置を開始するコーナーを指定します。選択肢は以下の 4 つです：
- Start Axis（配置の基準軸）
- グリッドを配置する際の優先軸を指定します。選択肢は以下の 2 つです：
- Horizontal（水平）: 水平方向にセルを並べた後、次の行へ移動します。
- Vertical（垂直）: 垂直方向にセルを並べた後、次の列へ移動します。
- デフォルトは Horizontal です。例えば、Vertical を指定すると、列単位でセルが並べられ、一定数配置されると次の列に移ります。
- グリッドを配置する際の優先軸を指定します。選択肢は以下の 2 つです：
- Child Alignment（子要素の揃え方）
- グリッド全体の子要素の整列位置を指定します。選択肢は以下のように様々です：
- Upper Left（左上）
- Upper Center（上中央）
- Upper Right（右上）
- Middle Left（左中央）
- Middle Center（中央）
- Middle Right（右中央）
- Lower Left（左下）
- Lower Center（下中央）
- Lower Right（右下）
- デフォルトは Upper Left です。例えば Middle Center を指定すると、グリッド全体の中央に子要素が揃います。
- グリッド全体の子要素の整列位置を指定します。選択肢は以下のように様々です：
- Constraint（制約条件）
- グリッドの行や列の制約を指定します。選択肢は以下の 3 つです：
- Flexible（フレキシブル）: 自動で行数や列数を決定します。
- Fixed Column Count（列数を固定）: 指定した列数に基づいて行数を調整します。
- Fixed Row Count（行数を固定）: 指定した行数に基づいて列数を調整します。
- 例えば、Fixed Column Count を選び、列数を 3 に設定すると、各行に最大 3 つのセルが配置され、次のセルは新しい行に移ります。
- グリッドの行や列の制約を指定します。選択肢は以下の 3 つです：
- Constraint Count（制約数）
- Constraint プロパティが Fixed Column Count または Fixed Row Count の場合、このプロパティで行または列の数を指定します。
- 例えば、Constraint = Fixed Column Count として、Constraint Count = 2 と設定すると、各行に 2 列ずつ配置されることになります。
これでラジオボタンが完成しました。
開始ボタンを押して確認してみると、常に１つのToggleしかOnにすることができない状態になっていると思います。
ファイブボックスでは、Unityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。
