Android 自定义ProgressBar

ProgressBar 大家都会经常用到，这里讲下简单自定义样式。

一、水平方向

 

<ProgressBar
            android:id="@id/id_progress_bar"
            style="@style/record_video_Progress_horizontal"
            android:layout_width="match_parent"
            android:layout_height="6dp"
            android:max="100" />

 

 

<style name="record_video_Progress_horizontal">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@drawable/record_video_progressbar_horizontal</item><!-- progress_horizontal -->
        <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
        <item name="android:minHeight">10dip</item>
        <item name="android:maxHeight">10dip</item>
    </style>

关键在于修改“android:progressDrawable”，里面也可以设置圆角，如下：

 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="0dip" />
            <gradient
                android:angle="270"
                android:centerColor="@color/scroll_tab_title_pressed"
                android:centerY="0.75"
                android:endColor="@color/scroll_tab_title_pressed"
                android:startColor="@color/scroll_tab_title_pressed" />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="0dip" />
                <gradient
                    android:angle="270"
                    android:centerColor="@color/white"
                    android:centerY="0.75"
                    android:endColor="@color/white"
                    android:startColor="@color/white" />
            </shape>
        </clip>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="0dip" />
                <gradient
                    android:angle="270"
                    android:centerColor="@color/primary_text_color_green"
                    android:centerY="0.75"
                    android:endColor="@color/primary_text_color_green"
                    android:startColor="@color/primary_text_color_green" />
            </shape>
        </clip>
    </item>

</layer-list>

效果如下：

 

 

二、圆形

系统圆形的progressbar没有水平方向的那种带进度值，这里说下根据系统原理自定义圆形progressbar。

1、通过自定义颜色实现，res/drawable/progressbar_drawable.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>

 

 

2、使用一张图片进行自定义，res/drawable/progressbar_drawable.xml如下：

 

 

 

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

 

progress图片用一张旋转起来好看的图片就行了，效果如下：

3、使用动画进行自定义，res/drawable/progressbar_drawable.xml如下：

 

<?xml version="1.0" encoding="UTF-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
    <item android:drawable="@drawable/app_loading_001" android:duration="150" />
    <item android:drawable="@drawable/app_loading_002" android:duration="150" />
    <item android:drawable="@drawable/app_loading_003" android:duration="150" />
    <item android:drawable="@drawable/app_loading_004" android:duration="150" />
    <item android:drawable="@drawable/app_loading_005" android:duration="150" />
    <item android:drawable="@drawable/app_loading_006" android:duration="150" />
    <item android:drawable="@drawable/app_loading_007" android:duration="150" />
</animation-list>

 

android:oneshot="false"，true：表示循环一次，false：表示无线循环

@drawable/app_loading_001，表示一张图片，如下：

 

 

 

最后执行后的效果如下图：

 

上面三种用法都一样，代码如下：

 

<ProgressBar
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:indeterminateDrawable="@drawable/progressbar_drawable" />