安卓进度条两边圆角+渐变的拓展

Posted 2020-12-01 WidgetBox

前言：我们知道安卓的进度条设定了背景可以使两边变圆，但是在进度里面还是直角的，下面上干货。

为什么是直角的？原因就是被clip给切了，所以我们不能够用clip，而要使用scale这个标签。

我的项目里面是这么写的

1新建xml文件progress_gradient_yellow

代码如下

<?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>
            <corners android:radius="10dp" />

            <solid android:color="#33F6C70F" />
        </shape>
    </item>

    <!-- 进度条 -->
    <item android:id="@android:id/progress">
      
            <scale android:scaleWidth="100%">
                <shape>
                    <corners android:radius="10dip" />
                    <gradient
                        android:angle="0"
                        android:type="linear"
                        android:startColor="#FFB21D"
                        android:endColor="#FFD753"/>
                    <!--  <solid android:color="#318FCE" />-->
                </shape>
            </scale>


    </item>

</layer-list>

这里注意下我用的gradient标签实现渐变。如果不需要就<solid android:color="#5ae70fff" />就是正常的

2自定义style：ProgressBar_Scale

<!-- 进度条两边圆角 -->
    <style name="ProgressBar_Scale" parent="@android:style/Widget.ProgressBar.Horizontal">
        <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
        <item name="android:progressDrawable">@drawable/progress_gradient_yellow</item>
    </style>

3在自己的布局文件中写入

  <ProgressBar
                android:id="@+id/pb_download_progress"
                android:layout_width="match_parent"
                android:layout_height="10dp"
                android:max="100"
                android:progress="50"
                style="@style/ProgressBar_Scale"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="26dp"
                />

就是这么简单（研究了很久才弄好的，点个赞呗）

by：磊磊

以上是关于安卓进度条两边圆角+渐变的拓展的主要内容，如果未能解决你的问题，请参考以下文章

android自己定义渐变进度条

圆角进度条，带数字居中显示的圆角进度条

角圆形 svg 进度条渐变笔画

在R闪亮中将fileinput进度条颜色更改为渐变

iOS 渐变进度条

iOS圆环，环形渐变进度条的封装