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

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

  1. キー入力のフォーカスがあるリストアイテム。

  2. キーがフォーカスされているアイテムを含むリスト。

最後に、Media 画面のリストに対してキーナビゲーションを作成します。

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

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

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

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

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

    リストアイテム間でキーのフォーカスを移動することはできますが、キーのフォーカスがどこにあるかはまだ確認できません。

    ../../_images/preview-media.png

  2. Prefabs で、AlbumItem プレハブを選択します。State Tools で、Create State Manager をクリックします。

    Kanzi Studio はステートマネージャーを作成し、それを AlbumItem プレハブに割り当てます。

    ../../_images/prefabs-album-item.png ../../_images/state-tools-create-album-item-state-manager.png

  3. Create State を2回クリックして2つのステートを作成し、それらに NotFocused と Focused という名前を付けます。

    ../../_images/state-tools-focused-states.png

  4. <No Controller Property> をクリックし、Focus > Focused プロパティを選択します。

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

    ../../_images/state-tools-select-focused-controller-property.png

  5. Focused ステートで、Focused コントローラープロパティの値を True に設定します。

    このステートを使用して、キーのフォーカスノードの外観を定義します。

    ../../_images/state-tools-focused-true.png

  6. Focused ステートでノードの外観を定義します。

    1. Prefabs で、AlbumItem > Background > Label ノードを選択します。

      ../../_images/prefabs-album-item-label.png

    2. Properties に追加して設定します。

      • Foreground Brush から Blue Brush へ

      • Font Weight から Normal へ

      ../../_images/properties-label-focused.png

    3. Focused ステートの State Tools で、これらのプロパティの値をそのステートに保存するには、Set をクリックします。

      ../../_images/state-tools-set-focused-state.png

  7. State Tools で、Any -> Any を右クリックし、Delete を選択します。

    デフォルトのトランジションを削除して、ステートマネージャーが NotFocused と Focused の状態間を即座に移動するようにします。

    ../../_images/state-tools-delete-transition.png

  8. Edit State Manager をクリックして、ステートツールを非アクティブ化します。

    ../../_images/state-tools-deactivate1.png

  9. Library > State Managers で、AlbumItem State Manager を List Item State Manager に名前を変更します。

    ../../_images/library-album-item-state-manager.png ../../_images/library-list-item-state-manager.png

  10. Prefabs で、PlaylistItem、RadioItem、および SettingsItem のプレハブを選択します。Properties で、Resources > State Manager プロパティを追加し、それを List Item State Manager に設定します。

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

    ../../_images/prefabs-radio-playlist-setting-item.png ../../_images/properties-multiple-list-item-state-manager.png

Preview ウィンドウを選択すると、リスト内のアイテムをブラウズするために、これらのデフォルトのキーボードキーを使用できます。

  • Tab は、キーのフォーカスを次のフォーカス可能なアイテムに移動します。

  • Shift Tab は、キーのフォーカスを前のフォーカス可能なアイテムに移動します。

  • ↑ (Up) と ↓ (Down) でアイテムをスクロールします。

  • Home と End は最初と最後のアイテムに移動します。

  • Page Up と Page Down をリストの表示領域の先頭と末尾に移動します。

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

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

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

  • 他のすべてのアイテムのラベルはグレーで、フォントの太さはライトを使用します。

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

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

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

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

  1. Prefabs で、次のプレハブを選択します。

    • AlbumItem

    • PlaylistItem

    • RadioItem

    • SettingsItem

    これらのプレハブは Button ノードです。Button ノードや Slider ノードのようなインタラクティビティ制御ノードは、デフォルトでヒットテスト可能でフォーカス可能です。つまり、デフォルトでキーのフォーカスと押下を受け取ることができます。

    ../../_images/prefabs-list-item-prefabs-selected.png

  2. Properties で、Focus > Focus On Press プロパティを追加し、それを Node に設定します。

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

    ../../_images/properties-focus-on-press.png

    ヒント

    ノードは、親から 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: フォーカススコープ内のノードは、キー入力を受け取るキーのフォーカスノードです。

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

  1. Prefabs で、アルファチャンネルを含む画像でアルファチャンネルを色チャンネルにプリマルチプライ処理する場合は

    • MediaList プレハブ。

      Media アクティビティプレハブでは、Albums、Playlists、および Radio は MediaList プレハブのインスタンスです。

    • Settings > SettingsFrame ノード。

    これらのノードは、Content Layout 2D ノードであり、Horizontal Padding および Vertical Padding プロパティが設定されて、子ノードの周囲に境界線を作成します。この境界線は表示されません。なぜなら、MediaList および SettingsFrame ノードには背景ブラシがないからです。

    ../../_images/prefabs-media-list-settings-frame.png ../../_images/properties-media-list-settings-frame.png

  2. 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 カラーブラシに。

    ../../_images/properties-focus-group-state-manager.png

Preview でリストのアイテムをクリックすると、そのリストに青い枠が付きます。

../../_images/preview-focus-state.gif

次の作業

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

次に行えること：

関連項目

Kanzi ステートマネージャーについて詳しく知るには、ステートマネージャー (State Manager) を参照してください。

Content Layout ノードについて詳しく知るには、Content Layout ノードを使用する を参照してください。

フォーカスについて詳しく知るには、フォーカス と フォーカスの使用 を参照してください。