1. 程式人生 > >Android Material Design 進度條 自定義進度條樣式

Android Material Design 進度條 自定義進度條樣式

Material Design 進度條

圓形進度條

建立

設定主題為 Theme.AppCompat.Light.NoActionBar
或 @android:style/Theme.Material.Light

修改顏色

新增indeterminateTint屬性為顏色
設定indeterminateTintMode屬性 為 src_atop

    <ProgressBar
            android:indeterminateTint="#FFFF0000"
            android:indeterminateTintMode="src_atop"
android:layout_width="wrap_content" android:layout_height="wrap_content" />

橫向進度條

<android.support.v4.widget.ContentLoadingProgressBar
    android:indeterminate="false"
    android:id="@+id/pb5_progress_hololight"
    style="@android:style/Widget.Holo.Light.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
/>

進度指示模式

    android:indeterminate="false"

未知進度模式

    android:indeterminate="true"

樣式

標準,黃色進度條

style="@android:style/Widget.ProgressBar.Horizontal"

Holo進度條,支援4.0

style="@android:style/Widget.Holo.ProgressBar.Horizontal"

Material進度條,5.0以上

style="@android:style/Widget.Material.ProgressBar.Horizontal"

自定義樣式

    <ProgressBar   
        android:id="@+id/progressbar"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:indeterminateDrawable="@drawable/progressbar"  
        />
progressbar.xml
<?xml version="1.0" encoding="utf-8"?>  
<animated-rotate  
        xmlns:android="http://schemas.android.com/apk/res/android"  
         android:pivotX="50%" android:pivotY="50%"      
         android:fromDegrees="0"    
         android:toDegrees="360">  

        <shape   
            android:shape="ring"   
            android:innerRadiusRatio="3"    
            android:thicknessRatio="8"   
            android:useLevel="false">    
            <gradient   
                android:type="sweep"   
                android:useLevel="false"    
                android:startColor="#6BD3FF"           
                android:centerColor="#FF7121"    
                android:centerY="0.50"   
                android:endColor="#FFFF00" />    
        </shape>    

</animated-rotate>