安卓android 自定义SeekBar进度条样式

最近项目中用到了自定义的相机，在写预览界面缩放功能时，采用的是seekBar的方式。但是系统的SeekBar实在是太难看了，只好通过自定义的方式自己写一个。

以下实现的效果可能不一定是您想要的，但希望能有所帮助。记录下来，也方便自己日后查看。

在布局文件中添加seekbar控件

<SeekBar
android:id="@+id/camera_SeekBar"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_above="@+id/camera_buttom_bar"
android:layout_marginBottom="50dp"
android:layout_centerInParent="true"
android:progressDrawable="@drawable/seekbar_style"
android:thumb="@drawable/seekbar_thumb"
android:maxHeight="1dp"
android:thumbOffset="0dp"
/>

其中主要是progressDrawable 和 thumb 这两个属性。progressDrawable是用来实现seekBar进度条的样式，thumb是用来实现进度条上那个拖动的圆点的样式。

1，progressDrawable

在drawable文件夹下新建一个xml文件，我起名为seekbar_style.xml

<?xml version="1.0" encoding="utf-8"?>
<!--点9图片-->
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background" android:drawable="@drawable/volumn_bg" />
<item android:id="@android:id/secondaryProgress">
<scale android:drawable="@drawable/volumn_front" android:scaleWidth="100%" />
</item>
<item android:id="@android:id/progress">
<scale android:drawable="@drawable/volumn_primary" android:scaleWidth="100%" />
</item>
</layer-list>

我使用的是点9图片的方式。

其中图片volumn_bg是进度条没有加载到的部分的图片

volumn_front是预加载的进度条部分的图片

volumn_primary是进度条已加载的部分的图片，以下是三张点9图片







另外，也可以通过只更改系统的背景色的方式来定义进度条样式。

<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<solid android:color="#222222" />
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="#ff51495e" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<solid android:color="#ff996dfe" />
</shape>
</clip>
</item>
</layer-list>

通过这种方式定义的进度条，最小高度大概10dp这样，设置了更小的高度貌似没用。

2，thumb

同样，我是在drawable文件夹下新建了一个xml文件，起名为seekbar_thumb.xml。然后这里我是采用的直接更改系统背景色的方式来实现的。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval" >
<solid android:color="#8033B5E5" />
<size
android:height="18dp"
android:width="18dp" />
</shape>
</item>
<item>
<inset
android:insetBottom="5dp"
android:insetLeft="5dp"
android:insetRight="5dp"
android:insetTop="5dp" >
<shape android:shape="oval" >
<solid android:color="#0099CC" />
</shape>
</inset>
</item>
</layer-list>

颜色和大小可以自己调节。

另外也可以通过图片的方式来自定义滑块儿的样式。但是因为找不到合适的图片，所以便没有采用这种方式。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/seekbar_thumb_normal" />
<item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/seekbar_thumb_pressed" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/seekbar_thumb_pressed" />
<item android:drawable="@drawable/seekbar_thumb_normal" />
</selector>

四个item各代表滑块儿被点击时的四种状态。

下面附上效果图：