最近项目中需要在一个功能模块中使用进度条,效果图如下:
上面图片从左到右分别是效果一,效果二,效果三
需求: 以下四点需要实现
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=