Android 自定义SeekBar关键点匹配的解决方案
2015-01-28 10:37
232 查看
问题描述
可拖动进度条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图进行恰当的处理,往往会出现让我们意想不到的结果。相关文章推荐
- Android-5.0中自定义SeekBar的滑块颜色后,发现有白色背景-解决方案
- Android中自定义ListView无法响应OnItemClickListener中的onItemClick方法问题解决方案
- Android中自定义SeekBar的背景颜色,进度条颜色,以及滑块的图片
- android之控件自定义(seekBar)
- Android 编程下自定义 ListView 无法响应 OnItemClickListener 中的 onItemClick 方法问题解决方案
- Android中自定义ListView问题的解决方案
- Android中自定义SeekBar的背景颜色,进度条颜色,以及滑块的图片
- Android中自定义ListView无法响应OnItemClickListener中的onItemClick方法问题解决方案
- Android界面开发之拖动条及自定义SeekBar
- Android自定义SeekBar滑动条
- Android中自定义ListView无法响应OnItemClickListener中的onItemClick方法问题解决方案
- android 自定义SeekBar
- Android中自定义SeekBar来控制音量,并与系统音量键的操作保持同步
- Android中自定义ListView无法响应OnItemClickListener中的onItemClick方法问题解决方案
- Android界面开发之拖动条及自定义SeekBar
- android中自定义SeekBar
- Android中自定义ListView无法响应OnItemClickListener中的onItemClick方法问题解决方案
- Android SeekBar自定义UI
- Android 自定义seekbar样式及用法小结
- Android之AutoCompleteTextView自定义匹配规则