ステップ3 - ユーザーインターフェース構造を作成する

このステップでは、Kanzi アプリケーションのユーザーインターフェイス構造を作成し、既製のコンテンツをアプリケーションに追加する方法を学習します。

ユーザーインターフェイス構造を作成する

Activity ノードと Activity Host ノードを使用して、アプリケーション内のさまざまなスクリーンやユーザーインターフェイスの各部分を作成します。これらのノードには、アプリケーションの一部、さらにはアプリケーション全体をアプリケーション内に含めることができます。

Activity Browser を使用して、アクティビティとアクティビティホストを作成および検査し、アクティビティのアクティベーションをシミュレートします。Activity Browser は、アプリケーション内のアクティビティのすべての可能なUI状態を表示します。

Activity Browser ウィンドウは Preview ウィンドウの下にあります。

ユーザーインターフェイス構造を作成するには、以下のようにします。

  1. Activity Browser で create-root をクリックし、Create Root Parallel Activity Host 2D を選択します。

    Kanzi Studio は、Node Tree の Screen ノードの下に Parallel Activity Host ノードを作成します。Activity Browser では、Parallel Activity Hostsは紫色です。

    Activity Host は、その子アクティビティがアクティブになる条件を定義します。Parallel Activity Host は、複数の子アクティビティを同時にアクティブにすることができます。この機能により、アプリケーションのトップレベルノードに最も適したタイプのアクティビティホストとなることがよくあります。

    ../../_images/activity-browser-create-root-parallel-activity-host.png ../../_images/activity-browser-root-parallel-activity-host.png

  2. Activity Browser ウィンドウで、Root Parallel Activity Host の下にある add-button をクリックし、Create Exclusive Activity Host を選択して、Activity Host に Application Screens という名前を付けます。

    この Exclusive Activity Host を使用して、アプリケーションのスクリーンを表示します。

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

    ../../_images/activity-browser-application-screens.png

  3. Activity Browser ウィンドウで、Application Screens の下にある add-button をクリックし、Create Activity を選択して、Activity とそのプレハブに Home という名前を付けます。

    ../../_images/activity-browser-create-activity1.png ../../_images/create-activity-home.png

    Activity Browser には、Activity Host ノードと Activity ノードの関係が表示されます。Prefabs ウィンドウには、これらの Activity がアクティブなときにインスタンス化できるプレハブが表示されます。

    ../../_images/activity-browser-home-activity.png ../../_images/prefabs-home-activity.png

  4. 前のステップを繰り返して、Settings と Media のアクティビティを作成します。

    ../../_images/activity-browser-home-car-media.png

    ヒント

    Activity Browser ウィンドウでパンおよびズームするには：

    アクション

    ショートカット

    パン

    • マウスの中央ボタンをクリックしてドラッグします。

    • Space キーを押し、左マウスボタンをクリックしてドラッグします。

    ズーム

    • マウスホイールを回します。

    • Shift キーと Alt キーを押し、左マウスボタンをクリックしてドラッグします。

アクティビティにコンテンツを追加する

Kanzi Studio には、アプリケーションに追加できる2Dおよび3Dアセットが付属しています。このファクトリーコンテンツは、アイデアを示すためのアセット作成に時間を費やすことなくプロトタイプを作成するのに最適です。

アクティビティにコンテンツを追加するには、次の手順に従います。

  1. Asset Packages ウィンドウで、Factory Content アセットソースを選択します。

    Asset Packages ウィンドウは Preview ウィンドウの下にあります。

    ../../_images/asset-packages-factory-content-selected.png

  2. Settings アクティビティにコンテンツを追加します。

    1. Asset Packages ウィンドウから Car アセットを Prefabs ウィンドウにドラッグします。

      Prefabs ウィンドウにコンテンツをドロップすると、Kanzi Studio はそのコンテンツをプレハブとしてプロジェクトに追加します。

      ../../_images/select-car-asset.png ../../_images/prefabs-carscene.png

    2. Prefabs で、Car プレハブをドラッグして Settings プレハブにドロップします。

      これにより、Settings アクティビティプレハブ内に Car プレハブがインスタンス化されます。

      ../../_images/prefabs-car-carscene.png

  3. 前のステップを繰り返します。ただし、Cover Flow アセットをプロジェクトに追加し、それを Media アクティビティに追加します。

    ../../_images/factory-content-coverflow.png ../../_images/prefabs-media-cover-flow.png

  4. Node Tree から RootNode を Prefabs にドラッグし、Home アクティビティプレハブにドロップします。

    これにより、コンテンツがノードツリーから Home アクティビティプレハブに移動し、Home アクティビティがアクティブなときにそのコンテンツが表示されます。

    ../../_images/drag-rootnode-from-node-tree.gif

  5. Prefabs ウィンドウで Image ノードを選択し、Ctrl H キーを押して Image ノードを表示します。

    ../../_images/project-image-show.png

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

    この方法で、アクティビティホストがアクティブなときにアクティビティをアクティブに設定します。これを示すために、Activity Browser はそのようなすべてのアクティビティに対して initially-active アイコンを表示します。

    ../../_images/activity-browser-home-initiallyactive.png

