Toggle Button Group ノードを使用する¶

ユーザーに相互に排他的な複数の選択肢の中から1つだけを選択させるようにするには、Toggle Button Group ノードを使用します。

トグルボタングループ内の各トグルボタンの動作はラジオボタンと似ています。つまり、一度に 1 つのトグルボタンのみをアクティブにできます。

Toggle Button Group 3D を使用して3D空間で3Dトグルボタンをグループ化し、Toggle Button Group 2D を使用して2D空間で2Dトグルボタンをグループ化します。

トグルボタングループは、Toggle Button ノードを含むことができ、その状態を管理するノードですが、視覚的な形状は提供しません。

Toggle Button Group 内の Toggle Button ノードがフォーカスを持っているとき、デフォルトで、テンキーの Space、Enter、および Enter キーからのクリック入力を受け取ります。

トグルボタングループを作成する¶

トグルボタングループを作成するには:

Node Tree または Prefabs Alt を押しながら右クリックで、Toggle Button Group を作成したいノードを選択し、Toggle Button Group 2D または Toggle Button Group 3D のいずれかを選択します。

3Dノードは、Scene ノードのような3Dノード内でのみ作成でき、2Dノードは2Dノード内でのみ作成できます。
Toggle Button Group で、Toggle Button Group ノード内の Toggle Button ノードを配置するレイアウトを作成します。

例えば、Toggle Button Group 2D を作成した場合、Stack Layout 2D ノードを作成し、Toggle Button Group 3D を作成した場合は、Stack Layout 3D ノードを作成します。Stack Layout ノードを使用するを参照してください。
レイアウト内で Toggle Button ノードを作成します。

例えば、Stack Layout 2D ノードを使用して2Dトグルボタングループを作成した場合、Prefabs で Toggle Button 2D プレハブを作成し、そのプレハブの複数のインスタンスを Stack Layout 2D ノードに追加します。Toggle Button ノードを使用するを参照してください。
（オプション） Toggle Button Group ノード内の Toggle Button ノードのインデックスを手動で設定するには、各 Toggle Button で Index in Group プロパティの値を異なる値に設定します。

Kanzi は Index in Group プロパティを使用して、どの Toggle Button ノードが Toggle Button Group ノードに属しているかを追跡します。

Toggle Button ノードを作成すると、その Index in Group プロパティの値は -1 であり、これは Toggle Button を意味します。
- 最も近い先祖の Toggle Button Group ノードに属します。
  
  Toggle Button ノードから Index in Group プロパティを削除すると、その Toggle Button は Toggle Button Group に属しません。
- 同じ Toggle Button Group ノード内の Toggle Button ノードの中での位置に基づいてグループインデックスを取得します。Toggle Button Group 内の最初の Toggle Button はインデックス0を取得し、2番目はインデックス1を取得し、以下同様です。
ヒント

Toggle Button Group > Current Button Index プロパティを使用して、Toggle Button Group ノードでトグルオンされている Toggle Button ノードのインデックスにアクセスします。

Current Button Index プロパティをバインディングで更新するには、ソースへのバインディングまたは双方向バインディングを使用します。トグルボタングループ内のトグルボタンのトグル状態が変化すると、Kanzi は内部的にこのプロパティを対象とする一方向バインディングを上書きします。バインディング (Bindings) を参照してください。

例えば、アプリケーションのナビゲーションバーを作成して、ユーザーがアプリケーションの画面を切り替えられるようにすることができます。Toggle Button Group でアクティビティをアクティブ化するを参照してください。
（オプション）アプリケーションが開始されたときに Toggle Button Group ノード内の Toggle Button ノードの1つをトグルオンに設定するには、Toggle Button Group ノードを選択し、Properties で Current Button Index プロパティを追加し、トグルオンにしたい Toggle Button ノードのインデックスに設定します。

例えば、Toggle Button ノードのインデックスを手動で設定していない場合、アプリケーションが開始したときに Toggle Button Group の最初の Toggle Button をトグルオンにするには、Current Button Index プロパティを 0 に設定します。

Preview で Toggle Button Group ノード内の Toggle Button ノードをクリックすると、Toggle Button Group ノードが Toggle Button ノードの状態を切り替えます。

