ステップ2 - フォーカスを視覚化する¶

このステップでは、次の外観を変更することによって、アプリケーションリストの主要な焦点を視覚化します。

キー入力のフォーカスがあるリストアイテム。
キーがフォーカスされているアイテムを含むリスト。

フォーカスされたノードの外観を設定する¶

このセクションでは、フォーカスされたリスト項目の外観を変更することによって、アプリケーションリスト内のフォーカスを視覚化します。

フォーカスされたノードの外観を設定するには:

Preview で、Media 画面に移動します。

Media 画面には Grid List Box ノードが含まれており、デフォルトでフォーカススコープです。これは、キーのフォーカスが List Box ノードに移動すると、そのノードがフォーカスを最初のフォーカス可能な子ノードに転送することを意味します。これらの List Box ノードでは、各リストアイテムが Button であり、Button ノードはデフォルトでフォーカス可能です。

リストアイテム間でキーのフォーカスを移動することはできますが、キーのフォーカスがどこにあるかはまだ確認できません。
Prefabs で、AlbumItem プレハブを選択します。State Tools で、Create State Manager をクリックします。

Kanzi Studio はステートマネージャーを作成し、それを AlbumItem プレハブに割り当てます。
Create State を2回クリックして2つのステートを作成し、それらに NotFocused と Focused という名前を付けます。
<No Controller Property> をクリックし、Focus > Focused プロパティを選択します。

読み取り専用の Focused プロパティは、ノードがキー入力のフォーカスノードであるかどうかを示します。キー入力のフォーカスノードは、現在キー入力を受け取るノードです。Kanzi アプリケーションは、一度に1つのキー入力のフォーカスノードしか持つことができません。
Focused ステートで、Focused コントローラープロパティの値を True に設定します。

このステートを使用して、キーのフォーカスノードの外観を定義します。
Focused ステートでノードの外観を定義します。
1. Prefabs で、AlbumItem > Background > Label ノードを選択します。
2. Properties に追加して設定します。
  - Foreground Brush から Blue Brush へ
  - Font Weight から Normal へ
3. Focused ステートの State Tools で、これらのプロパティの値をそのステートに保存するには、Set をクリックします。
State Tools で、Any -> Any を右クリックし、Delete を選択します。

デフォルトのトランジションを削除して、ステートマネージャーが NotFocused と Focused の状態間を即座に移動するようにします。
Edit State Manager をクリックして、ステートツールを非アクティブ化します。

これで Preview では、フォーカスされたアルバムアイテムが青色になり、通常のフォントウェイトを使用します。
Library > State Managers で、AlbumItem State Manager を List Item State Manager に名前を変更します。
Prefabs で、PlaylistItem、RadioItem、および SettingsItem のプレハブを選択します。Properties で、Resources > State Manager プロパティを追加し、それを List Item State Manager に設定します。

この方法で、アプリケーション内のすべてのリストを設定し、List Item State Manager を使用してキーがフォーカスされているアイテムの外観を変更します。

Preview ウィンドウを選択すると、以下のデフォルトのキーボードキーを使用してリスト内でキーフォーカスを移動できます。

↓ (下) で次のフォーカス可能なアイテムへ
↑ (上) で前のフォーカス可能なアイテムへ
Home と End で最初と最後のアイテムへ
Page Up と Page Down でリストの表示領域の先頭と末尾へ

List Box ノードでは、デフォルトでキーフォーカスとアイテムの選択が同期されています。キーフォーカスがリストアイテムに移動すると、Kanzi がそのリストアイテムを選択済みに設定します。

今、リストアイテム間でキーのフォーカスを移動するとき:

キー入力を受け取るアイテムのラベルは青色になり、通常のフォントウェイトを使用します。
他のすべてのアイテムのラベルはグレーで、フォントの太さはライトを使用します。

Media 画面では、以下のデフォルトのキーボードキーを使用してリスト間でキーフォーカスを移動できます。

Tab で右へ、フォーカスチェーン内の次のリストへ
Shift Tab で左へ、フォーカスチェーン内の前のリストへ

ヒント

このチュートリアルステップでは、デフォルトのキーボードキーを使用してリスト間でキーフォーカスを移動します。キーフォーカスの移動に別のキーを設定するには:

Media プレハブで Navigation Manipulator を作成し、Left Navigation Key と Right Navigation Key を使用するキーに設定します。
左右のナビゲーション用に Key Navigation Started トリガーとコンディションを作成します。フォーカスを移動するには、Focus: Move Scope Focus Backward アクションと Focus: Move Scope Focus Forward アクションを使用します。

このチュートリアルプロジェクトでは、各リストアイテムのプレハブに Button: Click トリガーがあり、Write Log アクションでログにメッセージを出力します。Button ノードがキーのフォーカスを持っているとき、Enter または Space キーを使用してそのボタンを押すことができます。これにより、Button: Click トリガーが発動します。例えば、アルバムリストの3番目のアイテムがキーのフォーカスを持っているときに Enter キーを押すと、Kanzi が Log ウィンドウに Play album "Float" と出力されます。

