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

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

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

第一步：

先自定义progressBar的样式。 roar_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>
            <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:id="@+id/pb_progress1"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:progressDrawable="@drawable/roar_progressbar_color" />

 

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

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

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

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

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

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

先获取大小。

 

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

 

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

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