ステップ 1 - アプリケーション画面をナビゲートする¶

このステップでは、アプリケーション画面のナビゲーションを作成する方法を学びます。ユーザーがタッチとキー入力の両方を使用してアプリケーション画面をナビゲートできるようにします。

チュートリアルを入手する¶

チュートリアルを入手するには、Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。UI navigation チュートリアルの横にあるダウンロードをクリックします。

Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。以下が含まれています。

<KanziWorkspace>/Tutorials/UI navigation/Start/Tool_project ディレクトリにあるチュートリアルの開始地点プロジェクト。
<KanziWorkspace>/Tutorials/UI navigation/Completed ディレクトリにある完成したチュートリアル。

このチュートリアルは、データソースチュートリアルのプラグインに依存しています。

データソースチュートリアルを入手するには、Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Data sources チュートリアルの横にあるダウンロードをクリックします。

Kanzi Studio は、チュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。

開始プロジェクトの内容¶

スタートポイントとなるプロジェクトには、このチュートリアルを完了するのに必要なコンテンツが含まれています。

MainScreen アクティビティプレハブには以下が含まれています：
- ナビゲーションボタンメニューを表示する NavigationBar トグルボタングループ。
  
  NavigationBar では、トグルボタンは NavigationButton プレハブのインスタンスです。NavigationButton プレハブは、トグル状態に基づいてトグルボタンの外観を設定するステートマネージャーを使用します。
  
  このチュートリアルでは、これらのトグルボタンを使用してアプリケーションの画面をアクティブにします。
- ApplicationScreens エクスクルーシブアクティビティホストは、それぞれがアプリケーション画面を表すアクティビティを含んでいます。
  - Home には温度スライダーが含まれています。
  - Media には、アルバム、プレイリスト、ラジオ局のリストが含まれています。
  - Maps は静的な画像を含んでいます。
  - Settings には設定メニューが含まれています。
  このチュートリアルでは、ユーザーがこれらの画面間を移動し、各画面のUI要素とタッチおよびキー入力を使用して対話できるようにする方法を学びます。
AlbumItem、PlaylistItem、RadioItem、および SettingsItem のプレハブは、さまざまなタイプのリスト内のアイテムのテンプレートです。
Media アクティビティプレハブでは、Albums、Playlists、および Radio は MediaList プレハブのインスタンスです。MediaList にはカスタマイズ可能なタイトルと、カスタマイズ可能なアイテムテンプレートとアイテムソースを表示する Grid List Box ノードが含まれています。Media アクティビティは、データソースからリストアイテムを取得します。
In the Settings Activity prefab, the list items in the SettingsMenu are instances of the SettingsItem prefab.
Library > State Managers > List State Manager は、フォーカス状態に基づいてノードの背景ブラシを設定します。

このチュートリアルのステップ2で、このステートマネージャーを使用します。

タッチ入力でアプリケーション画面をナビゲートする¶

このセクションでは、アプリケーション画面のタッチナビゲーションを作成します。ナビゲーションバーのボタンをクリックすることで、ユーザーがアプリケーション画面間を移動できるようにします。

タッチ入力でアプリケーション画面をナビゲートするには:

Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。UI navigation チュートリアルの横にある Open をクリックし、Start project を選択します。
どのアクティビティがアクティブであるかを制御するプロパティタイプを作成します。
1. Activity Browser で、ApplicationScreens エクスクルーシブアクティビティホストを右クリックし、Create Controller Property > Enum を選択します。
  
  エクスクルーシブアクティビティホストは、コントローラープロパティを使用して、そのエクスクルーシブアクティビティホスト内でどのアクティビティがアクティブであるかを設定および制御します。
