Android實現個人化的進度條_Android

1.案例效果圖

2.準備素材

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

3.原理

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

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

4.1 預設帶進度的進度條，如下圖

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

注意：關鍵是style屬性在起作用

4.2 找到樣式定義的位置

滑鼠放在style屬性值上，按下Ctrl鍵，出現超連結，點擊超連結跳轉到樣式的定義位置

樣式定義的內容如下

重點研究：

android:progressDrawable：進度條的樣式

@android:drawable/progress_horizontal：樣式定義的檔案

在android-sdk-windows\platforms\android-14\data\res目下搜尋progress_horizontal.xml檔案，搜尋結果如下：

開啟progress_horizontal.xml檔案，內容如下

<layer-listxmlns:android="http://schemas.android.com/apk/res/android"> <itemandroid:id="@android:id/background"><shape><cornersandroid:radius="5dip"/><gradientandroid: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"/><gradientandroid: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"/><gradientandroid: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">：定義進度條的背景樣式

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

<item android:id="@android:id/progress">：進度條的樣式

思考：如果我想做垂直進度條，怎麼辦了？

關鍵在clip元素的屬性上做修改

<clipandroid:clipOrientation="vertical" 定義滾動的方向 vertical為垂直方向android:drawable="@drawable/progress1" 定義進度的圖片android:gravity="bottom" > 定義進度的開始位置</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"><clipandroid:clipOrientation="vertical"android:drawable="@drawable/progress1"android:gravity="bottom"></clip></item></layer-list>

6.應用自訂的樣式

<Buttonandroid:id="@+id/btStart"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_marginTop="150dp"android:text="開始"/><ProgressBarandroid: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" /> <!-- 在此屬性上應用 --><TextViewandroid:id="@+id/txtProgress"android:layout_width="wrap_content"android:layout_height="wrap_content"/>

7.點擊按鈕類比進度滾動的效果

publicclass ProgressActivity extends Activity { ProgressBar pb = null;TextView txtProgress;Handler handler = new Handler();@Overridepublicvoid 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);//顯示進度btnStart.setOnClickListener(new OnClickListener() {//按鈕點擊事件publicvoid onClick(View v) {new Thread(new Runnable() {//建立並啟動線程，使用線程執行類比的任務publicvoid run() {for (inti = 0; i < 100; i++) { //迴圈100遍try {handler.post(new Runnable() { //更新介面的資料publicvoid run() {pb.incrementProgressBy(1);//增加進度txtProgress.setText(pb.getProgress() + "%");//顯示完成的進度}});Thread.sleep(100);} catch (InterruptedException e) {}}}}).start();}});}}

以上所述是小編給大家介紹的Android實現個人化的進度條，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！