通过自定义.xml文件实现各种效果的SeekBar

前端之家收集整理的这篇文章主要介绍了通过自定义.xml文件实现各种效果的SeekBar前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近项目中用到了SeekBar,大家都知道系统给的“SeekBar”只能用一个“丑”字来形容,为了达到项目经理的各种需求,实现各种颜色各种样式的SeekBar我们只能自定义。今天我就通过在Drawable文件夹下定义各种.xml文件来实现好看的SeekBar。废话少说,直接上图

目前我的API版本是24,第一个SeekBar是我自定义的(其实也很丑,为了给大家演示),第二个SeekBar使系统默认的,对比可以看出我改变了进度条的背景颜色(黑色),进度颜色(绿色),小圆球大小和颜色(粉色,这里就先叫他小圆球),围绕着这个控件衍生出很多安卓xml属性中的知识点,今天就一律做个了结。
首先先来看我的layout布局中的代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">

    <SeekBar  android:id="@+id/mySeekBar" android:layout_width="match_parent" android:layout_height="40dp" android:thumb="@drawable/point" android:progress="30" android:progressDrawable="@drawable/seekbar_color" />
    <SeekBar  android:layout_width="match_parent" android:layout_height="40dp" android:progress="30" />

</LinearLayout>

在我自定义的SeekBar中有两条语句android:thumb=”@drawable/point”android:progressDrawable=”@drawable/seekbar_color”
这两条语句分别对应着小圆球和进度条的颜色,小圆球的很好理解,可是对于进度条的颜色有人可能会问进度条中有两种颜色:进度条背景色和进度的颜色,可是我的代码中为什么只有progressDrawable一个属性?下边我就对我的drawable文件下的seekbar_color.xml文件进行讲解,还是先看代码

<?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="line"> <stroke  android:width="3dp" android:color="#000000" /> </shape> </item> <item  android:id="@android:id/progress > <clip> <shape android:shape="line"> <stroke  android:width="3dp" android:color="#f1f1" /> </shape> </clip> </item> </layer-list>

上边的代码就是我所说的seekbar_color.xml文件中的所有内容了,下边我对文件中的各个标签属性进行详解:
1.首先是最外层的layer-list:layer的中文意思是“层次”,list的中文意思是集合,也就是说这个标签就的意思就是一个个效果的叠加,它的内部只有item一个子标签,每一个子标签代表一个效果。打个比方我有三张照片,每一张照片就是一个item,将三张照片叠加放在桌子上也就是我们看到的效果了。在layer-list标签下有两个item子标签这两个item分别对应着SeekBar中的进度条背景颜色(黑色)和进度的颜色(绿色),第一个item的的id为@android:id/background,此处必须强调的是这个id必须只能是这个id,这是系统已经定义好的,他对应着SeekBar中的进度条背景颜色,第二个item的id为@android:id/progress,这个id也必须只能是这个,他也是系统定义好的,对应SeekBar的进度颜色(图中的绿色)。
2. 然后再说一下shape标签,关于安卓中shape属性的介绍网上是在太多了,在这里我只强调一下我在实际应用中遇到的问题,当我们想在xml文件中用shape属性画一条线时,也就是SeekBar中的进度条,这里有很多需要注意的细节:

网上关于画线各种各样的说法都有,在这里我用我的四级英语把他简单的总结一下:

  1. 首先我们需要在属性中指定形状为line
  2. 画线的时候我们只需要操作stroke属性就ok了,因为stroke属性就是描边的意思正好对应线,在stroke属性中width对应着线段的宽度,color对应线段的颜色
  3. 我们所画的线段在控件中的显示效果是横向填充满整个控件,纵向的高度就是对应的stroke的高度,而且线段在控件中的布局默认是垂直居中的。

3.再说一下clip属性,clip是剪切的意思,此处需要特别注意的是,进度颜色(绿色)也就是第二个item中必须要加上clip元素,否则,在动态java代码中设置背景导致进度条不走的现象(实际上,进度在走,但进度条背景被拉到最大长度,没有逐步显示),因为进度的颜色是随着进度的大小而改变的,所以必须要加上属性才能实现效果

最后就是SeekBar中小圆球的实现了,这个非常简单,直接在drawable文件下创建一个point.xml文件,具体内容如下:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="#e4e" />
    <size  android:width="20dp" android:height="20dp" />

</shape>

非常简单 只是画了一个椭圆,然后高度和宽度固定好就变成了圆。到这一步,所有的SeekBar就完成了,我做的demo很丑,但是具体的做法就是上边这些了,大家可以根据自己的实际需要自己设计颜色和尺寸。好了今天就到这里了,算是对drawable文件下的xml文件做一个总结,其实drawable文件还有很多用法,过一段时间我会在详细总结一下,有不对的地方欢迎指正,大家共同学习!!

猜你在找的XML相关文章