【STemWin教程】第52章 PROGBAR-进度条控件

席萌0209

特别说明：完整STemWin的1-60期教程和配套实例下载地址：链接

第52章 PROGBAR-进度条控件

    本期教程讲解STemWin支持的进度条控件。
    52. 1 进度条控件介绍
    52. 2 官方WIDGET_Multipage实例
    52. 3 使用GUIBulder建立多页控件
    52. 4 总结

52.1 进度条控件介绍
    进度条通常在应用程序中用于实现虚拟化，下面的截图是设置了皮肤和没有设置皮肤时的显示效果：

    设置皮肤后显示效果如下：

  

52.2 官方WIDGET_Multipage实例
    官方的这个实例很好的演示了MULTIPAGE的使用，这个例子在模拟器中的位置：

源码如下（程序中进行了详细的注释）：

1. ----------------------------------------------------------------------
2. File        : WIDGET_Progbar.c
3. Purpose     : Simple demo shows the use of the PROGBAR widget
4. ----------------------------------------------------------------------
5. */
7. #include "GUI.h"
8. #include "PROGBAR.h"
9. #include <stddef.h>
11. /*******************************************************************
12. *
13. *       static code
14. *
15. ********************************************************************
16. */
18. /*******************************************************************
19. *
20. *       _DemoProgBar
21. 0 对应的是上面的进度条，
22. 1 对应的是下面的进度条。
23. */
24. static void _DemoProgBar(void) {
25.   int i;
26.   PROGBAR_Handle ahProgBar[2];
27.   GUI_SetBkColor(GUI_BLACK);
28.   GUI_Clear();
29.   GUI_SetColor(GUI_WHITE);
30.   GUI_SetFont(&GUI_Font24_ASCII);
31.   GUI_DispStringHCenterAt("WIDGET_Progbar - Sample", 160, 5);
32.   GUI_SetFont(&GUI_Font8x16);
33.   GUI_DispStringAt("Progress bar", 100,80);
35.   /* 创建两个进度条*/
36.   ahProgBar[0] = PROGBAR_Create(100,100,100,20, WM_CF_SHOW);
37.   ahProgBar[1] = PROGBAR_Create( 80,150,140,10, WM_CF_SHOW);
39.   /* 进度条使用内存设备两个进度条都使用*/
40.   PROGBAR_EnableMemdev(ahProgBar[0]);
41.   PROGBAR_EnableMemdev(ahProgBar[1]);
43.   /* 设置第二个进度条的大小范围*/
44.   PROGBAR_SetMinMax(ahProgBar[1], 0, 500);
45.   /* 设置第一个进度条的字体*/
46.   PROGBAR_SetFont(ahProgBar[0], &GUI_Font8x16);
47.   GUI_Delay(500);
48.   while(1) {
49.   /* 设置进度条的字体*/
50.      PROGBAR_SetFont(ahProgBar[0], &GUI_Font8x16);
52.     if (LCD_GetDevCap(LCD_DEVCAP_BITSPERPIXEL) <= 4) {
53.    /* 0代表进度条使用的颜色，代表没有进度到的颜色*/
54.       PROGBAR_SetBarColor(ahProgBar[0], 0, GUI_DARKGRAY);
55.       PROGBAR_SetBarColor(ahProgBar[0], 1, GUI_LIGHTGRAY);
56.     } else {
57.       PROGBAR_SetBarColor(ahProgBar[0], 0, GUI_GREEN);
58.       PROGBAR_SetBarColor(ahProgBar[0], 1, GUI_RED);
59.     }
61.     /* 设置文字对齐方式*/
62.     PROGBAR_SetTextAlign(ahProgBar[0], GUI_TA_HCENTER);
63. /* 要显示的文字*/
64.     PROGBAR_SetText(ahProgBar[0], NULL);
66.     /* 显示的进度*/
67.     for (i=0; i<=100; i++) {
68.       PROGBAR_SetValue(ahProgBar[0], i);
69.       PROGBAR_SetValue(ahProgBar[1], i);
70.       GUI_Delay(5);
71.     }
73.     /* 设置进度条要显示的文字*/
74.     PROGBAR_SetText(ahProgBar[0], "Tank empty");
76.     /* 动态显示数值*/
77.     for (; i>=0; i--) {
78.       PROGBAR_SetValue(ahProgBar[0], i);
79.       PROGBAR_SetValue(ahProgBar[1], 200-i);
80.       GUI_Delay(5);
81.     }
83.     /* 设置进度条上面显示的文本*/
84. /* 动态显示数值效果一*/
85. PROGBAR_SetText(ahProgBar[0], "Any text...");
86.     PROGBAR_SetTextAlign(ahProgBar[0], GUI_TA_LEFT);
87. for (; i<=100; i++) {
88.       PROGBAR_SetValue(ahProgBar[0], i);
89.       PROGBAR_SetValue(ahProgBar[1], 200+i);
90.       GUI_Delay(5);
91.     }
92. /* 动态显示数值效果二*/
93.     PROGBAR_SetTextAlign(ahProgBar[0], GUI_TA_RIGHT);
94. for (; i>=0; i--) {
95.       PROGBAR_SetValue(ahProgBar[0], i);
96.       PROGBAR_SetValue(ahProgBar[1], 400-i);
97.       GUI_Delay(5);
98.     }
99. /* 动态显示数值效果三*/
100.     PROGBAR_SetFont(ahProgBar[0], &GUI_FontComic18B_1);
101.     PROGBAR_SetText(ahProgBar[0], "Any font...");
102. for (; i<=100; i++) {
103.       PROGBAR_SetValue(ahProgBar[0], i);
104.       PROGBAR_SetValue(ahProgBar[1], 400+i);
105.       GUI_Delay(5);
106.     }
107.     GUI_Delay(500);
109.   }
110. }
112. /*******************************************************************
113. *
114. *       MainTask
115. *
116. *       Demonstrates the use of the PROGBAR widget
117. *
118. ********************************************************************
119. */
121. void MainTask(void) {
122.   GUI_Init();
123.   while (1) {
124.     _DemoProgBar();
125.   }
126. }

复制代码

实际显示效果如下：

52.3 使用uCGUIBulder建立进度条控件
    用uCGUIBulder4.0建立如下界面（480*272分辨率）：

    设置进度条控件的如下三个地方：

    将生成的代码直接复制到模拟器或者开发板上面运行，实际显示效果如下（生成的代码在本期教程配套的例子中）：

    设置皮肤色的话，显示效果如下：

52.4 总结
    本期教程主要是跟大家讲解了进度条控件的基础知识。希望大家可以把本期教程中讲的这两个例子跑跑，然后自己设计一个相关的例子进行试验学习。教程中只是使用了部分的进度条控件API，其它的API大家都可以试试。