Toggle Button Group 内の任意の Toggle Button が切り替えられたときに反応する¶

ユーザーが Toggle Button Group 内の任意の Toggle Button の状態を切り替えたときにトリガーを設定できます。ユーザーが Toggle Button Group 内の特定の Toggle Button を切り替えたときにどのように反応するかを学ぶには、トグルの変更に反応するを参照してください。

Toggle Button Group 内の任意の Toggle Button がトグルされたときに反応するには：

Toggle Button Group にトリガーを追加したい場合、ユーザーがその Toggle Button Group 内の任意の Toggle Button の状態を切り替えたときに Kanzi が発動します。トグルボタングループを作成するを参照してください。
Node Components Alt を押しながら右クリック Triggers で、Message Trigger > Toggle Button Group > Toggled を選択します。
Node Components > Triggers Alt を押しながら右クリックで Toggle Button Group: Toggled トリガーを設定し、Toggle Button Group 内の任意の Toggle Button のトグル状態が変化したときに実行したいアクションを選択します。

例えば、Write Log アクションを選択し、トリガーが発動されたときに Log ウィンドウに書き込みたいメッセージを Log Text に設定します。Write Log アクションは、ノードが入力を受け取ったことを確認したい場合に便利です。

Toggle Button Group のいずれかのボタンのトグル状態を変更すると、Kanzi は Log ウィンドウに、Log Text プロパティの値として設定したメッセージを出力します。

Log ウィンドウを開くには、メインメニューで Window > Log を選択します。

Toggle Button Group でアクティビティをアクティブ化する¶

Toggle Button ノードを Toggle Button Group で使用して、アクティビティホスト内のアクティビティをアクティブ化できます。例えば、アプリケーションのナビゲーションバーを作成して、ユーザーがアプリケーション画面を切り替えられるようにすることができます。

Toggle Button Group を使用してアクティビティをアクティブ化するには：

Controller Property でアクティベーション状態を制御する複数のアクティビティを持つアクティビティホストを作成します。

例えば、異なるアプリケーション画面を表示する Activities を持つ Exclusive Activity Host を作成し、どのアクティビティがアクティブであるかを制御するために Controller Property を使用します。排他的アクティビティホストの使用を参照してください。
前のステップで作成した各アクティビティに対して、Toggle Button ノードを持つ Toggle Button Group を作成します。トグルボタングループを作成するを参照してください。

Toggle Button Group で、アクティビティを制御するために使用する列挙オプションと同じ順序で Toggle Button ノードを並べます。
Toggle Button Group を選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
- Binding Mode から Two way へ
- Property から Current Button Index へ
  
  Toggle Button Group でトグルオンされている Toggle Button のインデックスにアクセスするために、Current Button Index プロパティを使用します。
- そのアクティビティホストでどの Activity がアクティブであるかを制御する Activity Host のコントローラープロパティに Source を設定します。
Save をクリックします。

このバインディングを使用すると、トグルボタングループでオンにされたトグルボタンと、アクティビティホストでアクティブなアクティビティの間に双方向の接続を作成します。

アクティビティをアクティブにすると、Kanzi が対応する Toggle Button をオンにし、Toggle Button をオンにすると、Kanzi が対応するアクティビティをアクティブにします。

Toggle Button Group 2D ノードの外観を設定する¶

2D ノードの外観を設定するには:

2Dノードを単色、テクスチャ、またはマテリアルで塗りつぶすことができます。2Dノードの外観の調整を参照してください。
2Dノードにポストプロセッシングエフェクトを適用できます。2Dノードのエフェクトを参照してください。
2Dノードを3つの軸すべてで回転させて、3Dのパースペクティブ効果を作成できます。2Dノードに3Dパースペクティブ効果を作成するを参照してください。
2Dノードにカスタムレンダリングを適用して、ポストプロセッシングエフェクトを作成できます。2Dノードにカスタムレンダリングを適用するを参照してください。
2Dノードをピクセルパーフェクトとしてレンダリングできます。ピクセルパーフェクトな2Dノードのレンダリングを参照してください。

APIで Toggle Button Group 3D ノードを使用する¶

Toggle Button Group 3D ノードを3つの Toggle Button ノードで作成するには、

