自定义进度条之圆角进度条问题

Android开发 专栏收录该内容
71 篇文章 0 订阅

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>

再定义一个填充色是蓝色的圆角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>

再定义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>

在布局文件中定义一个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>

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

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

运行效果如下:

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

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

<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>

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

运行效果如下:

这里写图片描述

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

  • 3
    点赞
  • 0
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值