Android 自定义SeekBar关键点匹配的解决方案

问题描述

可拖动进度条SeekBar在一些音乐、游戏类等的应用中经常使用到，一般我们都是使用如下列举的几种方式去实现：

...

上面几种进度条的样式，都比较正常，实现起来也容易，不需要对图片进行特殊的处理，但是如果要实现带有关键时间点特殊样式（如下图）展现的话，我们应该如何实现呢？

难点分析

先展示美工提供的进度条素材：

1、SeekBar背景层

2、SeekBar前景层

我们可以想象，如果只是通过图片的测量匹配进行硬编码来完成这个效果的话，那么在Android这个需要大量适配机型的情况下，又该如何处理？所以不能依靠于美工的完美匹配切图。 为了达到满意的效果，前景层肯定比背景层要来的小一些，大小不一样的两层叠加起来的话，效果就会变成如下图

可能很多同学会说，直接让两张图片都center就可以了，这样的确可以，但是还是需要进行硬编码才会达到我们理想的效果：

。

经过上述分析，想必大家都可以了解到这个效果的难点在何处了？ 接下来将讲述一个开发中比较好的解决方案

解决方案

1.绘制draw9patch格式图片

首先，我们向美工要一个与背景A相同大小的素材代替B做为前景，然后使用SDK提供的draw9patch程序制作部分拉伸的图片格式，绘制的点位如下图红圈所示：

在draw9patch程序中预览横竖拉伸的效果：

并保存为对seekbar_timer_progress.9.png（对背景A也进行相同的处理并保存为seekbar_timer_background.9.png）。

     左上： 拉伸区域

     右下： 展示区域

如果有对.9图不了解的，请自行google。 

 

2.制作SeekBar的底层背景、中层背景及进度前景

    在drawable目录下建立seekbar_timer.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">
        <nine-patch android:src="@drawable/seekbar_timer_backgroud" />
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <nine-patch android:src="@drawable/seekbar_timer_backgroud" />
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <nine-patch android:src="@drawable/seekbar_timer_progress" />
        </clip>
    </item>
</layer-list>

 

3.布局XML里的SeekBar配置

<SeekBar
    android:id="@android:id/progress"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:progressDrawable="@drawable/seekbar_timer"
    android:maxHeight="20dp"
    android:minHeight="20dp"
    android:secondaryProgress="0"
    android:thumb="@drawable/seekbar_timer_thumb"
    android:thumbOffset="0dip" />

4.实际运行效果：

总结

对于图片的处理，有时候我们感觉这些怪异的效果实现无从下手，但是通过.9图进行恰当的处理，往往会出现让我们意想不到的结果。