仿微信小视屏拍摄的进度条/自定义的progressBar的样式。

今天有个需求，就是需要倒计时的进度条，样式参考微信小视屏拍摄的效果。

就是两头往中间缩进的那种效果。

第一步：

先自定义progressBar的样式。

<?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>
            <solid android:color="#DA6547" />
        </shape>
    </item>
    <!-- 第二条进度条颜色 -->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <solid android:color="#ffffff" />
            </shape>
        </clip>
    </item>
    <!-- 进度条 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="#DA6547" />
            </shape>
        </clip>
    </item>
</layer-list>

　　

第二步：

在布局文件里面的progress引用。

   <ProgressBar
            android:progressDrawable="@drawable/roar_progressbar_color"
            android:id="@+id/pb_progress"
            style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="3dp" />

注意：设置progressBar的样式，为横向。

如此基本实现了通常效果。

然后现在要实现微信小视屏的这种两头往中间的效果，这个时候就利用下，Progress和SecondaryProgress这两个进度去控制。

首先，我们在样式中定义的东西就发挥重大的作用。

注意：我们的progress和background的颜色保持一致。这样会产生往里面走的效果。

然后我们手动去设置进度的大小就能实现。

先获取大小。

   //进度条
        pbTime.setProgress(0);
        pbTime.setSecondaryProgress(pbTime.getMax());
//保存第一进度和第二进度的数据
        mPro = pbTime.getProgress();
        mSpro = pbTime.getMax();

最后手动设置(这段代码需要不断的去回调，产生效果。)。

        pbTime.setProgress(mPro += 1);
        pbTime.setSecondaryProgress(mSpro -= 1);

最后实现了效果。