701N_UI编辑工具用户手册

📎 原始文档：https://www.kdocs.cn/l/ceQdofKDSRy3 701N UI编辑工具

用户手册

Zhuhai Jieli Technology Co.,LTD

修改记录

版本	更新日期	描述
1.0	2022 / 2 / 9	701N UI编辑工具用户手册
更新：		●建立初始版本 ●定义文档格

目录
一、 UI编辑工具介绍........................................................................................ 5
（一）编写目的......................................................................................................................................... 5
（二）主界面............................................................................................................................................. 5
1．菜单栏........................................................................................................................................ 5
2．工具栏...................................................................................................................................... 15
3．控件列表.................................................................................................................................. 15
4．控件属性.................................................................................................................................. 16
5．控件浏览器.............................................................................................................................. 18
6．工作区...................................................................................................................................... 19
7．页面大纲.................................................................................................................................. 20
二、 UI工程、页面以及控件的创建.............................................................. 21
（一）编写目的.......................................................................................................................................21
（二） UI页面的创建..............................................................................................................................21
（三） UI控件的创建以及属性设置......................................................................................................22
1．控件属性设置.......................................................................................................................... 22
2．图层.......................................................................................................................................... 29
3．布局.......................................................................................................................................... 30
4．图片控件.................................................................................................................................. 31
5．电池电量控件.......................................................................................................................... 35
6．文字控件.................................................................................................................................. 37
7．时间控件.................................................................................................................................. 41
8．数字控件.................................................................................................................................. 44
9．按钮控件.................................................................................................................................. 46
10．表格控件................................................................................................................................ 48
11．垂直列表控件........................................................................................................................ 52
12．水平列表控件........................................................................................................................ 56
13．指南针控件............................................................................................................................ 57
14．多圆环控件............................................................................................................................ 58
15．单圆环控件............................................................................................................................ 60
16．水平滑动条控件.................................................................................................................... 62
17．垂直滑动条控件.................................................................................................................... 63
18．表盘控件................................................................................................................................ 65
三、高级设置.................................................................................................... 70
（一）编写目的....................................................................................................................................... 70
（二）控件的复制粘贴........................................................................................................................... 70
（三） CSS属性的复制粘贴................................................................................................................... 70
（四）控件优先级的调整....................................................................................................................... 71
（五）布局的视觉隐藏........................................................................................................................... 71
四、 LUA代码编辑.......................................................................................... 75
（一）编写目的....................................................................................................................................... 75
（二）详细说明....................................................................................................................................... 75
五、 LUA模拟器.............................................................................................. 76
（一）编写目的....................................................................................................................................... 76
（二）二级标题....................................................................................................................................... 76
六、客户常见问题反馈解答............................................................................77

一、UI编辑工具介绍

（一）编写目的

该文档主要描述701N_UI编辑工具的使用方法及在开发中需要注意的一些问题，为用户进行二次开发提供参考,其中包括：
安装包管理工具、配置工具使用、配置宏的选择等。

（二）主界面

图 1.1 主界面

主界面可分为如图 1.1所示的若干个区域，下面分别对各个区域进行详细介绍。

1．菜单栏

图 1.2

÷文件
图 1.3
文件菜单主要包含基本的工程操作，包括新建工程、打开工程、保存工程、另存工程。

1 新建工程

新建一个工程，工程文件后缀名为json。

2 打开工程

打开一个工程。

3 保存工程

保存当前工程的修改。

4 另存为工程

保存当前工程的拷贝。
÷工程

图 1.4

工程菜单主要包含工程参数的配置，工程页面操作。

1 新建页面

图 1.5

点击新建页面会先弹出一个对话框，提示输入Page 的名称，输入完成后点击确定，则新建一个空白页面。

图 1.6

2 删除页面

图 1.7

点击删除页面则会弹出确认对话框，删除后不可恢复。

3 全局设置

图 1.8

全局设置用于设置相关文件的路径，一般使用默认参数即可。

4 工程缩放

图 1.9

工程缩放可对当前的工程的所有控件的位置坐标参数按比例进行缩放，注：资源不支持缩放，工程缩放后需要更换相应分辨率的资源。

