本日はMRTK3枠です。
今回はMRTK3でのトグル(排他的)ボタンを見ていきます。
〇トグルボタンとは?
トグルボタンとはアンケートなどでよくみられるようなコレクションの中にある複数のボタンのうち一つのみが排他的に選択可能で、それ以外の選択が解除されるというようなボタンを指します。
よく見る例として設定などのカラー選択などもこれに当たります。
複数の選択肢から一つの回答を得るというのがトグルボタンになります。
〇MRTK3での実装方法
MRTK3では通常のボタンを実装し、それらの親オブジェクトにコンポーネントをアタッチすることで実装を行うことができます。
このボタンはMRTK UX Components Noncanvasに格納されているPressableButtonをサンプルでは使用されています。
①PressableButtonプレファブを複数配置します。
②ボタンをまとめる親オブジェクトを作成します。
③親オブジェクトにGridObjectCollectionコンポーネントをアタッチします。
このオブジェクトはMRTKv2のMRTK Faundationで提供されている機能です。
昨日に直接影響するものではなくUnityシーン上での子オブジェクトの均等に配置などといったレイアウトに使用できます。
④シーンに配置したPressableButtonプレファブからPresableButtonコンポーネントのSelection ModeをOne Way Toggleに切り替えます。
これはどのようにボタンが使用されるか?というモードでOne Way Toggleは一度切りのボタン選択が可能なモードです。
この一度切りというのはボタン単体ではということで、今回の場合この一度切りの選択をリセットを含め別のコンポーネントで管理しています。
⑤親オブジェクトにToggle Collectionコンポーネントをアタッチします。
⑥Toggle CollectionコンポーネントのTogglesのリストに子オブジェクトのPressableButtonを追加します。
以上で実装は完了です。
これで排他的なトグルボタンが完成しました。