メインコンテンツへスキップ
見出し画像

【Resonite】コンテキストメニューの追加方法〜応用編〜【雑解説】

    はじめに

     この記事では、コンテキストメニューの応用的な使い方を備忘録として残します。コンテキストメニューの作成方法などの基本的なことについては以下の記事を参考にしてください。
     今回の記事で作るものは、サンプルをユニポケで配布しています。記事最下部のリンクから見に行ってみてください。

    ①複数の階層を持つコンテキストメニューの作り方

    コンテキストメニューが増えすぎると細くなって選びにくくなるので、メニューを階層化できると便利です。カテゴリや用途別に分けてもいいかもしれません。

    1.コンテキストメニューを用意する

    画像
    今回サンプルとして使う「基本のコンテキストメニュー」はユニポケで配布中

    2.下の階層用のスロットを追加する

    画像

    3.既にあるコンテキストメニューのスロットに、ContextMenuSubmenuコンポーネントを追加する

    画像
    RadiantUI/ContextMenu
    画像
    ContextMenuSubmenu
    画像
    追加後

    4.ContextMenuSubmenuのItemsRootに、追加したいコンテキストメニューの親スロットを設定する

    画像
    今回はContextMenu - Childに新しい階層を作る予定なのでContextMenuスロットを設定

    5.2で追加したスロットにContextMenuItemSaurceコンポーネントを追加する

    画像
    RadiantUI/ContextMenu/ContextMenuItemSource
    画像
    追加したところ

    6.新しい階層にメニューが増えているはずなので確認する

    画像
    ContextMenuをクリックすると、新しい階層が追加されているはず

    おまけ1.メニューの簡単な増やし方

    画像
    追加したスロットをコピーすると……
    画像
    メニューも増えてる

    おまけ2.更に深く・・・

    画像
    ContextMenuSubmenuを追加して、スロットを設定
    画像
    追加したい階層のスロットを作成
    画像
    追加したスロットにContextMenuItemSaurceコンポーネントを追加
    画像
    動作確認の様子

    ②前の階層に戻るメニューの作り方

    メニューを階層化したときに途中で選び間違えてしまうと、また最初から選ぶことになってしまいます。そんなときに戻るメニューがあると、とても便利です。

    1.階層化されたコンテキストメニューを用意する

    画像
    SubMenu01 - 01から1つ前の階層へ戻したい

    2.戻るメニューを追加するスロットを作成する

    画像

    3.ContextMenuItemSaurceとContextMenuSubmenuを追加する

    画像

    4.ContextMenuSubmenuのItemsRootに戻りたい階層の親スロットを設定する

    画像

    5.動作確認する

    画像

    ③コンテキストメニューの色や画像を切り替える

    コンテキストメニューの色や画像を切替えるときに便利なコンポーネント”ValueOptionDescriptionDriver”を紹介します。

    今回は、サンプルとして押したら色が切り替わる機能を追加します。

    1.ValueOptionDescriptionDriverを追加する

      CommonUI/Driversの中にあります。
      <>内の型は切り替えのトリガーとなる値と同じ型を選んでください。

    画像

    2.設定する

    今回は色を変えたいので、ContextMenuItemSaurceのColorをValueOptionDescriptionDriverのColorに設定します。

    画像

     トリガーとなる値に対応する値を設定します。今回は、トリガーがBoolなので、Trueのときに緑、Falseのときに赤になるように設定しました。

    画像
    設定後

    3.動作確認

    画像
    ヨシ!

    今回のサンプルはユニポケで配布中!

    サブメニューを追加したもの

    更に階層を追加したもの

    戻るボタンを追加したもの

    ValueOptionDescriptionDriverを追加したもの


     
     
    Resonite で遊んでます

    あなたへのおすすめ