../../_images/preview-visualize-key-focus.gif

ユーザーが押したリストアイテムにキーのフォーカスを設定します。¶

ユーザーが押したリストアイテムにキーのフォーカスを設定するには:

Prefabs で、次のプレハブを選択します。
- AlbumItem
- PlaylistItem
- RadioItem
- SettingsItem
これらのプレハブは Button ノードです。Button ノードや Slider ノードのようなインタラクティビティ制御ノードは、デフォルトでヒットテスト可能でフォーカス可能です。つまり、デフォルトでキーのフォーカスと押下を受け取ることができます。
Properties で、Focus > Focus On Press プロパティを追加し、それを Node に設定します。

この方法で、アプリケーション内のどこからでもキーのフォーカスをユーザーが押したリストアイテムに移動します。

ヒント

ノードは、親から Focus On Press プロパティの値を継承します。例えば、アプリケーション画面内のすべてのインタラクティブノードが押下時にフォーカスを受け取るように設定するには、そのアプリケーション画面のルートノードに Focus On Press プロパティを設定するだけで十分です。

今、リストアイテムをクリックすると、そのアイテムがキー入力のフォーカスを取得します。

../../_images/preview-focus-on-press.gif

リストがキーのフォーカスを含むときに表示する¶

このセクションでは、Media および Settings 画面のリストを設定し、キーのフォーカスを持つアイテムを含むかどうかに基づいて外観を変更します。これを行うには、このチュートリアルのスタートポイントプロジェクトに付属している List State Manager を使用します。

List State Manager は、そのコントローラープロパティとして Focus State プロパティを使用します。これは、フォーカススコープ内のノードまたはノードのフォーカス状態を示します。

フォーカススコープの場合、Focus State プロパティの値は次の意味を持ちます。

No Focus: フォーカススコープ内のノードのいずれもフォーカスを持っていません。
Logical Focus: フォーカススコープ内のノードは、そのスコープが属するオーバーレイの論理フォーカスノードです。デフォルトで、Kanzi アプリケーションには1つのオーバーレイ、Screen ノードがあります。
Key Focus: フォーカススコープ内のノードは、キー入力を受け取るキーのフォーカスノードです。

リストがキーのフォーカスを含むことを示すには、

Prefabs で、アルファチャンネルを含む画像でアルファチャンネルを色チャンネルにプリマルチプライ処理する場合は
- MediaList プレハブ。
  
  Media アクティビティプレハブでは、Albums、Playlists、および Radio は MediaList プレハブのインスタンスです。
- Settings > SettingsFrame ノード。
これらのノードは、Content Layout 2D ノードであり、Horizontal Padding および Vertical Padding プロパティが設定されて、子ノードの周囲に境界線を作成します。この境界線は表示されません。なぜなら、MediaList および SettingsFrame ノードには背景ブラシがないからです。
Properties に追加して設定します。
- Focus Scope > Focus Scope Type から Group へ
  
  ノードをフォーカススコープにすることで、Focus State プロパティを使用して、子孫ノードがキーのフォーカスノードであるかどうかを確認できます。
- Resources > State Manager から List State Manager へ
  
  List State Manager はノードの Background Brush プロパティを設定します。
  - KeyFocus ステートでは、Blue Brush カラーブラシに。
  - NoFocus と LogicalFocus の状態では、White Brush カラーブラシに。
これで、キーフォーカスを含むリストに青い枠線が表示されます。

リストにフォーカスを設定するには、次のいずれかを行います。
- Tab キーと Shift Tab キーを使用してフォーカスを移動します。
- そのリスト内のアイテムをクリックします。
Prefabs で、Media アクティビティプレハブを選択します。Properties で、Focus Scope > Cyclic Focus Navigation プロパティを追加して有効にします。

この方法:
- Tab キーで前方に移動し、フォーカスが最後のリストに到達すると、フォーカスは最初のリストに移動します。
- Shift Tab キーを押して後方に移動し、フォーカスが最初のリストに到達すると、フォーカスは最後のリストに戻ります。

../../_images/preview-navigate-lists.gif

前のステップ

次の作業¶

このチュートリアルでは、アプリケーションのUIナビゲーションを作成する方法を学びました。

次に行えること：

Kanzi 入力マニピュレータを使用して、地図上でパン、ズーム、回転、位置のリセット、ピンのドロップを有効にする方法を学びます。チュートリアル: パン、ズーム、タップを参照してください。
ナビゲーションバー内のボタンを並べ替えるために、ドラッグアンドドロップマニピュレータの使用方法を学びます。チュートリアル: ドラッグアンドドロップを参照してください。
Grid List Box を使用して連絡先リストを作成する方法を学びます。チュートリアル: Grid List Box を使用して連絡先リストを作成するを参照してください。
Kanzi Studio プロジェクトでXMLデータソースを定義し、そのデータソースからデータを使用して Kanzi アプリケーションにデータを提供する方法を学びます。チュートリアル: データソースからアプリケーションデータを取得するを参照してください。