Android 自定义进度条

最近项目中需要在一个功能模块中使用进度条，效果图如下：

上面图片从左到右分别是效果一，效果二，效果三
需求： 以下四点需要实现
1： 当没有没完成进度的时候，显示效果一
2：当进度完成了一部分，显示图二
3：当进度全部完成之后，显示效果三
4：当进度1到进度2需要动画，进度2到进度3需要动画； 同样进度3到进度2或者进度1也需要动画。

刚开始拿到这个东西的时候，考虑了老长时间，觉得还是有技巧的，先说一下思路吧

首先我们，写一个一模一样的底部布局，如下图1：

图一也就是效果一的全部显示，

图三不是跟图一一模一样吗？ 是的，但是字体的颜色不一样的，图三的颜色的白色的，
然后把图三放进图二中，得到图四， 因为图二是父布局，图三是子布局，图三放在图二中，只会显示部分的视图。 此时在把图四和图一叠加！
注意：图一在图四的下面。

如下图所示，得到图五：

上图是大致的思路，接下来看下我们用Java代码应该怎样思考：

• XML中首先最外层是RelativeLayout，
• 然后父布局里面有两个，分别是图一和图四的布局，图一的布局可以使RelativeLayout，图四的布局我们需要自定义GroupView，需要继承自LinearLayout，至于为什么不是继承自RelativeLayout，实验是不行的，这是一个疑惑点。
• 在XML中，静态在自定义GroupView中添加跟图一一样的布局，但是需要注意的是，颜色不能一致！
• 在自定义的布局中，我们需要动态更改自定义ViewGroup的宽度，也就是动态更改图二的宽度。

接下来看下具体的代码实现：

1：drawable文件的shape文件：

drawable_rectangle_raduis_50_color_0a3f6d_to_fc6f54.xml 图二的shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 渐变色 -->
    <gradient
        android:endColor="#FC6F54"
        android:startColor="#0A3F6D"
        android:type="linear"/>

    <corners android:radius="50dp" />
</shape>

drawable_rectangle_raduis_50_color_f0eff4.xml 图一的shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android=