1. 程式人生 > >Android中自定義ProgressBar的樣式

Android中自定義ProgressBar的樣式

  • 如果想快速獲取水平進度條顯示操作,直接進入第四步和第六步操作就可以了!!
    -
  • 首先可以去sdk中檢視
    • sdk1\platforms\android-23\data\res\values,中的styles中查詢原始碼
    • progressbar
<style name="Widget.ProgressBar.Horizontal">
//這裡的indeterminateOnly 是否顯示進度條:true意思不顯示,false顯示
<item name="indeterminateOnly">false</item>
<item name="progressDrawable"
>@drawable/progress_horizontal</item> //這裡的indeterminateDrawable:這個是樣式,在drawable中宣告一個xxx.xml檔案,然後再progressbar控制元件中覆蓋掉就行了!! <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item> <item name="minHeight">20dip</item> <item name="maxHeight"
>20dip</item> <item name="mirrorForRtl">true</item> </style>
  • drawable檔案下建立一個progressbar_drawable.xml
    • 這裡的animated-rotate:是旋轉的動畫,時間不寫就是預設的100
    • progressbar_img這裡就是進度條的圖片,自己隨便搞!!!
    • pivotX/Y :50%代表自身旋轉
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/progressbar_img" android:pivotX="50%" android:pivotY="50%" >
</animated-rotate>
  • 然後再progressbar的控制元件中引用
    • 覆蓋indeterminateDrawable:引用自己定義的progressbar_drawable.xml檔案
<ProgressBar
            android:id="@+id/pb_loading"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
 android:indeterminateDrawable="@drawable/progressbar_drawable"
            />
  • 下面來介紹自定義水平線的 有進度的進度條
  • 看完後你就明白為嘛自己定義的進度條設定高度了,但是進度條裡面的進度顯示沒有變化!!!
  • 第一步:來看android原本樣式的進度條
<style name="Widget.ProgressBar.Horizontal">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
        <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
        <item name="android:minHeight">20dip</item>
        <item name="android:maxHeight">20dip</item>
    </style>
  • 第二步:看indeterminateDrawable這個屬性
    • 這個是設定進度條的動畫效果的,設定圖片來輪播,就是動畫效果的,看下原始碼 。。這個想自己搞了可以設定一下
<animation-list
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:oneshot="false">
    <item android:drawable="@drawable/progressbar_indeterminate1" android:duration="200" />
    <item android:drawable="@drawable/progressbar_indeterminate2" android:duration="200" />
    <item android:drawable="@drawable/progressbar_indeterminate3" android:duration="200" />
</animation-list>
  • 第三步:那個maxHeight 高度已經定死了,所以你設定高度的時候是不能讓進度變高的,這個也可以不用管
  • 第四步:progressDrawable 這個就是主要的了,通過這個就可以給你進度條設定高度了
    • 先來看下原始碼(原始碼不可怕,有的拿來用就行,初級的我們不用看懂…當然我也不懂0.0),其實可以拿來自己用的,改改東西就行了——
    • 這個是圖層,這個是在drawable裡面的xxx.xml中建立的
    • 快速祕籍,直接在drawable中建立xml檔案,複製下面程式碼
<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="270"
            />
        </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="270"
                />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                        android:startColor="#ffffd300"
                        android:centerColor="#ffffb600"
                        android:centerY="0.75"
                        android:endColor="#ffffcb00"
                        android:angle="270"
                />
            </shape>
        </clip>
    </item>

</layer-list>
  • 第五步:這裡面有3個item
    • item1:是最底層的總進度顏色顯示
    • item2:是緩衝的進度的顏色顯示
    • item3:是正在進行的進度的顏色顯示
    • 這就類似於FrameLayout 的佈局,最下面的item顯示在介面的上面!!
    • item裡面的內容,自己需要用的時候只需要改下顏色就可!!
  • 第六步:在佈局中呼叫
    • style:這個肯定要加,水平顯示的
    • progressDrawable:直接把上面的圖層檔案拿到這裡這個就是最主要的操作了,有了這個就可以設定高度了!
    • 快速祕籍,在佈局中progressDrawable屬性引用上面複製進去的xml檔案,就可以設定高度了!
<ProgressBar
        android:id="@+id/pb_loading"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        style="?android:attr/progressBarStyleHorizontal" 
             android:progressDrawable="@drawable/progressbar_custom"
        android:progress="50"
        />
  • 這樣就是結果了!

這裡寫圖片描述

  • 如果想更改顏色,就進去圖層檔案中吧顏色該下就行了
  • 下面是自定義進度條是將上面第四步進行修改的操作,將裡面的顏色改成自己想要的圖片樣式

    • first:準備進度條的圖片
      -
      這裡寫圖片描述

    • second:在drawable中建立xml檔案,裡面還是圖層樣式

    • 注意 裡面的3個item的id一定要寫的給我的一樣,因為android會找著3個名字來顯示進度條,如果不一致,進度條會建立失敗的!!
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <bitmap android:src="@drawable/progress_item2"
                android:gravity="center" />
    </item>

    <item android:id="@android:id/secondaryProgress">
        <bitmap android:src="@drawable/progress_item1"
                android:gravity="center" />
    </item>

    <item android:id="@android:id/progress" >
        <bitmap android:src="@drawable/progress_item1"
                android:gravity="center" />
    </item>
</layer-list>
  • Third:還是在佈局中選擇progressDrawable屬性設定進去
<ProgressBar
        android:id="@+id/pb_loading"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        style="?android:attr/progressBarStyleHorizontal"
        android:progressDrawable="@drawable/progressbar_custom"
        android:progress="50"
        android:layout_marginTop="10dp"
        />
  • end:圖片就是我們下面第二個顯示的,第一個是原生的0.0

這裡寫圖片描述