ステップ2 - UI要素を制御する

このチュートリアルのこのステップでは、ウィジェットをクラスターUIに追加し、以下を学びます:

  • アクティビティノードを使用して、アプリケーションの状態に応じて異なるレイアウトで同じウィジェットを表示できる構造を作成する方法。

  • アクティビティホストノードでどのノードがアクティブであるかを制御するために、アクティビティコントローラープロパティを使用する方法。

ウィジェットの構造を作成する

このセクションでは、アクティビティを使用して、クラスターのモードに応じて異なるレイアウトで表示される同じウィジェットを表示できる構造を作成する方法を学びます。

  • Drive モードで最大化されたウィジェット

  • Browse モードで最小化されたウィジェット

ウィジェットの構造を作成するには、以下のようにします。

  1. Activity Browser の中で、GaugeViewActivityHost アクティビティホストにおいて：

    1. Activity を追加し、それとそのプレハブに LeftArea という名前を付けます。

      LeftArea アクティビティを使用して、メインゲージの左側にウィジェットを表示します。

      ../../_images/create-left-area.png

    2. LeftArea アクティビティで、MaximizedMinimizedSwitcher という名前の Exclusive Activity Host を作成します。

      このエクスクルーシブアクティビティホストを使用して、Drive モードで大きなウィジェットを表示するか、Browse モードで小さなウィジェットを表示します。

      エクスクルーシブアクティビティホストは、その子アクティビティのうち一度に1つだけをアクティブにすることができます。Activity Browser では、エクスクルーシブアクティビティホストはティール色です。

      ../../_images/create-maximizedminimizedswitcher.png
    ../../_images/ab-leftarea-w-switcher.png

  2. Activity Browser で、LeftArea アクティビティを選択し、サイドパネルで InitiallyActive プロパティを有効に設定します。

    この方法で、クラスター モードに関係なく、左エリアのウィジェットを常に表示するように設定します。

    ../../_images/ab-leftarea-initiallyactive.png

  3. Activity Browser で、ウィジェットが最大化されたときの構造を作成します。

    1. MaximizedMinimizedSwitcher アクティビティホストに、MaximizedLeft という名前のアクティビティを追加し、その中に MaximizedWidget という名前の Exclusive Activity Host を追加します。

      左側のエリアに一度に1つの最大化されたウィジェットのみを表示したい場合、Exclusive Activity Host を使用します。

      ../../_images/create-maximizedleft.png ../../_images/ab-maximizedleft.png

    2. Prefabs で、MaximizedLeft > MaximizedWidget ノードを選択し、プロパティで追加して設定します。

      • Horizontal Padding プロパティ Left プロパティフィールドを220に設定します。

      • Vertical Padding プロパティ Top プロパティフィールドを220に設定します。

      このチュートリアルの目的のために、これらのプロパティを使用してクラスター内の最大化されたウィジェットの絶対位置を設定します。実際のプロジェクトでは、そのようなUI要素を配置する最良の方法は、Kanzi レイアウトのいずれかを使用することです。

      ../../_images/prefabs-maximizedwidget1.png ../../_images/properties-maximizedwidget.png

    3. Activity Browser の MaximizedWidget アクティビティホストに、次のアクティビティを追加します。

      • WidgetBatteryMaximized

      • WidgetMusicMaximized

      • WidgetNavigationMaximized

      ../../_images/ab-maximizedwidget-activities.png

    4. Prefabs で、ドラッグします。

      • WidgetBatteryMaximizedImage を WidgetBatteryMaximized プレハブに

      • WidgetMusicMaximizedImage を WidgetMusicMaximized プレハブに

      • WidgetNavigationMaximizedImage を WidgetNavigationMaximized プレハブに

      ../../_images/prefabs-maximized-widgets.png

    ヒント

    ../../_images/ab-activate-manually.gif

  4. ウィジェットが最小化されたときの構造を作成します:

    1. MaximizedMinimizedSwitcher アクティビティホストに、MinimizedLeft という名前のアクティビティを追加し、その中に MinimizedWidget という名前の Exclusive Activity Host を追加します。

      左側のエリアに一度に1つの最小化されたウィジェットのみを表示したい場合、Exclusive Activity Host を使用します。

      ../../_images/create-minimizedleft.png ../../_images/ab-minimizedwidget.png

    2. Prefabs で、MinimizedLeft > MinimizedWidget ノードを選択し、プロパティで追加して設定します。

      • Horizontal Padding プロパティ Left プロパティフィールドを200に設定

      • Vertical Padding プロパティ Top プロパティフィールドを610に設定

      ../../_images/prefabs-minimizedwidget1.png ../../_images/properties-minimizedwidget.png

    3. Activity Browser の MinimizedWidget アクティビティホストに、次のアクティビティを追加します。

      • WidgetBatteryMinimized

      • WidgetMusicMinimized

      • WidgetNavigationMinimized

      ../../_images/ab-minimizedwidget-activities.png

    4. Prefabs で、ドラッグします。

      • WidgetBatteryMinimizedImage を WidgetBatteryMinimized プレハブに

      • WidgetMusicMinimizedImage を WidgetMusicMinimized プレハブに

      • WidgetNavigationMinimizedImage を WidgetNavigationMinimized プレハブに

      ../../_images/prefabs-minimized-widgets.png