2. プロパティを ApplicationScreens.ApplicationScreen と名付け、OK をクリックします。
Kanzi Studio:
1. Library > Property Types に ApplicationScreens エクスクルーシブアクティビティホスト内のアクティビティの名前と一致する列挙キーを持つ UInavigation.ActivityProperty.ApplicationScreens.ApplicationScreen プロパティタイプを作成します。
2. ApplicationScreens エクスクルーシブアクティビティホストで、UInavigation.ActivityProperty.ApplicationScreens.ApplicationScreen プロパティを追加し、そのプロパティに Controller Property プロパティを設定します。
Prefabs で、MainScreen > Dock Layout 2D > NavigationBar トグルボタングループを選択します。Properties で、+ Add Binding をクリックし、Binding Editor で設定します。
- Binding Mode から Two way へ
- Property から Toggle Button Group > Current Button Index
  
  Current Button Index プロパティを使用して、NavigationBar トグルボタングループでオンになっているトグルボタンのインデックスにアクセスします。
- Prefabs で、MainScreen > Dock Layout 2D > ApplicationScreens ノードを選択します。Properties から、UInavigation.ActivityProperty.ApplicationScreens.ApplicationScreen プロパティを Binding Editor にドラッグし、Source フィールドにドロップします。
  
  この方法で、Source を設定します。
```
{@../ApplicationScreens/UInavigation.ActivityProperty.ApplicationScreens.ApplicationScreen}
```
Save をクリックします。

このバインディングは、ApplicationScreens アクティビティホスト内のトグルオンされたメニューボタンとアクティブなアクティビティの間に双方向の接続を作成します。

ヒント

プロパティを右クリックして Create Binding を選択すると、そのプロパティのバインディングの作成を開始できます。

この方法では、プロパティが自動的に Binding Editor に追加されます。

次の操作を行うとき:

Preview でナビゲーションメニューボタンをクリックすると、Kanzi がそのアプリケーション画面のアクティビティをアクティブにします。
Activity Browser でアプリケーション画面のアクティビティをアクティブにすると、Kanzi が対応するナビゲーションメニューボタンを選択します。

../../_images/preview-ab-click-navigation.gif

アプリケーション起動時にフォーカスを設定する¶

このセクションでは、アプリケーションが開始されたときにキーのフォーカスを受け取るノードを設定します。

キー入力を受け取るには、ノードがフォーカス可能でなければなりません。フォーカス可能なノードは、Focusable プロパティが有効になっています。Slider や Button ノードのようなインタラクティブコントロールノードは、デフォルトで Focusable プロパティが有効になっています。

このチュートリアルプロジェクトでは、アプリケーション画面はアクティビティです。アクティビティノードはフォーカススコープであり、デフォルトでキーのフォーカスとキー入力を処理します。フォーカススコープはキーのナビゲーションを処理するのに役立ちます。キーのフォーカスがフォーカススコープノードに移動すると、そのフォーカススコープはフォーカスを最初のフォーカス可能な子ノードに転送します。

アプリケーションの起動時にキーのフォーカスを設定するには、以下のようにします。

Prefabs で、MainScreen > Dock Layout 2D > ApplicationScreens エクスクルーシブアクティビティホストを選択します。
Properties で、Focus On Activating Activity プロパティを追加し、Always に設定します。

この方法で、アプリケーションが起動したときにアクティブになる Home アクティビティにキーのフォーカスを設定します。

Home アクティビティがアクティブになると、Kanzi はそのアクティビティにフォーカスを移動します。Home アクティビティはフォーカスをその唯一のフォーカス可能なノードである Slider ノードに転送します。Slider ノードがキー入力を受け取るキーのフォーカスノードになります。

Preview ウィンドウを選択すると、ホーム画面のスライダーを使用してこれらのキーで温度を調整できます。

ノブを動かすには、↑ (Up) と ↓ (Down) を使用します。
スライダーのノブをレールの下部に移動するために Home
End をレールの上部にスライダーノブを移動します。

Slider ノードは、デフォルトでこれらのキーからの入力を処理します。

../../_images/preview-slider-key-input.gif

