ステップ 3 - 画面間を移動する¶

このステップでは、まず RootNode ノードにヘッダーとフッターを作成し、次に前のステップで作成した Activity ノード間を移動するボタンを作成します。

ヘッダーとフッターを作成する¶

このセクションでは、アプリケーションのヘッダーとフッターを作成します。

ヘッダーとフッターを作成するには、以下のようにします。

Node Tree で RootNode ノードを Alt を押しながら右クリックし、Empty Node 2D ノードを 2 つ作成します。ノードに Header と Footer という名前を付けます。

これらのノードを使用して、アプリケーション全体で使用するヘッダーとフッターのための背景と構造を設定します。
Node Tree で Header ノードを選択します。Properties で以下を行います。
- Layout Height プロパティの隣にあるをクリックし、60 に設定します。
  
  特定のノードタイプで頻繁に使用されるプロパティには、Properties でのマークが付きます。をクリックすると、Kanzi Studio はそのプロパティをノードに追加します。
- Background Brush の隣にあるをクリックして、Header ノードにプロパティを追加します。
  1. Background Brush プロパティで + Color Brush を選択します。
    
    2D ノードの背景を設定するにはブラシを使用します。Kanzi では、すべての 2D ノードにデフォルトで透明な背景が設定されています。
    
    Kanzi では、これらのブラシが利用可能です。
    - Color Brush を使用して、2D ノードを単色で塗りつぶします。
    - Texture Brush を使用して、2Dノードにテクスチャを貼ります。
    - 2Dノードをマテリアルで塗りつぶすには、Material Brush を使用します。
  2. Background Brush プロパティの隣にあるをクリックし、Header と Footer の背景に使用する色を設定します。
Properties ウィンドウから Layout Height プロパティと Background Brush プロパティを Node Tree ウィンドウにドラッグし、Footer ノードにドロップします。

この方法で、同じプロパティを Footer ノードに追加して適用します。
Node Tree で Footer ノードを選択します。Properties で Vertical Alignment プロパティを追加し、Bottom に設定します。

Kanzi は、プロパティを別の値に設定するまで、そのプロパティのデフォルト値を使用します。Vertical Alignment プロパティのデフォルト値は Top です。そのため、Footer ノードの Vertical Alignment プロパティの値を Bottom に設定するまで、Header ノードと Footer ノードはどちらも親ノードである RootNode ノードの上端に配置されます。
Node Tree で Header ノードを Alt を押しながら右クリックし、Stack Layout 2D を選択します。Assets から、すべての Icon 画像を Stack Layout 2D ノードにドラッグします。

レイアウトノードを使用すると、アプリケーションのスクリーンや他のノードを基準にしてノードを配置できます。レイアウトは、Alignment プロパティ、Margin プロパティ、Layout Size プロパティで構成されており、特定のノードに対して、または特定のレイアウトコンテナが子ノードに課す一般的なルールとして定義できます。

アイテムを隣り合わせに配置するには、Stack Layout ノードを使用します。
アイコン間にマージンを追加します。
1. Node Tree の Stack Layout 2D ノードで、すべての Icon Image ノードを選択します。Properties の右下隅にあるをクリックして、Add Properties ウィンドウを開きます。
2. Add Properties ウィンドウの左側の列で、Horizontal Margin プロパティをダブルクリックし、Node Tree で選択したノードにそのプロパティを追加します。
  
  Add Properties ウィンドウが開いたときの左側の列には、Node Tree ウィンドウで選択したノードに追加できるプロパティが表示されます。
  
  プロパティを素早く見つけるには、Add Properties ウィンドウの検索ボックスにプロパティ名の数文字を入力します。
3. Node Tree ですべての Icon Image ノードを選択した状態で、Horizontal Margin プロパティの Right プロパティフィールドの値を 10 に設定します。
  
  この方法で、ノードの右側に 10 ピクセルのマージンを設定できます。
Node Tree で Stack Layout 2D ノードを選択します。Preview で Node tool を選択し、Align tool の中央の四角をクリックします。

この方法で、Stack Layout 2D を Header ノードの中央に配置します。

ヒント

Align tool を使用して、Horizontal Alignment および Vertical Alignment プロパティを設定します。

ナビゲーションボタンのためのプレハブを作成する¶

プレハブ (あらかじめ作成されたテンプレート) を使用して、アプリケーションを構造化し、一貫性のあるインターフェイスを作成します。プレハブを利用してアプリケーションの構成要素を作成し、アプリケーションのメンテナンスを容易にすることができます。

このセクションでは、トグルボタンのプレハブを作成します。このプレハブは、アプリケーションの Activity ノード間を移動するためのコントロールとして Footer ノードで使用します。

