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

时间:2021-11-24 18:10:07

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

为什么是直角的?原因就是被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:磊磊