BloggerAds

2012年10月16日 星期二

Android - ProcessBar 動態改變顏色

先看完成品:


 


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不可見且不占用 布局空間
}