【AWTK使用經驗】如何設計立體電池進度條？

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

如何設計立體電池進度條

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

圖1電池進度條效果圖

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

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

測試進度條效果

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