教程：制作具有动态布局的应用程序¶

在本教程中，您将学习如何创建会随设备屏幕分辨率的变化而作出响应的用户界面。具有动态布局的用户界面无论在何种设备及其屏幕分辨率下都能看起来不错且易于使用。

视频显示教程的结果。

本教程假定您了解使用 Kanzi Studio 的基础知识。熟悉 Kanzi Studio 的最佳入门点是：

获取教程¶

要获取本教程，请在 Kanzi Studio Quick Start 窗口中点击 Examples。在 Dynamic layout 教程旁边，点击。

Kanzi Studio 会将教程下载到 <KanziWorkspace>/Tutorials 目录。您可以找到：

位于 <KanziWorkspace>/Tutorials/Dynamic layout/Start 目录中的教程起点工程。
位于 <KanziWorkspace>/Tutorials/Dynamic layout/Completed 目录中的已完成教程。

起始项目的内容¶

具有动态布局的用户界面可以响应设备屏幕方向和分辨率的变化。Grid Layout 节点构成动态布局的基础。要使您的 Kanzi 应用程序布局动态化，您必须将所有希望响应屏幕分辨率变化的内容放置在 Grid Layout 节点内。然后，您设置 Grid Layout 节点，以便它们以您想要的方式定位和分配内容。

起点工程包含完成本教程所需的两个 Grid Layout 2D 节点：

Player 节点设置媒体播放器应用程序的位置和大小（白色背景的内容）。该节点包含三列：
- 第一列和第三列被设置为 Proportional，值为 1，以便它们的大小与彼此以及整个 Player Grid Layout 节点的大小成比例相同。这些列包含当前播放歌曲的已用时间和剩余时间。
- 中间列设置为 Automatic，以便 Kanzi 根据该列中节点的大小设置其大小。此列包含歌曲信息和播放器控件。
Controls 节点设置歌曲标题、艺术家和专辑名称的位置，以及播放器的控件。节点的列和行设置为 Proportional，值为 1，以便它们的大小与彼此以及整个 Controls Grid Layout 2D 节点的大小成比例相同。

让用户界面拥有动态布局¶

在本节中，您可以使用户界面（Player 和 Controls Grid Layout 2D 节点）的布局响应设备屏幕方向和分辨率的变化。

在此项目中，RootPage 占满整个设备屏幕。因为 RootPage 节点的大小会随设备分辨率而变化，使用其高度和宽度作为设置用户界面中节点尺寸的基础。

要让用户界面的布局自适应：

在 Kanzi Studio Quick Start 窗口中，点击 Examples。在 Dynamic layout 教程旁边，点击 Open 并选择 Start project。
（可选）在 Preview 中，单击以进入 Analyze 模式，右键单击，然后选择 Debug objects 和 Grid cells。这样，您可以可视化 Grid Layout 2D 节点的列和行。
设置 Player 节点的大小：
1. 在 Node Tree 中选择 Player 节点，在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：
  - Property 到 Layout Height
  - Expression 到
    clamp(400, 1200, {@../Node.ActualHeight} - 300)
  单击 Save。
  
  Player Grid Layout 2D 节点设置媒体播放器应用程序的位置和大小（白色背景的内容）。此绑定根据 RootPage 节点的高度设置节点的高度。您使用限制 (Clamp) 绑定函数将 Player 节点的高度限制为：
  - 比 RootPage 节点的高度少 300 像素。
    
    由于 Player 节点的 Vertical Alignment 属性设置为 Center，这会在顶部和底部创建 150 像素的边距。
  - 始终在 400 和 1200 像素之间。
2. 在 Properties 中，单击 + Add Binding，并在 Binding Editor 中设置：
  - Property 到 Layout Width
  - Expression 到
    clamp(500, {@../Node.ActualWidth}, {@../Node.ActualWidth} - 300)
  单击 Save。
  
  此绑定根据 RootPage 节点的宽度设置 Player Grid Layout 2D 节点的宽度。您使用限制 (Clamp) 绑定函数将 Player 节点的宽度限制为：
  - 比 RootPage 节点的宽度少 300 像素。
    
    由于 Player 节点的 Horizontal Alignment 属性设置为 Center，这会在左右两侧创建 150 像素的边距。
  - 始终至少 500 像素。
设置 Controls 节点的大小：
1. 在 Node Tree 中选择 Controls 节点，在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：
  - Property 到 Layout Height
  - Expression 到
    {@../Node.Height}
  单击 Save。
  
  Controls Grid Layout 2D 节点设置歌曲标题、艺术家和专辑名称的位置和大小，以及播放器的控件。此绑定将 Controls 节点的高度设置为与 Player 节点的高度相同。
2. 在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：
  - Property 到 Layout Width
  - Expression 到
    clamp(500, 1300, {@../Node.Width} - 300)
  单击 Save。
  
  此绑定根据 Player 节点的宽度设置 Controls Grid Layout 2D 节点的宽度。您使用限制 (Clamp) 绑定函数将 Controls 节点的宽度限制为：
  - 比 Player 节点的宽度少 300 像素。
    
    由于 Controls 节点的 Horizontal Alignment 属性设置为 Center，这会在左右两侧创建 150 像素的边距。
  - 始终在 500 和 1300 像素之间。

让用户界面中的内容自适应¶

在本节中，您使 Controls Grid Layout 2D 节点的内容响应设备屏幕方向和分辨率的变化。这样，用户界面中的控件会随着屏幕分辨率的变化而变化。

要让用户界面中的内容自适应：

设置 Song list 节点的大小：
1. 在 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 节点高度的百分之五。
  - 始终在 10 到 60 像素之间。
2. 对 Song list 节点的 Layout Width 属性重复上一步，并使用此绑定表达式：
```
clamp(10, 60, {@../Node.Width} / 20)
```
  单击 Save。
  
  绑定的结果与上一步中的绑定结果相同，但设置了 Song list 节点的 Layout Width。
将您在 Song list 节点中创建的相同绑定应用到 Controls 节点中的其他 Image 节点。
1. 在 Node Tree 中选择 Song list 节点，在 Properties 中右键单击 Bindings，并选择 Copy。
2. 在 Node Tree 中选择 Back 节点，按下 Shift 键并点击 More 节点。
3. 在 Properties 中，右键单击 Bindings 并选择 Paste Binding(s)。这样，您可以将复制的绑定添加并应用于所有选定的节点。
设置 Play 节点的大小：
1. 在 Node Tree 中选择 Play 节点，在 Properties 中单击 Layout Height 绑定，并在 Binding Editor 中将 Expression 设置为
```
clamp(50, 120, {@../../../Node.ActualHeight} / 5)
```
  单击 Save。
  
  此绑定根据 RootPage 节点的高度设置 Play Image 节点的高度。使用此绑定，Play 节点的大小变化与 Controls 节点中的其他节点不同。
2. 对 Play 节点的 Layout Width 属性重复上一步，并使用此绑定表达式：
```
clamp(50, 120, {@../../../Node.ActualWidth} / 5)
```
  单击 Save。
在 Kanzi Studio 中选择 File > Export > Export as KZB Player for Windows，并在 <ProjectName>/Application Player 目录中打开应用程序的 .exe 文件。

当您调整应用程序窗口的大小时，即模拟设备屏幕分辨率的变化。请注意，用户界面的大小如何根据您在项目中创建的绑定而变化。