レイアウト¶
Kanzi には、3 種類のレイアウトがあります。
|
子ノードの位置とサイズに基づくレイアウトには、Flow Layout、Grid Layout、Stack Layout、および Trajectory Layout ノードがあります。例えば、これらのレイアウトは、コンテンツの量が動的に変化する場合に便利です。 |
|
コンテンツコントロール。特定のコンテンツは、通常、中央に配置します。Image ノードや Button ノードなど。 |
|
絶対位置に基づいたレイアウト。子ノードをグループ化するコンテナとして機能します。Viewport 2D ノードや Empty Node 2D ノードなどがあります。 |
レイアウトノードを使用して、アプリケーション画面や他のノードに対するノードの位置を決定できます。レイアウトは、プロパティの配置、マージン、レイアウトサイズで構成され、特定のノードに対して定義することも、特定のレイアウトコンテナによって子ノードに課される一般的なルールとして定義することもできます。
レイアウトコントロール (Layout control) ノード を参照してください。
ユニバーサルレイアウトプロパティ¶
Kanzi アプリケーション内のアイテムを配置するには、次の変換タイプを使用できます。
レイアウト変換では、レイアウトパスの適用前にアイテムを変換します。
レンダー変換では、レイアウトパス適用後、アイテムをレンダリングする前に、アイテムを変換します。
Kanzi は、レイアウト変換を適用した後にレンダー変換を適用し、レイアウト計算には影響を与えません。例えば、これによりレイアウト内のノードをアニメーション化しても、レイアウトの再計算を引き起こさないようにすることができます。
レイアウト制御ノード、例えば Stack Layout ノードや Grid Layout ノードは、すべての直下の子ノードに対して独自の変換を適用します。これらの子ノードは、それぞれの子ノード、レイアウト変換、マージン、アライメントを考慮して独自のレイアウトを定義します。
配置はレイアウトの重力を定義します。例えば、Horizontal Alignment プロパティを Right に設定すると、ノードが親レイアウトの右側に揃います。配置プロパティを Stretch に設定すると、ノードは親レイアウトの寸法に合わせて伸びます。レイアウトがそのコンテンツをどのように処理するかを指定するには、Content Stretch プロパティを使用します。
マージンは、親レイアウトの境界に対するオブジェクトの間隔を強制します。例えば、Horizontal Margin プロパティを設定して、ノードの左側と右側の親レイアウトに対する間隔を設定します。
レイアウトプロパティはノードのバウンディングボックスサイズをオーバーライドします。デフォルトのレイアウトサイズは、バウンディングボックスとマージンに基づいてノードのサイズによって定義されます。
例えば、x軸方向に設定された Stack Layout ノードは、その寸法（バウンディングボックス）に基づいて2つの子ノードを隣接して配置します。Layout Width プロパティを使用することで、バウンディングボックスの幅を上書きすることができます。ノードのサイズより小さい値を設定するとノードが重なり、ノードのサイズより大きい値を設定すると2つのノード間のスペースが広がります。
すべてのレイアウトタスクが完了した後、Kanzi は親ノードからの最終的な変換を適用します。Screen ノードの下の RootPage は、Viewport 2D または Empty Node 2D の場合、レイアウトに特別なルールがあります。レイアウトプロパティで定義されていない限り、定義された画面サイズを継承します。