// Create a Toggle Button Group 3D named Toggle button group and add it to the scene.
ToggleButtonGroup3DSharedPtr toggleButtonGroup3D = ToggleButtonGroup3D::create(domain, "Toggle button group");
scene->addChild(toggleButtonGroup3D);
// Create a Stack Layout 3D named Stack layout and add it to the Toggle button group.
// This stack layout is used only for arranging the items in the Toggle button group.
StackLayout3DSharedPtr stackLayout3D = StackLayout3D::create(domain, "Stack layout");
toggleButtonGroup3D->addChild(stackLayout3D);

// Create three Toggle Button nodes and add them to the Stack Layout node.
ToggleButton3DSharedPtr buttons[3];

for (auto i = 0u; i < 3; ++i)
{
    buttons[i] = ToggleButton3D::create(domain, "Toggle button");
    // Set the Button Group Index property to -1, which makes the Toggle Button to register itself to the
    // Toggle Button Group and tells to the Toggle Button Group node to set the index of the Toggle Button node.
    buttons[i]->setIndexInGroup(-1);
    stackLayout3D->addChild(buttons[i]);
}

// Initially all Toggle Buttons in the Toggle Button Group are toggled off.
optional<size_t> currentButtonIndex = toggleButtonGroup3D->getCurrentButtonIndex();
if (!currentButtonIndex)
{
    std::cout << "No toggled Toggle Button in the Toggle Button Group." << endl;
}

// Toggle on the second Toggle Button in the Toggle Button Group.
buttons[1]->setToggleState(1);

// Print the index of the toggled Toggle Button to show that the second Toggle Button is toggled on.
optional<size_t> currentButtonIndexAfterToggle = toggleButtonGroup3D->getCurrentButtonIndex();
std::cout << (currentButtonIndexAfterToggle ? *currentButtonIndexAfterToggle : -1) << endl;

詳細については、ToggleButtonGroup3D クラスを参照してください。

APIで Toggle Button Group 2D ノードを使用する¶

Toggle Button Group 2D ノードを3つの Toggle Button ノードで作成するには、

// Create a Toggle Button Group 2D named Toggle button group and add it to the scene.
ToggleButtonGroup2DSharedPtr toggleButtonGroup2D = ToggleButtonGroup2D::create(domain, "Toggle button group");
viewportNode->addChild(toggleButtonGroup2D);
// Create a Stack Layout 2D named Stack layout and add it to the Toggle button group.
// This stack layout is used only for arranging the items in the Toggle button group.
StackLayout2DSharedPtr stackLayout2D = StackLayout2D::create(domain, "Stack layout");
toggleButtonGroup2D->addChild(stackLayout2D);

// Create three Toggle Button nodes and add them to the Stack Layout node.
ToggleButton2DSharedPtr buttons[3];

for (auto i = 0u; i < 3; ++i)
{
    buttons[i] = ToggleButton2D::create(domain, "toggle button");
    // Set the Button Group Index property to -1, which makes the Toggle Button to register itself to the
    // Toggle Button Group and tells to the Toggle Button Group node to set the index of the Toggle Button node.
    buttons[i]->setIndexInGroup(-1);
    stackLayout2D->addChild(buttons[i]);
}

// Initially all Toggle Buttons in the Toggle Button Group are toggled off.
optional<size_t> currentButtonIndex = toggleButtonGroup2D->getCurrentButtonIndex();
if (!currentButtonIndex)
{
    std::cout << "No toggled Toggle Button in the Toggle Button Group." << endl;
}

// Toggle on the third Toggle Button in the Toggle Button Group.
buttons[2]->setToggleState(1);

// Print the index of the toggled Toggle Button to show that the third Toggle Button is toggled on.
optional<size_t> currentButtonIndexAfterToggle = toggleButtonGroup2D->getCurrentButtonIndex();
std::cout << (currentButtonIndexAfterToggle ? *currentButtonIndexAfterToggle : -1) << endl;

詳細については、ToggleButtonGroup2D クラスを参照してください。

Toggle Button Group プロパティタイプとメッセージ¶

Toggle Button Group ノードの利用可能なプロパティタイプとメッセージのリストについては、Toggle Button Group 2D と Toggle Button Group 3D を参照してください。