5 工程备份记录

点击工程备份记录，会打开备份文件夹，里面存放了定时备份的工程文件。如果工程文件意外损坏了，可以找出最近的备份进行恢复。

图 1.10

6 工程配置

图 1.11

工程配置用于切换不同芯片平台的配置。

÷快捷方式

图 1.12

1 资源编译

UI工程修改完成后，先点击保存工程，再点击资源编译，则生成固件所需要的文件。

图 1.13

图 1.14 点击资源编译时，工具栏的资源编译(F5)按钮会变灰，同时显示编译中的提示，编译完成后会弹出编译成功的提示框。除了点击菜单栏的资源编译，也可以直接点击工具栏上的资源编译按钮或者按下快捷键F5，对UI工程的资源进行编译操作。

2 GUI模拟器

GUI模拟器用于模拟ui控件lua脚本的运行，支持lua 的版本可以直接在pc上进行模拟操作，pc端调试完毕后，再烧录到小机端运行。

图 1.15

3 资源编译配置

点击资源编译配置，则会弹出资源编译工具的主界面，

图 1.16

4 UI工程源文件升级工具

图 1.17 UI工程源文件升级工具用于将旧版本的UI工程文件升级到当前版本。具体使用说明可参考工具使用说明目录下的”UI 工程源文件升级工具使用说明.pdf”

5 资源目录

图 1.18

点击资源目录，则会打开资源目录，主要存放用于UI界面设计所需的图片。

6 多国语言

点击多国语言，则会打开多国语言excel表，用于编辑UI界面设计所需的文字。

图 1.19

图 1.20

Excel表里每个单元格的文字都可以独立设置字体、字号、粗体/倾斜/下划线这些属性。如果文字太长，可以按下Alt+Enter对单元格里的文字进行换行。多行文字可支持对齐属性设置，如左对齐/水平居中/右对齐等。

图 1.21

7 重新加载多国语言

当多国语言excel表有修改时，重启UI编辑工具或点击重新加载多国语言才会生效。
÷帮助
图 1.22
点击工具使用说明会打开目录，目录里面包含了工具相关的说明文档。如下图 1.2所示：
图 1.23

2．工具栏

图 1.24
工具栏是为了方便操作，具体用法请参考 1.2.1章节的。

3．控件列表

控件列表用于选择在工作区中创建控件，然后对其进行布局。
图 1.25

4．控件属性

图 1.26
当新建了一个控件并选择它后，控件列表下面就会出现一个控件属性面板，此面板用于设置该控件的各种属性，包括坐标、背景色、背景图片等。
●ID号
●为该控件分配的名称，工具会默认分配该值，用户也可以根据自己喜好更改该名称。
●对齐方式
●为图片或者文字在控件内显示的对齐方式，有左对齐、右对齐和居中对齐。
●默认隐藏
●默认为false，就是该控件默认会跟随父控件一同显示出来，当设置为true 时，改控件将不会跟随父控件进行显示，比如一个布局内分布了一个“状态栏”和一个“菜单”，由于菜单并不是一开始就要显示出来的，而是在按键按下时才会调出菜单，因此“菜单”控件就设置为默认隐藏false。
●位置坐标
●位置坐标为该控件在布局中的相对坐标。
●背景颜色
●每个控件都可以设置一个背景颜色。
●背景图片
●每个控件都可以设置一个背景图片。
●内边框线
●内边框线即控件矩形边框，此处可以设置边框4个边的像素宽度和颜色。
●图层颜色类型
●该参数是图层特有的，暂不使用，可忽略。

5．控件浏览器

工具最左边的列表为布局结构树状图，此图能够反映当前页面的布局结构，包括图层、布局和控件。
图 1.27
对树状图的成员进行右键点击，可以进行删除、隐藏、复制、粘贴、移动等操作。隐藏操作是对某控件进行视觉隐藏，便于布局时的操作，对 UI布局本身并无影响。隐藏后的控件坐标的眼睛会闭合并且控件会在页面上消失，移动操作可以将布局的上下层关系进行重新布置。
图 1.28

6．工作区

