チュートリアル: 動的レイアウトを使用したアプリケーションの作成¶
このチュートリアルでは、デバイスの画面解像度の変化に対応するユーザーインターフェースの作成方法を学びます。動的レイアウトを持つユーザーインターフェースは、デバイスやその画面解像度に関係なく、見栄えが良く使いやすいです。
このビデオはチュートリアルの結果を示しています。
このチュートリアルは、Kanzi Studio を扱う基本を理解していることを前提としています。Kanzi Studio に慣れるための最適なエントリーポイントは次のとおりです。
チュートリアルを入手する¶
チュートリアルを入手するには、Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Dynamic layout チュートリアルの横にある 
をクリックします。
Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。以下が含まれています。
<KanziWorkspace>/Tutorials/Dynamic layout/Startディレクトリにあるチュートリアルの開始地点プロジェクト。<KanziWorkspace>/Tutorials/Dynamic layout/Completedディレクトリにある完成したチュートリアル。
開始プロジェクトの内容¶
デバイスの画面の向きや解像度の変化に対応する動的レイアウトを持つユーザーインターフェース。Grid Layout ノードは動的レイアウトの基盤を形成します。Kanzi アプリケーションレイアウトを動的にするには、画面解像度の変化に対応させたいすべてのコンテンツを Grid Layout ノード内に配置する必要があります。その後、Grid Layout ノードを設定して、コンテンツを希望する方法で配置および分配します。
スタートポイントとなるプロジェクトには、このチュートリアルを完了するのに必要な2つの Grid Layout 2D ノードが含まれています。
Player ノードは、メディアプレーヤーアプリケーション（白い背景のコンテンツ）の位置とサイズを設定します。このノードには、3つの列が含まれています。
最初と3番目の列は、Proportional に値 1 が設定されており、互いにおよび全体の Player Grid Layout ノードのサイズに対して同じ比率になるようにしています。これらの列には、現在再生中の曲の経過時間と残り時間が含まれています。
中央の列は Automatic に設定されているため、Kanzi はその列のノードのサイズに基づいてサイズを設定します。この列には、曲の情報とプレーヤーコントロールが含まれています。
Controls ノードは、曲のタイトル、アーティスト、アルバム名、およびプレーヤーのコントロールの位置を設定します。ノードの列と行は、Proportional に 1 の値で設定されており、それらのサイズが互いに、そして全体の Controls Grid Layout 2D ノードのサイズと同じ比率になるようにしています。
ユーザーインターフェースのレイアウトを動的にする¶
このセクションでは、ユーザーインターフェースのレイアウト（Player および Controls Grid Layout 2D ノード）をデバイスの画面の向きと解像度の変化に対応させます。
このプロジェクトでは、RootNode がデバイスの画面全体を占めます。RootNode ノードのサイズはデバイスの解像度に応じて変わるため、ユーザーインターフェイス内のノードのサイズを設定する際は、その高さと幅を基準として使用します。
ユーザーインターフェースのレイアウトをレスポンシブにするには、
Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Dynamic layout チュートリアルの横にある Open をクリックし、Start project を選択します。
（オプション） Preview で
をクリックして Analyze モードに入り、
を右クリックし、Debug objects と Grid cells を選択します。これにより、Grid Layout 2D ノードの列と行を視覚化できます。
Player ノードのサイズを設定します。
Node Tree で Player ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
Property から Layout Height へ
Expression へ
clamp(400, 1200, {@../Node.ActualHeight} - 300)
Save をクリックします。
Player Grid Layout 2D ノードは、メディアプレーヤーアプリケーション (白い背景のコンテンツ) の位置とサイズを設定します。このバインディングは、RootNode ノードの高さに基づいてこのノードの高さを設定します。Player ノードの高さを制約するために、クランプ (Clamp) バインディング関数を使用します。制約の範囲は次のとおりです。
RootNode ノードの高さより 300 ピクセル少ない
Player ノードの Vertical Alignment プロパティが Center に設定されているため、上下に150ピクセルのマージンが作成されます。
常に400ピクセルから1200ピクセルの間
Properties で + Add Binding をクリックし、Binding Editor で設定します。
Property から Layout Width へ
Expression へ
clamp(500, {@../Node.ActualWidth}, {@../Node.ActualWidth} - 300)
Save をクリックします。
このバインディングは、RootNode ノードの幅に基づいて Player Grid Layout 2D ノードの幅を設定します。Player ノードの幅を制約するために、クランプ (Clamp) バインディング関数を使用します。制約の範囲は次のとおりです。
RootNode ノードの幅より 300 ピクセル少ない
Player ノードの Horizontal Alignment プロパティが Center に設定されているため、左右に150ピクセルのマージンが作成されます。
常に少なくとも500ピクセル
Controls ノードのサイズを設定します。
Node Tree で Controls ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
Property から Layout Height へ
Expression へ
{@../Node.Height}
Save をクリックします。
Controls Grid Layout 2D ノードは、曲のタイトル、アーティスト、アルバム名、およびプレーヤーのコントロールの位置とサイズを設定します。このバインディングは、Controls ノードの高さを Player ノードの高さと同じに設定します。
ヒント
プロパティを右クリックして Create Binding を選択すると、そのプロパティのバインディングの作成を開始できます。
この方法では、プロパティが自動的に Binding Editor に追加されます。
Properties で + Add Binding をクリックし、Binding Editor で設定します。
Property から Layout Width へ
Expression へ
clamp(500, 1300, {@../Node.Width} - 300)
Save をクリックします。
このバインディングは、Player ノードの幅に基づいて Controls Grid Layout 2D ノードの幅を設定します。Controls ノードの幅を制約するために、クランプ (Clamp) バインディング関数を使用します。
Player ノードの幅より300ピクセル少ない
Controls ノードの Horizontal Alignment プロパティが Center に設定されているため、左と右に150ピクセルのマージンが作成されます。
常に500ピクセルから1300ピクセルの間
ユーザーインターフェースのコンテンツをレスポンシブにする¶
このセクションでは、Controls Grid Layout 2D ノードのコンテンツをデバイスの画面の向きと解像度の変化に応じて反応させます。これにより、ユーザーインターフェースのコントロールが画面解像度の変化に応じて変わります。
ユーザーインターフェースのコンテンツをレスポンシブにするには、
Song list ノードのサイズを設定します。
Node Tree で Song list ノードを選択し、Properties で + Add Binding をクリックし、Binding Editor で設定します。
Property から Layout Height へ
Expression へ
clamp(10, 60, {@../Node.Height} / 20)
Save をクリックします。
Song list Image ノードは、プレイヤーコントロールの最も左にあるコントロールです。このバインディングは、Controls ノードの高さに基づいて Song list ノードの高さを設定します。クランプ (Clamp) バインディング関数を使用して、Song list ノードの高さを制約します。
Controls ノードの高さの5パーセント
常に10ピクセルから60ピクセルの間
前の手順を Song list ノードの Layout Width プロパティに対して繰り返し、このバインディング式を使用してください:
clamp(10, 60, {@../Node.Width} / 20)Save をクリックします。
このバインディングの結果は前のステップのバインディングと同じですが、Song list ノードの Layout Width を設定します。
Song list ノードで作成した同じバインディングを、Controls ノード内の他の Image ノードに適用します。
ヒント
複数のノードに同じバインディングを作成するには、Node Tree でそれらのノードを選択し、Properties で + Add Binding をクリックするか、プロパティを右クリックして Create Binding を選択します。
Node Tree で Song list ノードを選択し、Properties で Bindings を右クリックして、Copy を選択します。
Node Tree で Back ノードを選択し、Shift キーを押して More ノードをクリックします。
Properties で Bindings を右クリックし、Paste Binding(s) を選択します。これにより、コピーしたバインディングをすべての選択されたノードに追加して適用します。
Play ノードのサイズを設定します。
Node Tree で Play ノードを選択し、Properties で Layout Height バインディングをクリックし、Binding Editor で Expression を設定します。
clamp(50, 120, {@../../../Node.ActualHeight} / 5)Save をクリックします。
このバインディングは、RootNode ノードの高さに基づいて Play Image ノードの高さを設定します。このバインディングにより、Play ノードのサイズは Controls ノード内の他のノードとは異なる変わり方をします。
前のステップを Play ノードの Layout Width プロパティに対して繰り返し、このバインディング式を使用します:
clamp(50, 120, {@../../../Node.ActualWidth} / 5)Save をクリックします。
Kanzi Studio で File > Export > Export as KZB Player for Windows を選択し、
<ProjectName>/Application Playerディレクトリ内のアプリケーションの.exeファイルを開きます。アプリケーションウィンドウのサイズを調整すると、デバイス画面の解像度の変化をシミュレートします。プロジェクトで作成したバインディングに応じて、ユーザーインターフェースのサイズがどのように変化するかに注目してください。
次の作業¶
このチュートリアルでは、デバイスの画面解像度の変化に応じてサイズが変わるユーザーインターフェースの作成方法を学びました。このプロジェクトには、デバイスの画面解像度の変化に関係なくテキストが同じままの Text Block ノードが含まれています。このチュートリアルで学んだアプローチを使用して、Text Block ノードのテキストサイズをデバイスの画面解像度の変化に応じて変化させることができます。
また、以下も行えます。
カスタムプロパティを使ってゲージポインタの位置を制御する方法を学習する。チュートリアル: ゲージを作成する を参照してください。
プロパティで制御するクラスターインジケーターの作成方法を学びます。チュートリアル: クラスターインジケーターを作成する を参照してください。
関連項目¶
Grid Layout ノードの動作について詳しく知るには、Grid Layout ノードを使用する を参照してください。
バインディングの使用方法について詳しくは、バインディングの使用 および バインディング式リファレンス を参照してください。