不怕跌倒，所以飞翔

本文知识点

• 水平进度条一端圆角的处理
• 水平进度条两端圆角的处理
• 水平进度条阴影的实现(layer-list实现错位)

常见问题

1.水平进度条的设置

1.1基本的配置

在Android中最常见的就是水平进度条了,什么样子我就说了,先说一些基本的设置问题(大概分为一下几个步骤):

• 首先通过设置style="?android:attr/progressBarStyleHorizontal"成水平进度条
• 其次通过progressDrawable这个属性设置相应的进度图片
• 设置progressDrawable中展示的图片

其实关键的就这么两个步骤,主要的难点就在这个图片上面

• 如果你不设置展示的图片的话,默认的颜色是你主题的颜色,这个两端都是直角的

1.2进度条一端圆角的设置(注意是一段圆角)

首先我们先更改一下相应的颜色,这一注意一下顺序,如果你要是把还从进度写在最后的话,那么进度就没法显示了

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!--背景-->
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="#2C9CBC"/>
            <stroke android:width="1dp"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>

    <!--缓冲进度-->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="#87877e"/>
                <corners android:radius="5dp"/>
            </shape>
        </clip>
    </item>

    <!--进度-->
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="#FCEE12"/>
                <corners android:radius="5dp"/>
            </shape>
        </clip>
    </item>

</layer-list>

不知道你注意到了没有,上面虽然两边是圆角,但是中间的内容没有实现圆角,为什么呢?因为上面有一个<clip>这个标签导致的,他切割了右边的圆角,那么怎么解决这样的问题呢?办法当然是有的,要不我们大Android程序员岂不是白费了.接下来看看我们怎么改进相应的内容

1.3进度条两端圆角的设置

其实就是使用相应的<scale>这个标签进行改造

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!--背景-->
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="#2C9CBC"/>
            <stroke android:width="1dp"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>

    <!--进度-->
    <item android:id="@android:id/progress">
        <scale
            android:drawable="@drawable/progress_round"
            android:scaleWidth="100%"/>
    </item>

</layer-list>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <solid android:color="#FCEE12"/>
    <corners android:radius="5dp"/>
</shape>

这里其实就是通过<scale>引入了一个相应的图片资源,这样就能解决相应的问题了.通过以上设置就能确保你的进度条两端都是圆角了.上面的内同基本上能保证一些常见的进度条颜色的设置了.但是美工有的时候真的就是觉得这样不好看,非要加个阴影,当时我是崩溃的,但是回头想了想其实也是可以实现的!咱们继续往下看:

2.layer-list实现更酷炫的水平进度条

我们美工说在进度条的下面加上一个阴影好看,具体对的效果其实是这样的!

进度条的样式是这样的

其实这里面存在一个layer-list中叠加图片的问题,其实原理很简单,只要知道其实就是几个属性的问题.

先说明一下原理,其实layer-list中的item标签可以通过相应的top/bottom/left/right进行调节位置,也就是相当于底图的偏移量,这样就能确保图层进行相应的偏移了,其实这里我也遇到一个问题,但是我是通过别的办法解决的:
-先说一下相应的问题,我发现我设置相应的background的背景图片,但是进度的图片总是盖在上面,没有办法显示相应的描边,所以我通过设置相应View的background属性和相应描边的宽度的padding进行相应内容的显示,这样就解决了上面的问题.虽然方法比较笨,希望有更好的见解的童鞋给小弟留言,贴一下相应的代码?

• progressDrawable文件

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/progress">
        <scale
            android:drawable="@drawable/progress_cool"
            android:scaleWidth="100%"/>
    </item>
</layer-list>

• progress_cool文件

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--这个应该是底图的颜色-->
    <item>
        <shape>
            <corners android:radius="6dp"/>
            <solid android:color="#998752"/>
        </shape>
    </item>
    <!--这个应该是顶图的颜色-->
    <item
        android:bottom="1dp">
        <shape>
            <solid android:color="#FCEE12"/>
            <corners android:radius="6dp"/>
        </shape>
    </item>
</layer-list>

• background的相应的图片

<?xml version="1.0" encoding="utf-8"?>
<!--每周任务的Progress的背景-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke
        android:width="1dp"
        android:color="#000"/>
    <solid android:color="#2C9CBC"/>
    <corners android:radius="6dp"/>
</shape>

以上就是相应的图片资源了 ,当你设置的时候加上一个描边的Padding就可以正常显示了!这里注意progress_cool文件中的item标签bottom属性的设置其实就是绘制了两个图片,只是下面的图片距离底边有个1dp的距离,所以显得是一个阴影.

其实shape可以绘制相应的渐变的,这里就可以发挥你的想象了,这里就不继续展开了!

---

以上内容基本上包括了水平进度条中处理圆角的所有内容了,应该还有一个填充图片的操作,这里等以后用到的话在进行补充或者你提问,我也会补充的!嘻嘻....