图 1.29
工作区是根据显示屏的分辨率按照 1： 1 的比例来创建的，以像素为单位。控件在工作区的位置以及大小，会影射到显示屏的实际位置，具有
非常直观的效果。
可以点击控件列表里的控件，按住鼠标不放，直接拖动到工作区完成控件的创建，再完成控件属性设置等一系列的操作。

7．页面大纲

图 1.30

页面大纲负责显示各个页面的效果图，同时进行页面的切换。

二、UI工程、页面以及控件的创建

（一）编写目的

该文档主要描述701N_UI 工程、页面以及控件的创建，为用户进行二次开发提供参考。

（二）UI 页面的创建

UI 页面的创建有两种方式：
(1)点击菜单栏，工程->新建页面
(2)直接点击工具栏的新建页面按钮

图2.1

新建页面会提示输入页面的名称，名称既可以是英文，也可以是中文，主要是为了方便记忆和管理。创建完后，工具会自动切换到新建的页面，右边的页面大纲则显示新建页面的效果图，效果图下方显示页面的序号以及名称。

图2.2

（三）UI控件的创建以及属性设置

控件创建的顺序依次为图层->布局->控件，图层、布局也可以看做是一个特殊的控件。若没创建图层或布局，控件则会变为不可用状态。

1．控件属性设置

控件都具有公有的属性，同时还具有私有的属性，不同控件的私有属性会有一些差异。
.

对齐方式
对齐方式是对控件内部的显示做对齐操作，可选左对齐、居中对齐、右对齐。
默认隐藏
设置为true ,则控件创建后不可见。设置为false ,则控件创建后可见。可通过api接口来设置是否隐藏。
标志
忽略。
位置坐标

图2.4

位置坐标设置有三种方式，分别为：粗调，微调，精调。粗调：直接点击控件并拖动可调整控件的位置，点击控件的锚点并拖动可调整控件的大小。
微调：选中需要调整的控件，然后点击键盘上的方向键或者点击编辑框旁边的上下箭头。
精调：直接在编辑框里填入数值。
创建控件后，应该首先对控件位置大小进行粗调，然后进行微调。若已知控件的精确位置，也可以直接对控件进行精调。

背景颜色
点击背景颜色按钮，会弹出一个调色板，在调色板里选择合适的颜色后，点击确认，到此背景颜色就设置好了。
背景颜色支持透明度的设置，在Alpha channel设置合适的透明度，在显示的时候就会呈现出半透明的效果。

图2.5

背景图片

图2.6

点击背景图片按钮，会弹出下面的对话框来选择背景图片，图片选择好后，对话框会根据图片的扩展名显示不同的转换格式。

1 png 图片

图2.7

选择好背景图片后，需要在右边选择图片的转换格式，系统默认选 ARGB8888,可以根据图片的色彩的丰富度来选择合适的格式，当图片的颜色总数超出格式所能容纳的最大颜色数时会出现失真 ARGB8888 : 16万色，高质量
ARGB8565 : 6万色，中等质量
OSD16 : 6万色，中等质量
L 8 : 256色，中低质量
AL88 : 256色，中低质量
AL44 : 16色，低质量
A 8 : 渐变色（图片的RGB通道必须相等，Alpha通道可变化）
L 1 : 2色，低质量

2 bmp 图片

图2.8

RGB888: 16万色，高质量
RGB565:6万色，中等质量

3 jpg 图片

图2.9

图片列表设置
图片列表可支持选择多张图片，所选择的图片后缀名必须保持一致，选择好图片后，再根据图片列表的后缀名选择对应的转换格式。
图2.10
内边框线
内边框数值设置为非0后，控件会显示出对应的边框，同时还可设置边框的颜色。
事件属性
暂未使用，可忽略。
Lua脚本
图2.11
若固件支持lua，则可以在此编写控件的lua脚本。

2．图层