Activity Browser は、アプリケーション内のアクティビティのアクティベーションをシミュレートします。Preview でアクティビティのコンテンツを表示するには、Activity Browser でアクティビティをアクティベートできます。アクティベートしたいアクティビティで、アクティベート をクリックします。

Activity Browser では、アクティブなアクティビティは activity-active でマークされ、その境界線は青色です。

Kanzi はデフォルトで、Activity ノード間に即時のトランジションを使用します。ただし、独自のトランジションを追加して定義することもできます。

このチュートリアルの次のステップでは、Activity ノード間を移動するためのボタンを作成します。

../../_images/getting-started-step-3-mid.gif

コンテンツをインポートする

このセクションでは、他のツールで作成したコンテンツを Kanzi Studio プロジェクトにインポートし、そのコンテンツを Kanzi アプリケーションで使用する方法を学習します。

プロジェクトにコンテンツをインポートすると、Kanzi Studio はインポートされたコンテンツをプロジェクトディレクトリにコピーし、必要に応じて Library ウィンドウにそのコンテンツからプロジェクトで使用できる Kanzi リソースを作成します。例えば、PNG 画像をインポートすると、Kanzi Studio は Single Texture リソースを作成し、その画像をプロジェクトで使用できるようにします。

プロジェクト内のコンテンツは、以下の場所でインポートおよび表示できます。

  • Preview ウィンドウの下にある Assets ウィンドウ

  • メインメニューで File > Import を選択し、インポートするコンテンツのタイプを選択する

../../_images/file-import.png

コンテンツをインポートするには、以下のようにします。

  1. Assets ウィンドウで Import Assets をクリックし、インポートするコンテンツを選択して、Open をクリックします。

    例えば、<KanziWorkspace>/Tutorials/Getting started/Assets に移動し、すべてのコンテンツをインポートします。

    Kanzi Studio はインポートされたコンテンツをプロジェクトディレクトリにコピーします。このコンテンツには、Library ウィンドウの Resource Files でアクセスできます。また、Kanzi Studio は Library ウィンドウでそのコンテンツから Kanzi リソースを作成し、インポートしたコンテンツをプロジェクトで使用できるようにします。

    ../../_images/assets-import-assets1.png ../../_images/library-textures1.png ../../_images/library-resource-files.png

  2. Activity Browser ウィンドウで Home アクティビティをアクティブにして、そのアクティビティを Preview に表示します。

    ../../_images/activity-browser-preview-home.png

  3. Prefabs ウィンドウで、Home > RootNode > Image ノードを選択します。Properties ウィンドウで、Image プロパティを Road テクスチャに設定します。

    ../../_images/prefabs-home-image.png ../../_images/properties-image-road.png

  4. Properties ウィンドウで、次のプロパティを追加して設定します。

    • Horizontal Alignment から Stretch へ

    • Vertical Alignment から Stretch へ

    • Content Stretch から Uniform to fill へ

      Content Stretch プロパティを使用して、このノードのサイズを変更せずにノード内のコンテンツをどのようにストレッチするかを設定します。

    ../../_images/properties-image-content-stretch.png

Activity Browser でアクティビティをアクティブにすると、Preview には現在アクティブなアクティビティのコンテンツが表示されます。

../../_images/getting-started-step-3.gif

前のステップ 次のステップ

関連項目

Kanzi Studio ファクトリーコンテンツの詳細については、Factory Content アセット を参照してください。

Kanzi Studio にアセットをインポートする方法について詳しくは、インポートしています をご覧ください。