先看完成品:

 

ProgressBar  

先從改變顏色開始

1.先在drawable裡新增一個xml檔

內容如下(此例子為 drawable/processbar_style.xml ):

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<!-- 設置背景圖檔 -->
<item android:id="@android:id/background" android:drawable="@drawable/progressbar_back" />

<!-- 設置progress條圖檔 -->
<item android:id="@android:id/progress" android:drawable="@drawable/progressbar_green" /> 


</layer-list>

2.然後在有ProcessBar 的layout裡設定


<ProgressBar
android:id="@+id/statistics_progressBar_green"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="150dip"
android:max="100"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/statistics_button_update"
android:layout_toRightOf="@+id/statistics_button_update"
android:progressDrawable="@drawable/processbar_style"
/>

(重點只有紅色那行)


那如果要動態設定多種顏色呢?

例如我想在不滿70%時綠色  70%-90% 黃色 90%以後紅色該怎麼設定?

因為如果在程式碼裡動態設定ProgressBar的setProgressDrawable屬性

會有樣式變奇怪的問題

所以參考了網路的方法 那就是 ....... 設多個ProcessBar!!!

然後程式中再動態將不要的progress隱藏

所以以我來說我需要3種變化

所以我在drawable裡新增了三個一樣的xml 只是裡面的Progress圖檔有換

三個分別叫做

processbar_style_green

processbar_style_yellow

processbar_style_red

然後在layout.xml裡新增三個重疊在一起的ProgressBar

<ProgressBar
android:id="@+id/statistics_progressBar_green"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="150dip"
android:max="100"
android:layout_height="wrap_content"
android:progressDrawable="@drawable/processbar_style_green"
/>

<ProgressBar
android:id="@+id/statistics_progressBar_yellow"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="150dip"
android:max="100"
android:layout_height="wrap_content"
android:progressDrawable="@drawable/processbar_style_yellow"
/>

<ProgressBar
android:id="@+id/statistics_progressBar_red"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="150dip"
android:max="100"
android:layout_height="wrap_content"
android:progressDrawable="@drawable/processbar_style_red"
/>


在程式中依照判斷內容動態設定哪個ProgressBar顯示

 

if((int)dischargeTemp>70&&(int)dischargeTemp<90){//大於70 轉黃色警告processBar
     

     processBar_Y.setProgress((int)dischargeTemp);
     processBar_G.setVisibility(4);//0可見, 4不可見 ,8不可見且不占用 布局空間
     processBar_R.setVisibility(4);//0可見, 4不可見 ,8不可見且不占用 布局空間
}else if((int)dischargeTemp>=90){//大於90 轉紅色警告processBar
     

     processBar_R.setProgress((int)dischargeTemp);
     processBar_Y.setVisibility(4);//0可見, 4不可見 ,8不可見且不占用 布局空間
     processBar_G.setVisibility(4);//0可見, 4不可見 ,8不可見且不占用 布局空間
}else{//剩下的綠色
     

     processBar_G.setProgress((int)dischargeTemp);
     processBar_Y.setVisibility(4);//0可見, 4不可見 ,8不可見且不占用 布局空間
     processBar_R.setVisibility(4);//0可見, 4不可見 ,8不可見且不占用 布局空間
}




, ,
創作者介紹

Mazs's Notes

cookiesp 發表在 痞客邦 PIXNET 留言(3) 人氣()


留言列表 (3)

發表留言
  • 初學者
  • 您好,我是用兩個ProcessBar
    從綠色變紅色時,bar不會顯示出來
    綠色顯示是ok的,只是要在轉換成紅色時,沒有任何的bar顯示出來,變成空的
    請問大大有什麼解決辦法嗎??
  • cookiesp
  • drawable/processbar_style.xml 有設定好嗎?
    先成功一個processbar後
    再把兩個processbar重疊
    然後在程式裡控制什麼時候綠色隱藏 什麼時候紅色隱藏

    EX:
    if(%數>90){//大於90 紅色警告
    processBar_R.setProgress(%數);//設定紅色%數
    processBar_G.setVisibility(4);//將綠色隱藏
    }else {//小於等於90為綠色processBar
    processBar_G.setProgress(%數);//設定綠色%數
    processBar_R.setVisibility(4);//將紅色隱藏
    }

  • 過客
  • 您好,我有一個相關的問題。
    如果我要使用的是seekbar
    能否seekbar調整數值時"整個"seekbar的顏色也跟著調整呢?
    我有試過調整xml顏色配置 但他不會隨著數值調整而變化
    謝謝