新建了页面后，需要新建图层，所有控件或布局都将置于图层之上。点击图层并拖动到绘图工作区上，则新建好了一个图层，接下来可以设置它的坐标参数、背景颜色等属性。
图2.12
图层创建后会有默认的背景颜色，如果不需要背景颜色，可以点击其右边的箭头来移除背景颜色，背景颜色被移除后，箭头会变为灰色不可选状态。同样，如果不需要背景图片，也可以点击其右边的箭头来删除背景图片。
图2.13
图层颜色类型根据屏的类型来确定，若为点阵屏，颜色类型选择OSD1；若为彩屏，颜色类型选择OSD16。
图2.14
如下图所示，点击图层后拖动到绘制面板，在面板上单击并拖动图层锚点调整图层大小和坐标位置。蓝色区域为新建好的图层。
图2.15

3．布局

布局具有控件的基本属性，主要用于管理控件，可视为控件的容器。在ui编辑器上改变布局的位置坐标时，布局的子控件则会跟随改变，方便控件的模块化管理。布局可包含各类控件，也可以包含布局，可实现布局的嵌套。一般自定义控件也类似于布局，里面可以自由添加其它基本控件。
新建了图层后，下一步需要先建立一个布局，控件需要用布局作为承载。先选择刚刚新建好的图层，然后点击布局并拖动到图层上，即可新建一个布局。
图2.16
然后在图层中会出现一个矩形区域，该区域就为新建好的布局区域，调整好布局的位置和大小，如下图，黄色区域为布局。布局也可以设置背景颜色和背景图片。
图2.17

4．图片控件

图片控件可以是单张图片，也可以是多张图片的集合。具有默认高亮以及旋转中心点的专有属性，有图片列表和高亮图片列表。
默认高亮：用于图片列表和高亮图片列表的切换显示。
旋转中心点XY：记录图片的中心点坐标，用于图片的旋转，比如watch 控件会用到。
图片列表：记录一张或多张图片，默认显示列表的第一张图片，可通过图片控件的api接口进行切换显示。配合定时器使用，通过定时切换图片，还可以实现动画效果。
高亮图片列表：记录一张或多张图片，图片控件高亮状态下会切换至该列表。
选择一个布局，点击选择图片，新建一个图片控件：
图2.18
布局上就会出现一个图片控件矩形区域：
图2.19
点击图片列表选择需要显示的图片，该图片控件可以在该图片列表中的图片进行相互切换，下拉列表的第一张图片为默认显示的图片，高亮图片列表是图片控件在高亮状态下显示的图片列表，同样也可以切换列表中的图片进行显示：
图2.20
此处我们选择3张图片：
图2.21
去掉背景颜色，调整好图片控件的位置和大小，效果如下图：
图2.22
用户可根据需求设置其他属性。到此，一个图片控件就建立好了。

图片自动播放
图片列表支持自动播放的功能，可根据设置的播放模式以及播放时间间隔来播放图片列表中的图片。
图2.23
图2.24
PLAY_NONE:无播放
PLAY_ONCE:播放一次
PLAY_LOOP:循环播放

5．电池电量控件

电池电量控件主要实现电池电量的状态显示，比如当前剩余电量的状态显示以及充电状态的指示。具有电量图片列表以及充电图片列表两个私有属性。
电量图片列表：会根据获取到的电池电量的百分比来显示相应的电池电量图片，用来指示电量的多少。
充电图片列表：检测到充电状态时会显示该图片列表。
选择一个布局，点击选择电池电量并拖动到布局上，即可新建一个电池控件。
图2.25
布局上出现一个电池控件矩形区域，根据需要调整好电池控件的大小和位置及其他属性。
图2.26
电池属性列表有两个特有属性，分别是电量图片列表和充电图片列表。下拉箭头为默认第一次显示的图片。
图2.27
电量图片列表需要按照电量从0%到 100%的顺序选取图片，图片数量无限制，UI 内核会根据百分比自动计算电量对应的图片。单击电量图片列表选择右边栏图片到左边栏：
图2.28
充电图片列表需要选择充电状态下的图片，如果选择多个图片，系统将顺序显示，点击选择：
图2.29
点击背景颜色去掉电池的背景色，并调整电池布局区域的大小，调整后效果如下图：
图2.30
用户可根据具体需求设置其他属性，至此，一个电池控件就建好了。

6．文字控件

