ProgressBar是一個非常重要組件。通常用于向用戶顯示耗時操作完成的百分比。主要包括水平和圓形兩種類型。講解之前首先來講一下樣式屬性設置,這個在自定義里面是核心部分。
本文主要介紹ProgressBar的屬性里面的 progressDrawable 和 indeterminateDrawable
一、常用屬性
(一)關于style屬性設置:安卓支持幾種風格的進度條,通過style屬性可以為ProgressBar設置指定風格,該屬性可支持如下幾個屬性值:
- 安卓styles.xml里面的 8個,這8個兼容不同系統版本,一般都用這些style樣式用的多
屬性值 | 屬性的含義 |
---|---|
style="@android:style/Widget.ProgressBar" | |
style="@android:style/Widget.ProgressBar.Large" | 大環形進度條 |
style="@android:style/Widget.ProgressBar.Small" | 小環形進度條 |
style="@android:style/Widget.ProgressBar.Inverse" | 普通大小的環形進度條 |
style="@android:style/Widget.ProgressBar.Large.Inverse" | 大環形進度條 |
style="@android:style/Widget.ProgressBar.Small.Inverse" | 小環形進度條 |
style="@android:style/Widget.ProgressBar.Small.Title" | 標題欄環形進度條 |
style="@android:style/Widget.ProgressBar.Horizontal" | 水平進度條 |
<style name="Widget.ProgressBar">
<item name="indeterminateOnly">true</item>
<item name="indeterminateDrawable">@drawable/progress_medium_white</item>
<item name="indeterminateBehavior">repeat</item>
<item name="indeterminateDuration">3500</item>
<item name="minWidth">48dip</item>
<item name="maxWidth">48dip</item>
<item name="minHeight">48dip</item>
<item name="maxHeight">48dip</item>
<item name="mirrorForRtl">false</item>
</style>
<style name="Widget.ProgressBar.Large">
<item name="indeterminateDrawable">@drawable/progress_large_white</item>
<item name="minWidth">76dip</item>
<item name="maxWidth">76dip</item>
<item name="minHeight">76dip</item>
<item name="maxHeight">76dip</item>
</style>
<style name="Widget.ProgressBar.Small">
<item name="indeterminateDrawable">@drawable/progress_small_white</item>
<item name="minWidth">16dip</item>
<item name="maxWidth">16dip</item>
<item name="minHeight">16dip</item>
<item name="maxHeight">16dip</item>
</style>
<style name="Widget.ProgressBar.Inverse">
<item name="indeterminateDrawable">@drawable/progress_medium</item>
</style>
<style name="Widget.ProgressBar.Large.Inverse">
<item name="indeterminateDrawable">@drawable/progress_large</item>
</style>
<style name="Widget.ProgressBar.Small.Inverse">
<item name="indeterminateDrawable">@drawable/progress_small</item>
</style>
<style name="Widget.ProgressBar.Small.Title">
<item name="indeterminateDrawable">@drawable/progress_small_titlebar</item>
</style>
<style name="Widget.ProgressBar.Horizontal">
<item name="indeterminateOnly">false</item>
<item name="progressDrawable">@drawable/progress_horizontal</item>
<item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item>
<item name="minHeight">20dip</item>
<item name="maxHeight">20dip</item>
<item name="mirrorForRtl">true</item>
</style>
2.styles_holo.xml里面的 16個,其中Widget.Holo.開頭的有8個,Widget.Holo.Light.開頭的有8個
----------------------------------------------- Widget.Holo.開頭的 ------------------------------------------------------
<style name="Widget.Holo.ProgressBar" parent="Widget.ProgressBar">
<item name="indeterminateDrawable">@drawable/progress_medium_holo</item>
</style>
<style name="Widget.Holo.ProgressBar.Horizontal" parent="Widget.ProgressBar.Horizontal">
<item name="progressDrawable">@drawable/progress_horizontal_holo_dark</item>
<item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal_holo</item>
<item name="minHeight">16dip</item>
<item name="maxHeight">16dip</item>
</style>
<style name="Widget.Holo.ProgressBar.Small" parent="Widget.ProgressBar.Small">
<item name="indeterminateDrawable">@drawable/progress_small_holo</item>
</style>
<style name="Widget.Holo.ProgressBar.Small.Title" />
<style name="Widget.Holo.ProgressBar.Large" parent="Widget.ProgressBar.Large">
<item name="indeterminateDrawable">@drawable/progress_large_holo</item>
</style>
<style name="Widget.Holo.ProgressBar.Inverse" />
<style name="Widget.Holo.ProgressBar.Small.Inverse" />
<style name="Widget.Holo.ProgressBar.Large.Inverse" />
--------------------------------------------- Widget.Holo.Light.開頭的 ----------------------------------------------------
<style name="Widget.Holo.Light.ProgressBar" parent="Widget.Holo.ProgressBar" />
<style name="Widget.Holo.Light.ProgressBar.Horizontal" parent="Widget.Holo.ProgressBar.Horizontal">
<item name="progressDrawable">@drawable/progress_horizontal_holo_light</item>
</style>
<style name="Widget.Holo.Light.ProgressBar.Small" parent="Widget.Holo.ProgressBar.Small" />
<style name="Widget.Holo.Light.ProgressBar.Small.Title" parent="Widget.Holo.ProgressBar.Small.Title" />
<style name="Widget.Holo.Light.ProgressBar.Large" parent="Widget.Holo.ProgressBar.Large" />
<style name="Widget.Holo.Light.ProgressBar.Inverse" parent="Widget.Holo.ProgressBar.Inverse" />
<style name="Widget.Holo.Light.ProgressBar.Small.Inverse" parent="Widget.Holo.ProgressBar.Small.Inverse" />
<style name="Widget.Holo.Light.ProgressBar.Large.Inverse" parent="Widget.Holo.ProgressBar.Large.Inverse" />
3.styles_material.xml里面的 16個,其中Widget.Material.開頭的有8個,Widget.Material.Light.開頭的有8個
----------------------------------------------- Widget.Material.開頭的 ------------------------------------------------------
<style name="Widget.Material.ProgressBar" parent="Widget.ProgressBar">
<item name="indeterminateDrawable">@drawable/progress_medium_material</item>
</style>
<style name="Widget.Material.ProgressBar.Inverse"/>
<style name="Widget.Material.ProgressBar.Horizontal" parent="Widget.ProgressBar.Horizontal">
<item name="progressDrawable">@drawable/progress_horizontal_material</item>
<item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal_material</item>
<item name="minHeight">16dip</item>
<item name="maxHeight">16dip</item>
</style>
<style name="Widget.Material.ProgressBar.Small" parent="Widget.ProgressBar.Small">
<item name="indeterminateDrawable">@drawable/progress_small_material</item>
</style>
<style name="Widget.Material.ProgressBar.Small.Inverse"/>
<style name="Widget.Material.ProgressBar.Small.Title"/>
<style name="Widget.Material.ProgressBar.Large" parent="Widget.ProgressBar.Large">
<item name="indeterminateDrawable">@drawable/progress_large_material</item>
</style>
<style name="Widget.Material.ProgressBar.Large.Inverse"/>
-------------------------------------------- Widget.Material.Light.開頭的 ---------------------------------------------------
<style name="Widget.Material.Light.ProgressBar" parent="Widget.Material.ProgressBar"/>
<style name="Widget.Material.Light.ProgressBar.Horizontal" parent="Widget.Material.ProgressBar.Horizontal"/>
<style name="Widget.Material.Light.ProgressBar.Small" parent="Widget.Material.ProgressBar.Small"/>
<style name="Widget.Material.Light.ProgressBar.Small.Title" parent="Widget.Material.ProgressBar.Small.Title"/>
<style name="Widget.Material.Light.ProgressBar.Large" parent="Widget.Material.ProgressBar.Large"/>
<style name="Widget.Material.Light.ProgressBar.Inverse" parent="Widget.Material.ProgressBar.Inverse"/>
<style name="Widget.Material.Light.ProgressBar.Small.Inverse" parent="Widget.Material.ProgressBar.Small.Inverse"/>
<style name="Widget.Material.Light.ProgressBar.Large.Inverse" parent="Widget.Material.ProgressBar.Large.Inverse"/>
4.styles_device_default.xml里面的13個,其中Widget.DeviceDefault.開頭的有5個,
Widget.DeviceDefault.Light.開頭的有8個。
------------------------------------------- Widget.DeviceDefault..開頭的 --------------------------------------------------
<style name="Widget.DeviceDefault.ProgressBar" parent="Widget.Material.ProgressBar"/>
<style name="Widget.DeviceDefault.ProgressBar.Horizontal" parent="Widget.Material.ProgressBar.Horizontal"/>
<style name="Widget.DeviceDefault.ProgressBar.Small" parent="Widget.Material.ProgressBar.Small"/>
<style name="Widget.DeviceDefault.ProgressBar.Small.Title" parent="Widget.Material.ProgressBar.Small.Title"/>
<style name="Widget.DeviceDefault.ProgressBar.Large" parent="Widget.Material.ProgressBar.Large"/>
---------------------------------------- Widget.DeviceDefault.Light.開頭的 -----------------------------------------------
<style name="Widget.DeviceDefault.Light.ProgressBar"
parent="Widget.Material.Light.ProgressBar"/>
<style name="Widget.DeviceDefault.Light.ProgressBar.Horizontal"
parent="Widget.Material.Light.ProgressBar.Horizontal"/>
<style name="Widget.DeviceDefault.Light.ProgressBar.Small"
parent="Widget.Material.Light.ProgressBar.Small"/>
<style name="Widget.DeviceDefault.Light.ProgressBar.Small.Title"
parent="Widget.Material.Light.ProgressBar.Small.Title"/>
<style name="Widget.DeviceDefault.Light.ProgressBar.Large"
parent="Widget.Material.Light.ProgressBar.Large"/>
<style name="Widget.DeviceDefault.Light.ProgressBar.Inverse"
parent="Widget.Material.Light.ProgressBar.Inverse"/>
<style name="Widget.DeviceDefault.Light.ProgressBar.Small.Inverse"
parent="Widget.Material.Light.ProgressBar.Small.Inverse"/>
<style name="Widget.DeviceDefault.Light.ProgressBar.Large.Inverse"
parent="Widget.Material.Light.ProgressBar.Large.Inverse"/>
(二)其他屬性
屬性值 | 描述 |
---|---|
android:max="" | 進度條最大值 |
android:progress="" | 進度條已完成值 |
android:secondaryProgress="" | 二級進度值,值介于0到max。該進度在主進度和背景之間。比如用于網絡播放視頻時,二級進度用于表示緩沖進度,主進度用于表示播放進度。 |
android:animationResolution | 超時的動畫幀之間的毫秒 ;必須是一個整數值,如“100”。(已經被舍棄了,現在都不用了。) |
android:progressDrawable="" | 設置進度條軌道對應的drawable對象 |
android:indeterminate="" | 是否允許使用不確定模式,該屬性設置為true,表示設置進度條不精確顯示進度,在不確定模式下,進度條動畫無限循環 |
android:indeterminateDrawable="" | 定義不確定模式是否可拉 |
android:indeterminateDuration="" | 時間不定的動畫 |
android:indeterminateBehavior="" | 定義當進度達到最大時,不確定模式的表現;該值必須為repeat或者cycle,repeat表示進度從0重新開始;cycle表示進度保持當前值,并且回到0 |
android:indeterminateOnly="" | 限制為不定模式 |
android:indeterminateTint="" | |
android:indeterminateTintMode="" |
二、水平的ProgressBar
1.首先是布局代碼:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#3C7793"
android:orientation="vertical">
<ProgressBar
android:id="@+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progress="0"
android:secondaryProgress="100"
android:progressDrawable="@drawable/progressbar_line" />
</LinearLayout>
2.再看drawable目錄下的progressbar_line.xml是怎么定義的:(第一個item是背景,第二個item是二級進度值,一般用于視頻的緩沖,最后一個是顯示的進度)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="0"
/>
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="0"
/>
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners
android:radius="5dip" />
<gradient
android:startColor="#80ff0000"
android:endColor="#8000ff00"
android:angle="0" />
</shape>
</clip>
</item>
</layer-list>
3.代碼里面控制進度的顯示,新建一個線程,重寫runnable,在run方法里面去模擬執行耗時操作,通過handler發消息給主線程,主線程拿到消息之后更新UI.
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.widget.ProgressBar;
public class MainActivity extends AppCompatActivity {
private ProgressBar progressBar1;
//在這里處理更新進度條
private Handler mHandler = new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what) {
case 0x0001:
progressBar1.setProgress(msg.arg1);
//如果進度小于100,則延遲100毫秒之后重復執行runnable
if(msg.arg1<100){
mHandler.postDelayed(r, 100);
}else{
//否則,都置零,線程重新執行
progressBar1.setProgress(0);
mHandler.post(r);
}
break;
}
}
};
Runnable r = new Runnable() {
int currentProgress = 0;
@Override
public void run() {
Message msg = new Message();
msg.what = 0x0001;
currentProgress = progressBar1.getProgress()+1;
progressBar1.setProgress(currentProgress);
msg.arg1 = currentProgress;
mHandler.sendMessage(msg);
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
progressBar1 = (ProgressBar) findViewById(R.id.progressBar1);
progressBar1.setProgressDrawable(getResources().getDrawable(R.drawable.progressbar_line));
if(progressBar1.getProgress() < progressBar1.getMax()){
// 把r加入到線程隊列,然后線程隊列里就開始執行runnable對象中的run()
mHandler.post(r);
}else{//不用的時候,就把r從線程隊列移除,這是一個小的性能優化
mHandler.removeCallbacks(r);
}
}
}
三、圓形的ProgressBar
1.先來看看布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#3C7793"
android:orientation="vertical">
<ProgressBar
android:id="@+id/loadProgressBar"
style="@android:style/Widget.ProgressBar"
android:layout_margin="10dp"
android:indeterminateDrawable="@drawable/progressbar_round"
android:layout_width="100dp"
android:layout_height="100dp" />
</LinearLayout>
2.再看看drawable目錄下的progressbar_round.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="10"
android:useLevel="false">
<gradient
android:centerColor="#FFFFFF"
android:centerY="0.50"
android:endColor="#FFFF00"
android:startColor="#00FFFF"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
效果圖如下:
下一篇我們重點講解如何寫一個View繼承ProgressBar,實現各種吊炸天的效果。