【AWTK使用經(jīng)驗】如何設(shè)計立體電池進(jìn)度條？

AWTK是基于C語言開發(fā)的跨平臺GUI框架?！禔WTK使用經(jīng)驗》系列文章將介紹開發(fā)AWTK過程中一些常見問題與解決方案，例如：如何加載外部資源？如何設(shè)計自定義進(jìn)度條？這些都會在系列文章進(jìn)行解答。

如何設(shè)計立體電池進(jìn)度條

在AWTK提供的進(jìn)度條控件默認(rèn)樣式是比較簡單的平面進(jìn)度條，而在實際開發(fā)過程中可能用到需要特殊樣式的進(jìn)度條，比如不規(guī)則進(jìn)度條、分段式進(jìn)度條以及立體進(jìn)度條等。本章節(jié)將以立體電池進(jìn)度條為例子介紹如何開發(fā)其它樣式的進(jìn)度條。

圖1電池進(jìn)度條效果圖

對于上面提到的特殊樣式進(jìn)度條，大多可以直接在progress_bar控件中使用前景圖片和后景圖片結(jié)合的方式來實現(xiàn)。
首先要準(zhǔn)備一下圖片素材，一般準(zhǔn)備兩張圖片素材，一張是進(jìn)度條值為0的圖片，另一張是進(jìn)度條值為100的圖片。注意兩張圖片尺寸需要一樣，圖片尺寸會直接影響進(jìn)度條控件的大小。圖2進(jìn)度條值為0和100的圖片素材

在AWTK Designer中拖拽出一個進(jìn)度條progress_bar控件，將它的背景顏色bg_color、前景fg_color設(shè)置為透明，并且將進(jìn)度條控件的寬高設(shè)置為圖片的寬高。圖3設(shè)置progress_bar控件前背景顏色接著是設(shè)置progress_bar控件的前背景圖片：將進(jìn)度條值為0的圖片設(shè)置成背景圖片bg_image；將進(jìn)度條值為100的圖片設(shè)置成前景圖片fg_image。同時，設(shè)置背景圖片顯示方式bg_image_draw_type與前景圖片顯示方式fg_image_draw_type都為default顯示方式。最終得出的控件效果圖如下：圖4 progress_bar效果圖

測試進(jìn)度條效果

在完成progress_bar控件的設(shè)置之后，接下來可以測試一下它的效果。選中progress_bar控件，并為其添加循環(huán)播放的值動畫，即可看到進(jìn)度條實際播放的效果。
圖5 progress_bar動畫運行效果圖其它樣式的進(jìn)度條如分段式進(jìn)度條也是可以用類似的辦法實現(xiàn)，準(zhǔn)備兩張進(jìn)度條值為0與值為100的圖片，然后設(shè)置到progress_bar控件樣式中，最后模擬運行查看效果即可。