ウィジェットを Preview で表示するには、アクティビティで有効にしたい Activity Browser の アクティベート をクリックします。

../../_images/widgets-preview.gif

コントローラープロパティでノードのアクティベーションを制御する

このセクションでは、アクティビティホスト内でどのノードがアクティブであるかを制御するために、アクティビティコントローラープロパティを使用する方法を学びます。

コントローラープロパティでノードのアクティベーションを制御するには:

  1. Activity Browser で、MaximizedMinimizedSwitcher アクティビティホストを選択し、Controller Property のサイドパネルで controller-source をクリックし、Property を選択して、Property を Activity.ActivityProperty.Cluster.MainView プロパティに設定します。

    この方法で、アクティビティホストがアクティビティをアクティブにする際に使用するプロパティを設定します。

    アクティビティノードは、そのアクティビティノードで設定したコントローラープロパティを持つ最も近い先祖ノードからコントローラープロパティの値を取得します。この場合、これは Cluster ノードです。

    ../../_images/ab-maximizedminimizedswitcher-controller-source.png ../../_images/ab-select-controller-property.png

    ヒント

    コントローラープロパティを設定すると、Activity Browser はそのコントローラープロパティの値をアクティビティホスト内の子アクティビティの ControllerValue プロパティに割り当てます。アクティビティノードでは、アクティビティホストがそのアクティビティをアクティブにすると、ControllerValue プロパティの値が設定されます。

    コントローラープロパティの値オプションの数と子アクティビティの数が一致しない場合、各子アクティビティで ControllerValue プロパティの値を手動で設定する必要があります。

    ../../_images/ab-controllervalue-drive.png ../../_images/ab-controllervalue-browse.png

  2. Library > Property Types > Activity > ActivityProperty Alt を押しながら右クリック で、Property Type を選択し、New Property Type ウィンドウで設定します。

    • Name から Activity.ActivityProperty.LeftWidget へ

    • Category から Controller Properties へ

    • Data Type から Enumeration へ

    • Enumeration Options へ:

      Key

      Value

      Battery

      0

      Music

      1

      Navigation

      2

    このアクティビティコントローラープロパティを使用して、MaximizedWidget および MinimizedWidget アクティビティホストでどのアクティビティがアクティブであるかを制御します。

    ../../_images/leftwidget-controller-property.png ../../_images/library-property-leftwidget.png

  3. Node Tree で、Cluster ノードを選択し、Properties で Controller Properties > Activity.ActivityProperty.LeftWidget プロパティを追加します。

    アクティビティノードは、そのアクティビティノードで設定したコントローラープロパティを持つ最も近い先祖ノードからコントローラープロパティの値を取得します。この場合、これは Cluster ノードです。

    アクティビティホストにコントローラープロパティを追加した後、サイドパネルの Activity Browser でそのプロパティの値を設定できます。

    ../../_images/node-tree-root-pah.png ../../_images/properties-controller-property-leftwidget.png

  4. Activity Browser で、MaximizedWidget アクティビティホストを選択し、サイドパネルで controller-source をクリックし、Property を Activity.ActivityProperty.LeftWidget プロパティに設定します。

    この方法で、MaximizedWidget エクスクルーシブアクティビティホストを設定し、Activity.ActivityProperty.LeftWidget プロパティを使用して、クラスターが Drive モードのときにウィジェットを表示します。

    ../../_images/ab-minimizedwidget-controller-source.png ../../_images/ab-minimizedwidget-select-controller-property.png

    Activity Browser は、そのコントローラープロパティからの値を、そのアクティビティホスト内の子アクティビティの ControllerValue プロパティに割り当てます。

    ../../_images/ab-controllervalue-battery.png ../../_images/ab-controllervalue-music.png ../../_images/ab-controllervalue-navigation.png

  5. 前のステップを MinimizedWidget エクスクルーシブアクティビティホストに対して繰り返します。

    この方法で、Browse モードと同じウィジェットを Drive モードで表示するようにクラスターを設定しますが、最小化バージョンになります。

    ヒント

    Activity Browser でどのアクティビティホストがコントローラープロパティの値を設定しているかを確認するには、Exclusive Activity Host を選択し、サイドパネルで show-controller-property をクリックします。

    ../../_images/ab-show-controller-property1.png ../../_images/ab-show-controller-property-canvas.png

  6. ウィジェットアクティビティのアクティベーションを制御するUI要素を作成します。

    1. Prefabs で、LeftSideMenu トグルボタングループプレハブを Header プレハブにドラッグします。

      LeftSideMenu トグルボタングループには、ウィジェットアクティビティのアクティベーションを制御するために使用できるトグルボタンが含まれています。

      ../../_images/leftsidemenu-to-header.gif

    2. Prefabs で、LeftSideMenu プレハブを選択します。Properties で、+ Add Binding をクリックし、Binding Editor で設定します。

      • Binding Mode から Two way へ

      • Property から Current Button Index へ

      • Expression へ

      {#Cluster/Activity.ActivityProperty.LeftWidget}

      Save をクリックします。

      このバインディングにより、LeftSideMenu トグルボタングループ内のトグルボタンは、Cluster アクティビティホストの Activity.ActivityProperty.LeftWidget プロパティの値を取得および設定できます。この方法で、トグルボタンは MaximizedWidget および MinimizedWidget アクティビティホスト内のアクティビティの状態を制御します。

      ../../_images/leftsidemenu-binding.png

これで、左側にアクティブなウィジェットを次の方法で制御できます。

  • Preview で、LeftSideMenu トグルボタングループのトグルボタンをクリックします。

  • Activity Browser で、Cluster アクティビティホストを選択し、サイドパネルで LeftWidget プロパティの値を変更します。

../../_images/ab-left-area.gif

前のステップ

次の作業

このチュートリアルでは、Kanzi Activity システムを操作する基本を学びました。このチュートリアルのこのステップ全体を繰り返して、クラスタUIの右側エリアにウィジェットの構造を作成することができます。構造を作成するためのいくつかの有用なヒントを以下に示します。

  • 構造を整理するために、アイテムがクラスターUIの右側で使用されていることを示す名前を使用してください。

    たとえば、名前:

    • 右側の RightArea のトップレベルアクティビティ

    • アクティビティコントローラープロパティ RightWidget

  • MaximizedWidget と MinimizedWidget でウィジェットのアクティビティを作成する際、左側のエリアでアクティビティ用に作成したのと同じプレハブを使用してください。アクティビティを作成する際、ドロップダウンメニューを使用して既存のプレハブを選択できます。

  • ウィジェットの位置を設定する:

    • MaximizedRight > MaximizedWidget ノードで、追加して設定します。

      • Horizontal Padding プロパティ Left プロパティフィールドを1450に設定します。

      • Vertical Padding プロパティ Top プロパティフィールドを220に設定します。

    • MinimizedRight > MinimizedWidget ノードで、追加して設定します。

      • Horizontal Padding プロパティ Left プロパティフィールドを1340に設定します。

      • Vertical Padding プロパティ Top プロパティフィールドを610に設定

  • RightSideMenu プレハブで、Expression を次のように設定します:

    {#Cluster/Activity.ActivityProperty.RightWidget}

完成したチュートリアルプロジェクトには、左側と右側の両方のエリアに対するアクティビティ構造があります。完成した Kanzi Studio プロジェクトは、<KanziWorkspace>/Tutorials/Activity/Completed ディレクトリにあります。

../../_images/cluster-left-right-widgets.png

Kanzi アクティビティシステムの使い方を学び続けるには、次を完了してください。

関連項目

アクティビティシステムについて詳しく学ぶには、アクティビティ を参照してください。

Kanzi レイアウトについて詳しく知るには、レイアウトコントロール (Layout control) ノード を参照してください。

Toggle Button Group について詳しく知るには、Toggle Button Group ノードを使用する をご覧ください。