レイアウト例

この例では、Kanzi Engine APIを使用して連絡先リストを動的に作成する方法を示します。連絡先アイテムの構造を設定するレイアウトとプレハブは、Kanzi Studio プロジェクトで定義されています。このプロジェクトは、プレハブをインスタンス化するために Kanzi Engine APIを使用します。Visual Studioを使用して、例のアプリケーションをビルドして実行してください。

例の入手

例を入手するには、Kanzi Studio Quick Start ウィンドウで Examples をクリックします。Layout の例の横にある ダウンロード をクリックします。

Kanzi Studio は、例を <KanziWorkspace>/Examples/Layout ディレクトリにダウンロードします。

例の内容

Kanzi Studio プロジェクトで:

  • gridLayout ノードは、contact items を配置します。

    ../../_images/layout-gridlayout.png
  • contactCard プレハブは、各連絡先アイテムの構造を定義します。

    ../../_images/layout-contactcard.png

例を実行する

例を実行するには、

  1. Kanzi Studio で、File > Open Kanzi Command Prompt を選択します。

    Kanzi Command Prompt は、Kanzi 環境変数が設定された Windows コマンドプロンプトを開き、Kanzi のバージョンに対して Kanzi Command Prompt を開きます。

    Kanzi Command Prompt を使用して、絶対パスや環境変数を設定せずに、Gradle、SCons、CMake などの Kanzi ユーティリティおよびビルドツールにアクセスします。

    ../../_images/open-kanzi-command-prompt.png

    ヒント

    Kanzi Command Prompt は、Rightware ディレクトリの Windows スタートメニューで見つけることができます。

    Kanzi のバージョンが複数インストールされている場合は、そのコマンドプロンプトで作業したい Kanzi のバージョンに対応する Kanzi Command Prompt を起動するようにしてください。

  2. <KanziWorkspace>/Examples/Layout/Application ディレクトリ内の Kanzi Command Prompt で、サンプルアプリケーション用の Visual Studio ソリューションを生成するスクリプトを実行します。

    たとえば、Visual Studio 2019 を使用している場合は、次のコマンドを実行します。

    generate_cmake_vs2019_solution.bat
    

    このスクリプトは、ディレクトリ <KanziWorkspace>/Examples/Layout/Application/build_vs2019 内のアプリケーション用の Visual Studio ソリューションを生成します。

  3. Visual Studioで <KanziWorkspace>/Examples/Layout/Application/build_vs<Version>/Layout.sln Visual Studioソリューションを開きます。

  4. Visual Studio のソリューションエクスプローラーで Layout プロジェクトを右クリックし、Set as StartUp Project を選択します。

  5. 使用したいソリューション構成を選択し、アプリケーションを実行します。

    開発中は、Debug 構成を選択します。製品版を作成する準備ができたら、Release 構成を選択します。

    ../../_images/debug-configuration.png

関連項目

レイアウトコントロール (Layout control) ノード

Grid Layout ノードを使用する