Android反向进度条(ProgressBar)的实现——从右到左的进度条

Android反向进度条（ProgressBar）——从右到左的进度条

前言： 最近在项目中需要使用到反向进度条，在网上查了些资料，感觉对自己作用不大，于是自定义样式，实现了反向进度条。

1. 第一步

首先，在布局文件中加入进度条控件——ProgressBar。默认的进度条是环形的，需要改为水平方向。

<ProgressBar
         android:id="@+id/myprogress1"
         android:layout_marginRight="20dp"
         android:layout_centerVertical="true"
         android:max="100"
         android:progress="20"
         style="@style/StyleProgressBarMini"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"/>

其中 style=”@style/StyleProgressBarMini” 是自定义的样式。

2. 第二步
在res/values下新建xml文件style_ProgressBarMini.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="StyleProgressBarMini"
           parent="@android:style/Widget.ProgressBar.Horizontal">
        <item name="android:maxHeight">50dip</item>
        <item name="android:minHeight">10dip</item>
        <item name="android:progressDrawable">@drawable/my_progressbar</item>
    </style>
</resources>

3. 第三步

在res/drawable目录下新建文件my_progressbar.xml，定义进度条的样式。

<?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="5dp"/>
        </shape>
        <color android:color="#CCCCCC"/>
    </item>

    <item android:id="@android:id/progress">
        <clip
            android:clipOrientation="horizontal"
            android:gravity="right">
            <shape>
                <corners android:radius="5dp"/>
                <gradient
                    android:startColor="#F00"
                    android:centerColor="#FF0"
                    android:endColor="#0F0"/>
            </shape>
        </clip>
    </item>
</layer-list>

android:clipOrientation=”horizontal”
android:gravity=”right” 设置进度条水平方向，从右到左显示。

4. 第四步

这时候就可以在项目中使用自定义的进度条样式了。

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/androi
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <ProgressBar
           android:id="@+id/myprogress2"
           android:layout_marginRight="20dp"
           android:layout_centerVertical="true"
           android:max="100"
           android:progress="20"
           style="@style/StyleProgressBarMini"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"/>

    <ProgressBar
           android:id="@+id/myprogress2"
           android:layout_marginRight="20dp"
           android:layout_centerVertical="true"
           android:max="100"
           android:progress="70"
           style="@style/StyleProgressBarMini"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"/>

</LinearLayout>

总结： 就这样我们实现了反向进度条，随着进度的改变，进度条的颜色也会出现渐变，有绿色逐渐变为黄色，最后变成红色。