特别说明：完整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. ----------------------------------------------------------------------
   ' m* |4 f: `, I7 Z! M# P. U# w
2. File        : WIDGET_Progbar.c
   
3. Purpose     : Simple demo shows the use of the PROGBAR widget
   
4. ----------------------------------------------------------------------
   : Z% [7 O' `' h5 @  O9 G" }- T: P
5. */
   
6. 
   " t+ t: G% e; p3 M( `, J% }
7. #include "GUI.h"
   ! j1 }, [* E6 A5 }" l* a/ D, g' ]
8. #include "PROGBAR.h"
   
9. #include <stddef.h>
   
10. 
    
11. /*******************************************************************
    
12. *
    . z9 i& d' t' R/ D9 i7 H$ \
13. *       static code
    
14. *
    2 v: ]* @8 Y2 C: C( v5 o' c
15. ********************************************************************
    
16. */
    
17. 
    
18. /*******************************************************************
    
19. *
    
20. *       _DemoProgBar
    
21. 0 对应的是上面的进度条，
    3 Y$ J' p  A% P# |
22. 1 对应的是下面的进度条。
    
23. */
    8 i0 `7 m; |' s
24. static void _DemoProgBar(void) {
    % N7 I+ y& B- K+ F/ q
25.   int i;
    
26.   PROGBAR_Handle ahProgBar[2];
    ! q! `! \% g) r. o$ A7 g/ K8 K
27.   GUI_SetBkColor(GUI_BLACK);
    ( m' M( B* p5 B$ u9 x, i
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);
    
34. 
    9 W4 m! w0 z6 B% r  u* K& e6 A
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);
    
38. 
    
39.   /* 进度条使用内存设备两个进度条都使用*/
    + _* f' ?0 x3 N) A" P; q
40.   PROGBAR_EnableMemdev(ahProgBar[0]);
    
41.   PROGBAR_EnableMemdev(ahProgBar[1]);
    
42. 
    " A& c0 L$ t# V7 p) c/ e3 c0 b. \& j
43.   /* 设置第二个进度条的大小范围*/
    
44.   PROGBAR_SetMinMax(ahProgBar[1], 0, 500);
    
45.   /* 设置第一个进度条的字体*/
    ( t4 L. R1 V$ V5 s0 |
46.   PROGBAR_SetFont(ahProgBar[0], &GUI_Font8x16);
    $ o4 h  L  }. m$ ~
47.   GUI_Delay(500);
    