ナビゲーションボタン用のプレハブを作成するには、以下のようにします。

Prefabs ウィンドウの右下隅にあるをクリックし、Toggle Button 2D プレハブを作成して、Toggle Button 2D で以下を行います。
1. Stack Layout 2D ノードを作成します。
2. Assets から Stack Layout 2D ノードに Menu 画像をドラッグします。
3. Stack Layout 2D ノードに Text Block 2D ノードを作成します。
Prefabs で Toggle Button 2D プレハブをダブルクリックし、そのプレハブのみを Preview の別のタブで開きます。

プレハブを Preview で開くと、Kanzi Studio がメインメニューの下にタブとして表示されます。プレハブを使用するコンテキストの影響を受けずにプレハブを表示および調整したい場合は、Preview でプレハブを開いてください。
Prefabs で Toggle Button 2D > Stack Layout 2D > Text Block 2D ノードを選択します。Properties で、Text プロパティの隣にあるをクリックします。

この方法で、プレハブインスタンスごとにテキストを設定できるようになります。

ノードプレハブは、それぞれが独自のプロパティを持つノードのツリーを含むことができます。プロジェクト内でプレハブまたはそのインスタンスのいずれかのノードを編集すると、そのプレハブのすべてのインスタンスでそれらのノードが変更されます。プレハブのプロパティ値をオーバーライドすることで、プレハブの各インスタンスに独自のプロパティ値を持たせることができます。例えば、住所録エントリのプレハブを作成する際には、各住所録エントリに異なる名前、番号、写真を表示したいと考えます。

をクリックすると、Kanzi Studio は次の処理を行います。
1. そのプロパティからカスタムプロパティタイプを作成します。
2. カスタムプロパティタイプをプレハブのルートノードに追加します。
3. プレハブのルートノードにあるプロパティへの ##Template バインディングを作成します。
このようにして、プレハブインスタンスのルートに、Text Block 2D ノードに表示させたいテキストを設定できます。
Text Block 2D を選択した状態で、Preview で Node tool を使用し、Align tool の中央の四角をクリックして、Text Block 2D を Stack Layout 2D ノードの中央に揃えます。
メインメニューの Screen タブをクリックして、Preview でアプリケーション全体を表示します。
Node Tree の Footer ノードで次の操作を行います。
1. Toggle Button Group 2D ノードを作成します。
  
  ユーザーに相互に排他的な複数の選択肢の中から1つだけを選択させるようにするには、Toggle Button Group ノードを使用します。
  
  トグルボタングループ内の各トグルボタンの動作はラジオボタンと似ています。つまり、一度に 1 つのトグルボタンのみをアクティブにできます。
2. Toggle Button Group 2D ノード内に Stack Layout 2D ノードを作成します。
3. Prefabs から Toggle Button 2D プレハブを Node Tree に 3 回ドラッグし、Footer > Toggle Button Group 2D > Stack Layout 2D ノードにドロップします。
  
  プレハブを Prefabs から Node Tree 内の任意のノードにドラッグすると、Kanzi Studio はそのプレハブのインスタンスを、プレハブをドロップしたノードツリーに作成します。
4. Node Tree で各 Toggle Button 2D プレハブインスタンスを選択し、F2 を押して、それぞれ Navigation、Car、Media という名前を付けます。
5. 各 Toggle Button 2D プレハブインスタンスを選択し、Properties で FirstApplication.ToggleButton2D.Text プロパティの値を Navigation、Car、および Media に追加して設定します。
Footer > Toggle Button Group 2D > Stack Layout 2D ノード内の各 Toggle Button 2D プレハブインスタンスに対して：
1. Node Components で Alt を押しながら右クリック Triggers を選択し、Message Trigger > Toggle Button > Toggled On を選択してそのトリガーを追加します。
  
  トリガーとアクションを使用してインタラクションを作成します。トリガーを使用して、プロパティを特定の値に設定したり、アプリケーションの状態を設定したりするアクションを開始します。
2. Node Components で、作成したトリガー内で Alt を押しながら右クリック Actions を選択し、Dispatch Message Action > Activity Host > Activate Activity を選択します。
3. Activity Host: Activate Activity アクションで次のように設定します。
  - Target Item を、アクティビティを保持する Exclusive Activity Host 2D に設定
  - Activity Activation Path を、ボタンで移動させたい Activity に設定
  例えば、Car トグルボタンでは、Car Settings アクティビティに移動するようにアクションを設定します。
4. Preview で、をクリックして Interact モードに入ります。
  
  Interact モードでは、デバイスを操作するときと同じように Preview ウィンドウでアプリケーションを操作できます。