文本控件主要实现文字的显示，包括多国语言文字（静态文本），ascii 码的显示以及字库的显示。多国语言与字库是相关联的，切换多国语言，字库也会跟着切换。
编码格式有三种，分别为”ascii”,”strpic”,”text”.
“ascii”：使用内置的ascii 字库显示。
“strpic”：strpic 的文字内容可在excel表里编辑，需要自行翻译，改变当前的语言可实现多国语言的切换。
“text”：调用字库接口进行显示，需要添加相应的字库文件。选择一个布局，点击文字，新建一个文字控件：

图2.3l

布局上就会出现一个文字控件矩形区域：

图2.32

文字控件有两种形式，一种为多国语言，另一种为自定义文字，该属性设置项为编码格式，此处我们需建立一个多国语言文字，则编码格式编辑为strpic。文字的显示颜色选择为黑色：

图2.33

编码格式
文本控件支持三种编码格式，分别为strpic、ascii、text。其中ascii、text 格式不需要添加文字列表，因为这种文字是通过编码实现动态显示的。

( 1 ) Strpic

静态文本，适用于菜单项，提示语等一些需要固定显示的场合，素材来源于多国语言excel表,可以在excel表里编辑文本，可以设置文本的字体、字号等等。
文字列表选择需要显示的多国语言文本，此处我们选择3个文本，勾选对话框右侧显示列表的文字即可，对话框的已选列表显示已选择的文字，文本的排列顺序可以点击下方的绿色箭头进行调整，然后点击确定：

图2.34

(2 ) Ascii

动态文本，适用于显示ascii码的场合，一般用于数值、字母、符号的显示，该编码格式不需要设置文字列表。

(3) Text

动态文本，适用于显示短信、文件名等一些复杂显示的场合，需要字库的支持，根据给定的编码来进行文本显示，该编码格式不需要设置文字列表。

文字颜色
设置文本正常显示时的颜色。
高亮颜色
设置文本高亮显示时的颜色。
最后去掉背景色，调整文本控件的位置和大小，最终结果如图：
图2.35
到此，一个文字控件就建立好了。

7．时间控件

