本日はオリジナルのUI枠です。
本ブログではHoloLensで使用するためのオリジナルのUIを作成してGitHubで公開しています。
今回アプリケーションでテンキーを使用したかったので簡単に作成しました。
〇テンキー
テンキーは数字を打つためのキーボードです。
●レイアウト
今回はPressableButtonをベースに作成しています。
一般的なテンキーは1~9のキーが３×３のレイアウトで並んでいます。
[TenKey]という名前を付けた空オブジェクトを作成し、その中でPressableButtonを複製し９つにします。
[TenKey]オブジェクトに[TileGridObjectCollection]コンポーネントをアタッチします。
このコンポーネントは子オブジェクトのレイアウトを指定した設定に合わせて自動で行ってくれます。
[TileGridObjectCollection]コンポーネントの[Columns]の数値を[3]に変更します。
これで３つずつ並ぶレイアウトになります。
次に[Gutters]の値を0,0,0、[Leyout Direction]のx,yの値を0.5、-0.5に設定します。 これでテンキーとしてのキー同士のレイアウトが完了しました。
レイアウトが完了したらTenKeyオブジェクトから[TileGridObjectCollection]コンポーネントを削除します。
●アイコン
次に一つ一つのキーを設定していきます。
PressableButtonの名前をKey1~9に変更します。
ここからアイコンを変更していきます。 プロジェクトウィンドウで右クリックして[Create]>[MixedRealityToolKit]>[IconSet]を選択してアイコンセットを追加します。
これはMRTKで提供される機能でアイコンのためのプリセットになります。名前は[TenKey]と名付けました。
これを[Key1]と名付けたPressableButtonの[Button Config Helper]の[Icon]>[IconSet]に[TenKey]IconSetをセットします。
TenKeyIconSetにはまだ何も設定されていないため最初はエラーが出ています。
TenKeyIconSetの[Quad Icons]に画像を設定することでアイコンとして使用できるようになります。 この画像に関しては次回以降作り方を載せます。
TenKeyIconSetに画像が設定されることでPressableButtonの[Button Config Helper][Icon]>[IconSet]に設定した画像が表示されます。
Key1ボタンの場合１の画像を選択します。１の画像をクリックするだけでボタンのアイコンに適応されます。
同様の作業をすべてのキーに行います。
これでテンキーの基本的な見た目が完成しました。
次回以降機能を実装します。
