Android 自定义SeekBar关键点匹配的解决方案
来源:互联网 发布:三观不合知乎 编辑:程序博客网 时间:2024/06/05 11:51
问题描述
可拖动进度条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图进行恰当的处理,往往会出现让我们意想不到的结果。
0 0
- Android 自定义SeekBar关键点匹配的解决方案
- 自定义SeekBar(简单点的)
- 【SeekBar】Android 自定义漂亮的SeekBar样式
- Android的SeekBar自定义样式
- Android的SeekBar自定义样式
- android 自定义SeekBar的使用
- Android自定义SeekBar的样式
- Android UI , QuickContactBadge, SeekBar, 自定义漂亮的Android SeekBar样式
- android SeekBar 的基本应用和自定义SeekBar
- 关键点匹配算法
- 关键点匹配算法
- 自定义漂亮的Android SeekBar样式
- Android自定义Seekbar时的注意事项
- Android 自定义UI-垂直方向的SeekBar
- 自定义漂亮的Android SeekBar样式
- Android:自定义漂亮的SeekBar样式
- Android自定义Seekbar的正确写法
- 自定义漂亮的Android SeekBar样式
- Vaadin开发中的FontAwesome图标及代码
- PHP和MYSQL数据库编程知识记录
- 好东西
- Python 实现简单的加减算数游戏
- Android多点触控技术实战,自由地对图片进行缩放和移动
- Android 自定义SeekBar关键点匹配的解决方案
- 设计模式----策略模式(一)
- Android的消息处理机制——Looper,Handler和Message浅析
- Cocos2d-x 开发文档官网
- 为什么Java byte 类型的取值范围是-128~127
- MBus协议详解(一)
- iOS实现UILabel换行
- 快速幂取模算法
- CentOS 7 使用经验