时间控件主要实现时间的显示，由0`9十个数字以及分隔符组成，具有格式、文字颜色、高亮颜色、数字图片列表、分隔符图片列表以及空格图片列表的专有属性。数字可以使用自定义图片，也可以使用ascii 字库。支持自定义的时间显示，’Y’表示年，’M’表示月，’D’表示日，’h ’表示时，’m’表示分， ’s ’表示秒。可通过上面字符的组合，实现自定义格式的时间。
比如：
Y-M-D hⓂ️s 表示 2020-12-12 14:20:30
选择一个布局，点击时间，新建一个时间控件：
图2.36
在布局上就会出现一个时间控件矩形区域：
图2.37
接下来需要设置时间的显示格式，格式的关键字为Y M D h m s，分别表示年、月、日、时、分、秒。其它文字不做解析，直接通过ASCII或者图片显示。
图2.38
如果不设置图片列表，则所有时间文字都通过ASCII 字模来显示。此处我们打算用数字图片来显示时间，我们可以把格式中的Y/M/D删除。
图2.39
设置数字图片列表，图片需要按照从数字0-9 的顺序选择图片。
图2.40
设置分隔符图片列表，分隔符图片列表需要根据顺序设置各个分隔符的图片。这里有两个 “：”符号，则需要选择两个 “：”图片，用户可以复制原来的图片作为第二个“：”, 图片选择如图：
图2.41
用户可根据需求设置其他属性。到此，一个时间控件就建立好了。

8．数字控件

数字控件主要实现数字的显示，由0~9 的数字以及分隔符组成，数字可以使用自定义图片，也可以使用ascii 字库。支持简单的显示格式设置，可支持数字分组显示，中间用分配符隔开，例如“%d”表示整型的数字，”%s”表示字符串,字符串用于位数比较多的情况。
支持的格式如下：
%d：整形数值显示，由数值的位数决定
%4d：固定位数的整形数值显示，不足4位，前面补空格
%04d：固定倍数的整形数值显示，不足4位，前面补0
%d/%d：两个整形数值显示，中间由分隔符隔开
%s:字符串显示，比如手机号码的显示
选择一个布局，点击数字，新建一个数字控件：
图2.42
在布局上就会出现一个数字控件矩形区域：
图2.43
接下来需要配置数字的格式，可以是纯数字图片，也可以插入一些分隔符图片，只支持整型的数字显示，例如“%04d”表示四位数字，不足四位补0，如下所示：
图2.44
数字图片列表需要按顺序添加0~9 的数字图片。
图2.45
分隔符图片列表跟上面的格式对应，按顺序添加。比如格式设置
为”%04d-%02d”，需要添加一张”-”字符的图片。最大只能设置两个数字格式，数字之间的分隔符可以设置任意的图片。
空格图片列表只有当数字格式中间没有填充0 时添加，比如”%4d”.用户可根据需求设置其他属性。到此，一个数字控件就建立好了。

9．按钮控件

实现一个按钮，该控件具有两个css属性，其中一个表示未按下时的属性，另一个表示按下时的属性，一般用于触摸屏，当触摸该控件时，会切换至按下的属性。
选择一个布局，点击按钮，新建一个按钮控件：
图2.46
在布局上就会出现一个按钮控件矩形区域：
图2.47
按钮控件需要在CSS属性_ 0标签栏右键，点击复制添加,此时就多了一个CSS属性_0 的拷贝CSS属性_ 1,点击CSS属性_ 1标签，切换到CSS属性_ 1,然后设置不同的背景颜色或者背景图片，这样在点击和松开按钮控件时就会显示不同的效果。到此，一个按钮控件就建立好了。
图2.48
图2.49
图2.50

10．表格控件

表格控件是作为表格形式的菜单来使用。新建一个布局，在布局中创建
一个表格控件：
图2.51
设置好行数和列数，设置好菜单项的长宽。
图2.52
右键点击表格，可以添加行、添加列、设置单元间距、单元长宽等参数。
图2.53
将布局设置为紫色，将表格各个单元设置为蓝色，设置好后效果如下图所示：
图2.54
在紫色布局空隙中添加文字控件作为标题：
图2.55
在菜单项添加文字控件作为菜单项文字：
图2.56
对每个菜单项添加活动项属性，右键点击菜单项的CSS属性_0，选择复制添加，添加CSS属性_ 1。
图2.57
将各个菜单项的CSS属性_1设置为活动项颜色，此处设为黄色，效果如图：
图2.58
此时，菜单项的默认状态为蓝色，而被选中后的活动项变成黄色。至此，一个表格控件菜单就建立好了。

11．垂直列表控件

垂直列表是用在垂直菜单中的，一个菜单最好占用一个布局。选择一个布局，点击垂直列表，新建一个垂直列表控件：
图2.59
调整好布局和垂直列表控件的大小，预留布局上方空档作为菜单的标题项，如图黄色部分为空档，红色部分为垂直列表区域：
图2.60
接着要建立菜单项，右键点击垂直列表区域（红色区域），选择添加行：
图2.61
弹出对话框，设置添加的行数，假如该菜单有10项，则填写 10：
图2.62
添加好后，工具会自动生成等距等长等宽的行，如果垂直列表控件不够显示所有行，可以通过鼠标滚轮来进行行切换。下图为已经添加好的行，一面只够显示4行：
图2.63
接下来我们可以改变行的背景色为绿色，将布局改为蓝色，如图：
图2.64
添加标题，需要在蓝色的布局部分添加一个文本控件，编码类型为 strpic，选择其图片列表为设置字体颜色为黑色，调整好控件大小并去除背景色，效果如图：
图2.65
然后需要对菜单项进行文字和图片布局，逐行选择并进行菜单项的图片控件与文字控件添加，最后效果如图：
.
到此，菜单项的所有行的目前非活动项属性都设置完毕，也就是当前的CSS属性_0。接下来要为所有菜单项都添加一个CSS属性_ 1作为活动项属性。选择行，右键点击CSS属性_0，选择复制添加，生成一个CSS属性_ 1：
图2.67
我们将作为活动项状态的CSS属性_ 1 的背景色改为红色，此时第一行的活动项动作及表现为背景色变成红色，效果如图：
图2.68
接着将其它行的活动项状态都设置为红色，亦即将CSS属性_1 背景色改为红色，最终效果如图：
图2.69
此时，非活动项为绿色，被选中的活动项将变成红色。一个垂直列表菜单就做好了。

12．水平列表控件

水平列表是用在水平菜单中的，一个菜单最好占用一个布局。选择一个布局，点击水平列表，新建一个水平列表控件：
图2.70
水平列表的其他设置类似垂直列表，请参考2.4.11章节。

13．指南针控件

选择一个布局，点击compass按钮，并拖动到工作区，则新建了一个 compass控件：
图2.71
在布局上就会出现一个compass控件的矩形区域：
图2.72
设置好背景图片以及罗盘，指示箭头。到此，一个指南针控件就新建好了。
图2.73
指南针的罗盘需要围绕一个中心点进行旋转，这里还需要设置罗盘的旋转中心点，旋转中心点设置为罗盘图片的中心点即可。
图2.74

14．多圆环控件

选择一个布局，点击multiprogressbar按钮，并拖动到工作区，则新建了一个多圆环控件：
图2.75
在布局上就会出现一个multiprogressbar控件的矩形区域：
图2.76
接着需要配置圆环的相关参数，圆环个数最多可设置3个，而且它们都具有相同的圆心。 12 点钟方向规定为圆环的0度，圆环起始角度和结束角度都相对于0度来计算，圆环的起点和终点按照顺时针方向来看，若终点的角度跨过 12 点钟方向，则终点的角度加上360度。
图2.77
下图为多圆环显示的效果图
图2.78

15．单圆环控件

选择一个布局，点击progressbar按钮，并拖动到工作区，则新建了一个单圆环控件：
图2.79
在布局上就会出现一个progressbar控件的矩形区域：
图2.80
接着需要配置圆环的圆心坐标、圆环颜色、圆环的外圆半径以及内圆半径、起始角度、结束角度等。
图2.81
下图为单圆环显示的效果图
图2.82

16．水平滑动条控件

水平滑动条控件属于自定义的控件，主要用来指示完成的百分比，比如升级时的进度显示，音乐播放的时间轴显示等等。
点击并拖动slider控件到布局上，新建一个slider滑块控件。
图2.83
如下图，一个slider滑块就创建出来了，滑块一般用于显示播放进度条。
图2.84
Slider滑块控件的结点结构如下图所示，right_pic 为底部黑色条， left_pic 为顶部进度蓝色条，slider_pic 为圆点滑块。
图2.85
用户可以根据需求，改变这三个图片控件的属性，至此，一个slider 控件就建好了。

17．垂直滑动条控件

点击并拖动vslider控件到布局上，新建一个vslider滑块控件。
图2.86
如下图，一个vslider 滑块就创建出来了，垂直滑块一般用于音量设置或者垂直列表菜单的进度显示。
图2.87
vslider滑块控件的结点结构如下图所示，vslider_right_pic 为底部黑色条，vslider_left_pic 为顶部进度蓝色条，vslider_pic 为圆点滑块。
图2.88
用户可以根据需求，改变这三个图片控件的属性，至此，一个vslider 控件就建好了。

18．表盘控件

表盘控件主要是实现模拟时钟的显示，由表盘背景，时针，分针，秒针组成。时分秒的显示围绕着表盘的中心点旋转，有两种实现方式，一种是通过直接刷图来实现，另一种是通过旋转算法来实现。刷图的优点是刷新速度快，缺点是比较占 flash 空间，每个刻度都需要一张图片，由于对称关系，第二、三、四象限的显示可通过第一象限的图片镜像来实现；旋转算法的优点是节省flash 空间，只需要一张图片就行了，缺点是需要更大的缓存，运算也比较占cpu。时钟控件可以嵌入其他类型的控件，而且显示位置处于表盘背景与时、分、秒针的中间。
点击并拖动watch控件到布局上，则新建一个表盘控件。
图2.89
表盘控件基本模型包含一个背景，一个时针，一个分针，一个秒针。
效果图为：
图2.90