HoloLens2でホロモンアプリを作る その７０（MRTKのInteractableToggleColectionを使ってラジオボタンでUIを切り替える）

本日はアプリ作成枠です。
HoloLens2でホロモンアプリを作る進捗を書き留めていきます。

今回はMRTKのInteractableToggleColectionを使ってラジオボタンでUIを切り替えるメモです。

MRTKのInteractableToggleColection

MRTK の InteractableToggleColection は MRTK で提供されているトグルボタンを管理するためのコンポーネントです。
本コンポーネントに複数のトグルボタンを登録しておくと、必ず1つのトグルボタンのみが有効になるよう管理されます。
docs.microsoft.com

切り替えボタンの作成

InteractableToggleColection を使って複数の選択肢の中から、1つだけを選ぶラジオボタンを作成します。
初めに、BackPlate を設定したボタンを配置するためのオブジェクトを作成します。

ボタンオブジェクトとして MRTK のパッケージから PressableButtonHoloLens2ToggleRadio ボタンプレハブを取り出して配置します。

今回は不要なのでボタンの[BackPlate]と[Enable See it/Say it Label]は無効化しています。

複数のボタンをきれいに並べるには GridObjectCollection コンポーネントを利用すると便利です。
ボタン群の親オブジェクトに GridObjectCollection コンポーネントを設定します。

並べ方の設定を入力して[Update Collection]ボタンをクリックすると、子オブジェクトが自動で整列します。

InteractableToggleColectionの設定

次に適当なオブジェクトに InteractableToggleColection コンポーネントを設定します。

[Toggle List]に管理対象としたいトグルボタンを登録します。
これで指定のボタンは複数の中から常に1つだけが選択されるラジオボタンになります。

個々のボタンには押下されたときに、対応する表示パネルへUIを切り替えるイベントを登録しておきます。

動作確認

シーンを再生して動作を確認します。

ハンドメニューを呼び出して、下部の切り替えボタンを押してみます。

以下の通り、ラジオボタン方式でUIを切り替えることができました。