自定义进度条之圆角进度条问题_android clip进度条右边圆角

Android自定义进度条是开发中比较常见的一个需求，在之前的博客中也介绍过如何通过自定义ProgressBar的样式来实现自定义水平进度条和环形进度条。本文主要是对近期一个项目中的圆角进度条的实现做一个记录。
设计给出的图是这样的：

拿到设计图，对于之前自定义过ProgressBar样式的同学，一看，还是比较容易实现。但是在实现过程中还是遇到了问题，这里给出我实现的过程：
首先我的思路是：
无非就就是通过自定义ProgressBar的progressDrawable来实现，底部背景就是一个有蓝色边框的圆角shape,进度的背景就是一个填充色是蓝色的圆角shape。
根据之前博客自定义ProgressBar的样式中的介绍，首先自定义一个有蓝色边框的圆角shape的drawable文件
bg_stroke_blue_coners_30.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="30dp"></corners>
    <stroke
        android:width="1dp"
        android:color="#2B93E8"></stroke>
</shape>
1
2
3
4
5
6

再定义一个填充色是蓝色的圆角shape的drawable
bg_solid_blue_coners_30.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="30dp"></corners>
    <solid android:color="#2B93E8"></solid>
</shape>
1
2
3
4

再定义progressDrawable的drawable文件
custom_progressbar.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/bg_stroke_blue_coners_30"></item>
    <item android:id="@android:id/progress">
        <scale
            android:drawable="@drawable/bg_solid_blue_coners_30"
            android:scaleWidth="100%"></scale>
    </item>
</layer-list>
1
2
3
4
5
6
7
8
9
10

在布局文件中定义一个ProgressBar，基于系统的水平进度条，设置progressDrawable为customer_progressbar,使用如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <ProgressBar
        android:id="@+id/progressbar"
          style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="200dp"
        android:layout_height="10dp"
        android:progressDrawable="@drawable/custome_progressbar" />
</RelativeLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13

为了能够看见进度效果，我们在代码中设置ProgressBar的进度：

  mProgressBar = (ProgressBar) findViewById(R.id.progressbar);
  mProgressBar.setMax(100);
  mProgressBar.setProgress(40);
1
2
3

运行效果如下：

看似与设计图是一模一样的圆角进度条，但是仔细看可以看到，蓝色的进度部分右边也是圆角的

但是设计图上当进度没有满时，进度的右边并不是圆角的而是竖直的，这就是在实现的过程中遇到的问题。
通过百度查找资料，最终得到解决方法如下：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/bg_stroke_blue_coners_30"></item>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/bg_solid_blue_coners_30" />
    </item>
</layer-list>
1
2
3
4
5
6
7
8

将progress的item中的scale换成clipe实现，clip是用来裁剪的，即把
bg_solid_blue_coners_30裁剪成许多部分，那么除了两边是圆角的，中间部分自然是竖直的。

运行效果如下：

与设计图是完全一样。
以上就是实现该圆角进度条的过程。