キー入力でアプリケーション画面をナビゲートする¶

このセクションでは、アプリケーション画面のためのキーナビゲーションを作成します。ユーザーが L キーと R キーを使用してアプリケーション画面間をナビゲートできるようにします。

キー入力でアプリケーション画面をナビゲートするには:

Prefabs で、Maps > Image ノードを選択します。Properties で、Focus > Focusable プロパティを追加します。

Maps アクティビティにはモックアップマップ画像が含まれています。そのアクティビティのキーナビゲーションを有効にするには、画像をフォーカス可能にします。

Media と Settings スクリーンには、デフォルトでフォーカス可能な Button ノードが含まれています。これにより、すべてのアプリケーションスクリーンでキー操作が有効になりました。
Prefabs で、MainScreen > Dock Layout 2D > ApplicationScreens エクスクルーシブアクティビティホストを選択します。Node Components で、Alt を押しながら右クリック Input Manipulators を行い、Navigation Manipulator を選択します。

Navigation Manipulator を使用して、ユーザーがアプリケーション内の異なる方向に移動するために使用できるキーを設定します。
Navigation Manipulator に追加して設定します。
- Left Navigation Key から L へ
- Right Navigation Key から R へ
この方法で、Navigation Manipulator を L および R のキー押下に応答するように設定します。
左へのナビゲーションを有効にする:
1. Node Components で、Alt を押しながら右クリック Triggers で Message Trigger > Key Navigation > Key Navigation Started を選択し、Left Navigation という名前を付けます。
  
  Key Navigation Started トリガーは、ユーザーが Navigation Manipulator で設定したナビゲーションキーのいずれかを押したときに発動します。
2. Left Navigation トリガーで、Conditions を右クリックし、Trigger Condition を選択し、条件を設定します:
  - A
    - Type of A から Message argument へ
    - Message Argument から Navigation Direction へ
  - Operation から = へ
  - B
    - Type of B から Fixed へ
    - Fixed Value から Left へ
  この条件により、Left Navigation トリガーは、ユーザーが L キーを押したときにのみ作動するように設定されます。これは、Navigation Manipulator で Left Navigation Key として設定されています。
3. Left Navigation トリガーで、Alt を押しながら右クリック Actions を行い、Dispatch Message Action > Exclusive Activity Host > Navigate To Previous Activity を選択します。
  
  このアクションにより、ApplicationScreens アクティビティホストを設定して、ApplicationScreens アクティビティホストの前のアクティビティをアクティブにします。
4. Navigate To Previous Activity アクションで、Loop Activity プロパティを有効に設定します。
  
  この方法で、ApplicationScreens アクティビティホストを設定し、最初のアクティビティがアクティブな間に Left Navigation トリガーが作動すると、その最後のアクティビティをアクティブにします。
右にナビゲートを有効にする:
1. Node Components > Triggers で Key Navigation > Key Navigation Started トリガーを作成し、Right Navigation という名前を付けます。
2. Left Navigation トリガーから、トリガー条件を Right Navigation トリガーにコピーします。条件内で、Fixed Value を Right に設定します。
  
  この条件では、Right Navigation トリガーを、ユーザーが R キーを押したときに作動するように設定します。これは、Navigation Manipulator で Right Navigation Key として設定します。
3. Right Navigation トリガーで、Alt を押しながら右クリック Actions を行い、Dispatch Message Action > Exclusive Activity Host > Navigate To Next Activity を選択します。アクションで、Loop Activity プロパティを有効に設定します。
  
  このアクションにより、ApplicationScreens アクティビティホストを設定して、ApplicationScreens アクティビティホストの次のアクティビティをアクティブにします。Loop Activity プロパティを有効にすることで、最後のアクティビティがアクティブな間に Right Navigation トリガーが発動すると、ApplicationScreens アクティビティホストが最初のアクティビティをアクティブにするように設定します。