48.   while(1) {
    0 l& z- F; M& g1 G, v+ V$ U5 Q
49.   /* 设置进度条的字体*/
    
50.      PROGBAR_SetFont(ahProgBar[0], &GUI_Font8x16);
    
51. 
    
52.     if (LCD_GetDevCap(LCD_DEVCAP_BITSPERPIXEL) <= 4) {
    ' ?& t  S9 _3 p% R$ M% X: M8 D
53.    /* 0代表进度条使用的颜色，代表没有进度到的颜色*/
    / b& E' j$ V" V( e/ q9 R# R
54.       PROGBAR_SetBarColor(ahProgBar[0], 0, GUI_DARKGRAY);
    
55.       PROGBAR_SetBarColor(ahProgBar[0], 1, GUI_LIGHTGRAY);
    
56.     } else {
    7 h( W& a; C+ Y' Q1 b1 B
57.       PROGBAR_SetBarColor(ahProgBar[0], 0, GUI_GREEN);
    
58.       PROGBAR_SetBarColor(ahProgBar[0], 1, GUI_RED);
    * ~- ]; B: E3 p$ [% K% o8 y$ \
59.     }
    3 u5 _+ s, @1 j6 @4 k& g* @. J. K
60. 
    6 K/ W( E5 p8 N' k
61.     /* 设置文字对齐方式*/
    % d+ n( r* V$ x( |
62.     PROGBAR_SetTextAlign(ahProgBar[0], GUI_TA_HCENTER);
    & x  h+ u9 c: \# D
63. /* 要显示的文字*/
    
64.     PROGBAR_SetText(ahProgBar[0], NULL);
    
65. 
    
66.     /* 显示的进度*/
    " ~# @5 {+ m- o5 F; L
67.     for (i=0; i<=100; i++) {
    
68.       PROGBAR_SetValue(ahProgBar[0], i);
    0 k# t6 x( x/ S3 [9 k- H$ o3 {8 b
69.       PROGBAR_SetValue(ahProgBar[1], i);
      B/ P  {4 w: e0 [' e' _+ `. J% t* m. r
70.       GUI_Delay(5);
    + g: {* O% J) t% G" T; w" p
71.     }
    $ P5 \/ y. {/ c, I
72. 
    
73.     /* 设置进度条要显示的文字*/
    
74.     PROGBAR_SetText(ahProgBar[0], "Tank empty");
    
75. 
    
76.     /* 动态显示数值*/
    ) h9 R! ~0 U. g2 W( d3 h. L4 U7 y
77.     for (; i>=0; i--) {
    3 {( O: q7 i1 r# ^2 ?
78.       PROGBAR_SetValue(ahProgBar[0], i);
    2 V3 I% ^+ f& ]! Y! W
79.       PROGBAR_SetValue(ahProgBar[1], 200-i);
    
80.       GUI_Delay(5);
    6 K) w6 S3 U, L& n9 {
81.     }
    - {* s' q$ g  V, T& D
82. 
    ( e. g" ]1 I7 \- N' d
83.     /* 设置进度条上面显示的文本*/
    
84. /* 动态显示数值效果一*/
    
85. PROGBAR_SetText(ahProgBar[0], "Any text...");
    7 m1 p  @/ e: H2 I' C$ `
86.     PROGBAR_SetTextAlign(ahProgBar[0], GUI_TA_LEFT);
    3 J8 {0 }8 _. r* \, Y& M
87. for (; i<=100; i++) {
    1 N; Y+ c- J  D
88.       PROGBAR_SetValue(ahProgBar[0], i);
    ( q4 Z+ F! f% U" n3 x
89.       PROGBAR_SetValue(ahProgBar[1], 200+i);
    6 G5 A' X9 H& M% u& `6 ?  \7 [5 f. k* X
90.       GUI_Delay(5);
    # ~" R. f9 d* Z5 A7 J
91.     }
    # G& K' m& \0 z* n
92. /* 动态显示数值效果二*/
    
93.     PROGBAR_SetTextAlign(ahProgBar[0], GUI_TA_RIGHT);
    + I9 Q" n& f$ Y8 x  v+ r
94. for (; i>=0; i--) {
    
95.       PROGBAR_SetValue(ahProgBar[0], i);
    
96.       PROGBAR_SetValue(ahProgBar[1], 400-i);
    / Z( }% U8 w4 ]; J5 T2 ?2 o
97.       GUI_Delay(5);
    + f' k4 S+ T1 O, ~; e, V
98.     }
    
99. /* 动态显示数值效果三*/
    
100.     PROGBAR_SetFont(ahProgBar[0], &GUI_FontComic18B_1);
     5 ?! X  u0 Y# {
101.     PROGBAR_SetText(ahProgBar[0], "Any font...");
     
102. for (; i<=100; i++) {
     & j9 B( x, P1 o$ T! L
103.       PROGBAR_SetValue(ahProgBar[0], i);
     7 V2 i2 w& L5 M) S( ~5 F$ G) C
104.       PROGBAR_SetValue(ahProgBar[1], 400+i);
     
105.       GUI_Delay(5);
     
106.     }
       a+ a! Q1 G( ~
107.     GUI_Delay(500);
     
108. 
     1 y; ?/ N, \  i5 W& z4 D
109.   }
     
110. }
     ! e; Y/ F% C0 k/ G8 ?, O- D" l) m
111. 
     ( q1 }2 G4 x5 Z6 h
112. /*******************************************************************
     6 S; [6 G5 D  b* D# W5 [
113. *
     
114. *       MainTask
     
115. *
     
116. *       Demonstrates the use of the PROGBAR widget
     
117. *
     
118. ********************************************************************
     
119. */
     $ I0 x6 @0 {+ D3 r4 ?1 l5 ]  E
120. 
     
121. void MainTask(void) {
     ( s0 q1 v  m2 L# E
122.   GUI_Init();
     
123.   while (1) {
     
124.     _DemoProgBar();
     ; P) g7 A$ ~# K: u1 P' T8 s
125.   }
     
126. }

复制代码

实际显示效果如下：

52.3 使用uCGUIBulder建立进度条控件

    用uCGUIBulder4.0建立如下界面（480*272分辨率）：

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

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

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

52.4 总结

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

+ d/ y. N. Q+ {) _8 }

顶一下！

谢谢分享，收藏一下

我一直在用ucgui3.98，但是做出来的效果都不那么立体，勉强称作显示。
问一下设置肤色后立体了好多，这都是GUIbuilder4.0 建立的吗？？

爝火燃回春浩浩 发表于 2015-3-12 12:49
4 D) e' q4 O, U5 u我一直在用ucgui3.98，但是做出来的效果都不那么立体，勉强称作显示。
: h# V4 N$ a5 j5 z0 O9 K" b5 n问一下设置肤色后立体了好多，这都是 ...

0 B# A7 @* K5 u4 a$ Y9 ?4 L! q" [建议使用emwin自己的GUIBulder，不过这些仅仅用于界面排版还行，别的还得手动调试。

谢谢分享啊