本文知识点
- 水平进度条一端圆角的处理
- 水平进度条两端圆角的处理
- 水平进度条阴影的实现(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可以绘制相应的渐变的,这里就可以发挥你的想象了,这里就不继续展开了!
以上内容基本上包括了水平进度条中处理圆角的所有内容了,应该还有一个填充图片的操作,这里等以后用到的话在进行补充或者你提问,我也会补充的!嘻嘻....
