Android實(shí)現(xiàn)個(gè)性化的進(jìn)度條

更新時(shí)間：2016年07月20日 09:47:18 作者：2778085001

這篇文章主要介紹了Android實(shí)現(xiàn)個(gè)性化的進(jìn)度條的相關(guān)資料,需要的朋友可以參考下

1.案例效果圖

2.準(zhǔn)備素材

progress1.png(78*78) progress2.png(78*78)

3.原理

采用一張圖片作為ProgressBar的背景圖片(一般采用顏色比較淺的)。另一張是進(jìn)度條的圖片(一般采用顏色比較深的圖片)。進(jìn)度在滾動(dòng)時(shí)：進(jìn)度圖片逐步顯示，背景圖片逐步隱藏，達(dá)到上面的效果。

4.靈感來自Android控件提供的源碼

4.1 默認(rèn)帶進(jìn)度的進(jìn)度條，如下圖

<ProgressBar
android:id="@+id/progressBar2"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="268dp"
android:layout_height="wrap_content"
android:progress="45" />

注意：關(guān)鍵是style屬性在起作用

4.2 找到樣式定義的位置

鼠標(biāo)放在style屬性值上，按下Ctrl鍵，出現(xiàn)超鏈接，點(diǎn)擊超鏈接跳轉(zhuǎn)到樣式的定義位置

樣式定義的內(nèi)容如下

重點(diǎn)研究：

android:progressDrawable：進(jìn)度條的樣式

@android:drawable/progress_horizontal：樣式定義的文件

在android-sdk-windows\platforms\android-14\data\res目下搜索progress_horizontal.xml文件，搜索結(jié)果如下：

打開progress_horizontal.xml文件，內(nèi)容如下

<layer-listxmlns:android="http://schemas.android.com/apk/res/android"> 
<itemandroid:id="@android:id/background">
<shape>
<cornersandroid:radius="5dip"/>
<gradient
android:startColor="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="270"
/>
</shape>
</item> 
<itemandroid:id="@android:id/secondaryProgress">
<clip>
<shape>
<cornersandroid:radius="5dip"/>
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="270"
/>
</shape>
</clip>
</item> 
<itemandroid:id="@android:id/progress">
<clip>
<shape>
<cornersandroid:radius="5dip"/>
<gradient
android:startColor="#ffffd300"
android:centerColor="#ffffb600"
android:centerY="0.75"
android:endColor="#ffffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>

釋義：

<item android:id="@android:id/background">：定義進(jìn)度條的背景樣式

<item android:id="@android:id/secondaryProgress">：輔助進(jìn)度條的樣式

<item android:id="@android:id/progress">：進(jìn)度條的樣式

思考：如果我想做垂直進(jìn)度條，怎么辦了？

關(guān)鍵在clip元素的屬性上做修改

<clip
android:clipOrientation="vertical" 定義滾動(dòng)的方向 vertical為垂直方向
android:drawable="@drawable/progress1" 定義進(jìn)度的圖片
android:gravity="bottom" > 定義進(jìn)度的開始位置
</clip>

5.定義樣式文件progress_vertical.xml

progress_vertical.xml文件代碼如下

<?xmlversion="1.0"encoding="utf-8"?>
<layer-listxmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:id="@android:id/progress">
<clip
android:clipOrientation="vertical"
android:drawable="@drawable/progress1"
android:gravity="bottom">
</clip>
</item>
</layer-list>

6.應(yīng)用自定義的樣式

<Button
android:id="@+id/btStart"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="150dp"
android:text="開始"/>
<ProgressBar
android:id="@+id/pbPic"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="50dp"
android:layout_height="68dp"
android:background="@drawable/progress2"
android:max="100"
android:progress="0"
android:progressDrawable="@drawable/progress_vertical" /> <!-- 在此屬性上應(yīng)用 -->
<TextView
android:id="@+id/txtProgress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

7.點(diǎn)擊按鈕模擬進(jìn)度滾動(dòng)的效果

publicclass ProgressActivity extends Activity { 
ProgressBar pb = null;
TextView txtProgress;
Handler handler = new Handler();
@Override
publicvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
System.out.println("主題=" + getTheme() + "");
pb = (ProgressBar) findViewById(R.id.pbPic);
Button btnStart = (Button) findViewById(R.id.btStart);//按鈕
txtProgress = (TextView) findViewById(R.id.txtProgress);//顯示進(jìn)度
btnStart.setOnClickListener(new OnClickListener() {//按鈕點(diǎn)擊事件
publicvoid onClick(View v) {
new Thread(new Runnable() {//創(chuàng)建并啟動(dòng)線程，使用線程執(zhí)行模擬的任務(wù)
publicvoid run() {
for (inti = 0; i < 100; i++) { //循環(huán)100遍
try {
handler.post(new Runnable() { //更新界面的數(shù)據(jù)
publicvoid run() {
pb.incrementProgressBy(1);//增加進(jìn)度
txtProgress.setText(pb.getProgress() + "%");//顯示完成的進(jìn)度
}
});
Thread.sleep(100);
} catch (InterruptedException e) {
}
}
}
}).start();
}
});
}
}

以上所述是小編給大家介紹的Android實(shí)現(xiàn)個(gè)性化的進(jìn)度條，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: