Android 兩種自定義ProgressBar

橫向的ProgressBar

在res下建立drawable文件夾，新建文件drawable/progressbar_color.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 
    <!-- 背景  gradient是漸變,corners定義的是圓角 -->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="10dp" />
 
            <solid android:color="#ffffff" />
        </shape>
    </item>
    <!-- 第二條進度條顏色 -->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="10dip" />
 
                <gradient
                    android:angle="90.0"
                    android:centerColor="#ac6079"
                    android:centerY="0.45"
                    android:endColor="#6c213a"
                    android:startColor="#e71a5e" />
            </shape>
        </clip>
    </item>
    <!-- 進度條 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="10dip" />
 
                <solid android:color="#FF8080" />
            </shape>
        </clip>
    </item>
 
</layer-list>

而後在佈局中引用就能夠了。

activity_main.xml

<ProgressBar 
        android:id="@+id/my_progress"
        android:layout_width="match_parent"
        android:layout_height="12dp"
        android:max="100"
        android:progress="40"
        android:secondaryProgress="70"
        style="?android:attr/progressBarStyleHorizontal"
        android:progressDrawable="@drawable/progressbar_color"/>

圓形的ProgressBar

自定義圓形的ProgressBar

　　效果圖：

　　圓形ProgressBar的樣式主要有如下幾個，咱們這裏以progressBarStyleLarge爲例進行樣式的修改，其餘的相似。

<ProgressBar　　android:layout_width="wrap_content"  　　android:layout_height="wrap_content"　　style="?android:attr/progressBarStyleLarge"/>

　首先看一下style="?android:attr/progressBarStyleLarge"的源碼，在 \frameworks\base\core\res\res\values\styles.xml

<style name="Widget.ProgressBar.Large">
　　<item name="android:indeterminateDrawable">@android:drawable/progress_large_white</item>
　　<item name="android:minWidth">76dip</item>
　　<item name="android:maxWidth">76dip</item>
　　<item name="android:minHeight">76dip</item>
　　<item name="android:maxHeight">76dip</item>
</style>

　　看到這一行<item name="android:indeterminateDrawable">@android :drawable/progress_large_white</item>有木有，咱們去看一下它的源碼，在 \frameworks\base\core\res\res\drawable\progress_large_white.xml

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/spinner_white_76"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromDegrees="0"
    android:toDegrees="360" />

　看到這一行 android:drawable="@drawable/spinner_white_76" 咱們就明白了，原來它在這裏放了一張圖片，進行旋轉。

　　接下來我定義本身的ProgressBarStyle：

　　首先咱們先找一張圖片加入咱們的項目中（如一開始的效果圖片），而後在drawable下新建progress_large.xml文件

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/progress_large"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360" />

　在 \value\style.xml中定義myProgressBarStyleLarge

<style name="myProgressBarStyleLarge" >
　　<item name="android:indeterminateDrawable">@drawable/progress_large</item>
　　<item name="android:minWidth">76dip</item>
　　<item name="android:maxWidth">76dip</item>
　　<item name="android:minHeight">76dip</item>
　　<item name="android:maxHeight">76dip</item>
</style>

　最後在ProgressBar中使用咱們本身定義的style，android:indeterminateDuration="700"指定圖片旋轉的速度，這樣咱們就能夠根據本身的須要來定義ProgressBar的樣式。

<ProgressBar
　　style="@style/myProgressBarStyleLarge"
　　android:layout_width="wrap_content"
　　android:layout_height="wrap_content"
　　android:indeterminateDuration="700" />

上面是經過一張圖片填充android:indeterminateDrawable，咱們也能夠定義一個動畫或者自定義顏色來實現，跟圖片的用法同樣：

　　定義res/anim/progress_large_loading.xml以下：

<?xml version="1.0" encoding="UTF-8"?>  
<animation-list android:oneshot="false"  
　　xmlns:android="http://schemas.android.com/apk/res/android">  
　　<item android:duration="100" android:drawable="@drawable/loading_1" />  
　　<item android:duration="100" android:drawable="@drawable/loading_2" />  
　　<item android:duration="100" android:drawable="@drawable/loading_3" />  
　　<item android:duration="100" android:drawable="@drawable/loading_4" />  
　　<item android:duration="100" android:drawable="@drawable/loading_5" />  
　　<item android:duration="100" android:drawable="@drawable/loading_6" />
</animation-list>

　在咱們定義的style中引入<item name="android:indeterminateDrawable">@anim/progress_large_loading</item>

　　定義res/drawable/progress_large_shape.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="8"  
　　　　android:useLevel="false" >  
　　　　<gradient  
　　　　　　android:centerColor="#FFFFFF"  
　　　　　　android:centerY="0.50"  
　　　　　　android:endColor="#1E90FF"  
　　　　　　android:startColor="#000000"  
　　　　　　android:type="sweep"  
　　　　　　android:useLevel="false" />  
　　</shape>  
</rotate>

　在咱們定義的style中引入

<item name="android:indeterminateDrawable">@drawable/progress_large_shape</item>