AWTK Designer快速使用指南
The following article is from ZLG致远电子 Author 研发部
本文主要讲述使用AWTK Designer设计UI界面的一些基础功能，让你快速的学会AWTK Designer编程。
AWTK Designer（下面简称Designer）是专门用来制作AWTK 应用程序UI 界面的实用工具。只要通过拖拽和点击就可以完成复杂的界面设计，操作简单，下面以HelloDesigner-Demo为例，介绍如何使用Designer。
1.1 新建项目
首先启动Designer，会弹出“新建项目”对话框，如图 1.1所示。
图1.1 新建项目
为确保后续能够正确编译AWTK工程，建议用户将工程创建在AWTK SDK整合包中的user_apps目录下，如下图 1.2所示。
图1.2 AWTK SDK整合包目录结构
Designer安装时自带了一个最佳匹配的AWTK SDK，在安装目录的SDK文件夹中；用户也可以通过AWTK Installer工具自行安装SDK到任意位置。
选择好项目路径，填写好项目名称（如“HelloDesigner-Demo”），其他参数设置默认即可，最后点击“创建”按钮，便能创建项目。创建好的项目目录结构如图 1.3所示。
图1.3 目录结构
目录结构中的各目录功能如下：
bin：存放编译后的可执行文件
design：存放Designer工程的原始资源文件
res：存放编译和运行时的资源文件（Designer打包输出目录）
src：存放C逻辑代码
project.json：Designer工程配置文件
SConstruct：SCons编译脚本文件
1.2 主界面设计
下图 1.4所示即为HelloDesigner-Demo程序运行时的主界面，下面介绍如何使用Designer设计该界面。
图1.4 主界面
1.2.1 创建按钮控件
以按钮控件为例，在Designer左侧的“控件列表”中，选中“按钮”，将其拖拽进窗体中，便能创建按钮控件，如图 1.5所示。
图1.5 创建按钮控件
1.2.2 修改控件名称
创建好控件之后，可以给控件修改合适的名称，以便后续编写逻辑代码时，通过名称找到相应控件，控件名称可在“控件编辑器”的“name”属性中修改，如图 1.6所示。
图1.6 修改控件名称
1.2.3 调整控件布局
以“Basic”按钮为例，可拖拽和拉伸控件来调整控件的布局，也可在“控件编辑器”中的“布局”列表中设置具体的坐标值来调整布局，最终布局效果如图 1.7所示。
图1.7 调整控件布局
1.2.4 设置按钮控件显示文字
为了更加直观地表示按钮的功能，可在按钮中添加文字显示。以“Basic”按钮为例，在“控件编辑器”的“值”列表中，修改“text”属性，即可设置按钮的显示文字，如图 1.8所示。
图1.8 显示文字
1.2.5 修改显示字体的大小
创建好控件后，Designer会提供控件默认样式，如需修改样式，可在“控件编辑器”的“样式”列表中，修改相应的样式属性。以“Basic”按钮的字体样式为例，修改“font_size”属性值为30（默认值为18），可增大显示字体的大小，如图 1.9所示。
图1.9 设置字体大小
1.2.6 切换控件状态
控件一般都会有多种状态，前面字体大小设置我们只设置了“normal”状态下的，为避免不同状态下字体大小不一致，因此其他状态下也要进行修改。如图 1.10所示，展开“state”属性的下拉框，可选择不同的控件状态。
图1.10 切换控件状态
1.2.7 裁剪字库
Designer支持对字库进行裁剪，由于本项目没有使用到中文字体，因此可以裁剪掉中文字体，从而减小资源占用。如图 1.11所示，在Designer右下角的“资源浏览器”中点击“字体”按钮，切换至字体资源界面，再点击左上角的“字体裁剪设置”图标，打开“字体裁剪设置”对话框，如图 1.12所示。
图1.11 裁剪前的字体资源
在“字体裁剪设置”对话框中，输入本项目中需要用的文字。
图1.12 字体裁剪设置
在对话框中输入要保留的字体之后，关闭对话框。再点击“资源浏览器”中的“裁剪”按钮，即可裁剪字体。如图 1.13所示，可见字体资源大小从原本的9460k，减小成14k。
图1.13 裁剪后的字体资源
1.2.8 添加图片资源
点击Designer左侧“资源浏览器”中的“＋”按钮，在弹出的对话框中选中所需图片，点击“打开”，即可添加图片资源，如图 1.14所示。
图1.14 添加图片资源
1.2.9 显示图片
将图片添加进工程后，创建图片控件，在“控件编辑器”的“值”列表中，点击“image”属性下拉框，选中刚才添加的图片即可将图片显示到界面中，如图 1.15所示。
图1.15 显示图片
1.3 Basic界面设计
我们要实现这样的效果，点击图 1.4主界面的“Basic”按钮，可进入Basic界面，如图 1.16所示。
图1.16 Basic界面
1.3.1 新建窗体
在左上角的“窗体编辑”界面中，点击“新建窗体”图标，可弹出“新建窗体”窗口，如图 1.17所示。
图1.17 新建窗体
在模板中选中“Window”，并输入窗口名称，点击“创建”按钮，即可新建窗体。如图 1.18所示。
图1.18 新建窗体窗口
创建“basic”窗体之后，创建编辑框、进度条、滑块和按钮等控件，即可实现图 1.16所示界面。创建控件方法可参考章节1.2.1。
1.3.2 添加软键盘
编辑框控件在输入状态下，默认会弹出软键盘，如需使用软键盘，需要先添加软键盘资源，点击“新建窗体”图标，在弹出的“新建窗体”窗口中选择“Keyboard”，再点击“创建”按钮即可。如图 1.19所示。
图1.19 新建软键盘
软键盘效果如图 1.20所示。
图1.20 软键盘
1.3.3 设置进度条控件垂直显示
进度条控件和滑块控件默认为水平显示，以进度条控件为例，在“控件编辑器”的“杂项”列表中，勾选“vertical”属性，再对控件布局进行调整，即可将进度条控件修改为垂直显示，如图 1.21所示。
图1.21 设置进度条垂直显示
1.3.4 设置进度条显示文本进度
在杂项列表中勾选“show_text”属性，可让进度条以文本形式显示进度，如图 1.22所示。
图1.22 设置进度条显示文本进度
1.4 Animation界面设计
点击图 1.4主界面的“Animation”按钮，可进入Animation界面，如图 1.23所示。
图1.23 Animation界面
1.4.1 添加动画效果
界面中包含4个图片控件，分别展示了移动、缩放、透明和旋转四种不同的动画效果，这里以移动动画为例，简单介绍Designer如何添加动画效果。
首先选中图片控件，在“控件编辑器”的“动画”属性里点击“＋”按钮，弹出“设置动画”对话框，如图 1.24所示。
图1.24 添加动画
在对话框中选择动画类型为“位移”，按图 1.25所示设置相应属性，即可为图片控件添加动画。其他动画效果添加步骤与此类似，这里不再赘述。
图1.25 动画设置
1.5 项目打包
完成界面设计后，点击如图 1.26中的“打包”按钮，即可打包生成资源。
图1.26 打包项目
1.6 逻辑代码实现
界面设计完成后，便可在src目录下编写相应的逻辑代码，本项目中通过逻辑代码实现的功能主要有下面几点：
在主界面中，点击按钮可弹出新窗口。
在“basic”和“animation”界面中，点击“close”按钮，可关闭窗口。
在“basic”界面中，点击“inc”/“dec”按钮，可增加/减少进度条的值。
在“basic”界面中，滑动滑块可改变进度条的值。
1.6.1 响应按钮点击事件
以“Basic”按钮为例，点击可弹出“basic”界面，实现步骤如下：
1、注册点击事件，详见程序清单 1.1。
程序清单 1.1 注册点击事件
2、实现点击事件响应函数，详见程序清单 1.2。
程序清单1.2 点击事件响应函数
3、实现open_basic_window函数，详见程序清单 1.3。
程序清单1.3 打开basic窗口函数
1.6.2 响应进度条值正在改变事件
以“basic”界面中的滑块控件为例，滑动滑块可以改变进度条的值，实现步骤如下：
1、为滑块注册值改变事件，详见程序清单 1.4。
程序清单1.4 注册值正在改变事件
2、实现值正在改变事件响应函数，详见程序清单 1.5。
程序清单1.5 值正在改变响应事件
备注：其他的事件处理逻辑读者可以举一反三，完整代码可在AWTK SDK整合包的awtk-examples下HelloDesigner-Demo中找到。
1.7 程序编译
设计好UI界面及逻辑代码之后，可以在Windows下模拟运行。在工程HelloDesigner-Demo目录下打开终端命令行（按下“Shift”键，然后点击鼠标右键，选择“在此处打开命令窗口(W)”），执行如下命令进行编译：
编译后生成的exe程序保存在bin目录下。
备注：Demo工程编译之前须确保已搭建好AWTK环境，并确保awtk源码已经被编译好，AWTK环境搭建可参阅《AWTK开发实践》。
到这里，一个简单的使用Designer设计的程序就完成了。