今天要使用一个SeekBar控件,其实我觉得Android默认样式已经很不错了,无奈设计不同意,而且SeekBar左右两边也有图片,默认样式和图片也确实不协调,因此这里使用图片自定义SeekBar样式,首先上代码:

<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:thumbOffset="10dp"
android:paddingLeft="10dp"
android:paddingRight="12dp"
android:thumb="@drawable/device_light_progress_thumb"
android:progressDrawable="@drawable/device_light_progressbar" />
android:thumb下的资源就是拖动条的滑块图片,android:thumbOffset的作用是防止thumb滑块不能完全显示,避免被遮挡;
android:progressDrawable下是自定义拖动条的样式,这里是两张图片,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@android:id/background"
android:drawable="@drawable/progressbar_bg" /> <item android:id="@android:id/progress"
android:drawable="@drawable/progressbar_checked">
</item> </layer-list>

其中@android:id/background是指滑块未拖动时,拖动条显示的图片;

@android:id/progress是指拖动滑块后,滑块前面的部分所显示的图片;

SeekBar的使用大概就是这样,以后再遇到这方面的问题我再来补充,下面说说draw9patch。

之所以说draw9patch是因为progressbar_bg和progressbar_checked两张图片在配置SeekBar时,出现图片过长,右侧没有结束的圆弧,而直接是一个切面,因此可以看出图片的长度没有收缩,这里首先想到的就是使用SDK-tools中的draw9patch工具将两张图片制作成9图,主要过程包括两个阶段:

第一:

考虑到SeekBar的滚动条宽度较小,大约只有5-10个像素,因此第一次制作时只是将图片在横向上做成可以拉伸和收缩,纵向未作处理。将图片导入drawable-h,经调试发现,图片在在上方显示有黑边,而且图片右侧还是切面,可以知道这张图片仍然没有收缩;

经过查找资料,发现是自己没有搞清楚draw9patch制作9图的机制,即上下左右约束的都是什么:

左边 是垂直方向可以伸缩的区域
上边 是水平方向可以伸缩的区域
右边 是垂直方向的内容区域
下边 是水平方向的内容区域

(下边和右边为图片内容的padding值)

必须高和宽都加上约束,如果只有高或者只有宽添加约束,仍然会有黑线。

另外,设置黑线时,点不能断,否则9patch图片会按照普通图片进行显示。

在弄清楚原理之后,将纵向也进行draw9patch处理,经调试,SeekBar右侧也显示了圆弧,即图片适配正常。

第二:

然后我将progressbar_checked这张图片也进行了同样的处理,即拖动滑块后的图片也制作成9图。导入应用后,SeekBar的显示反而出错了,即未拖动滑块时,整个SeekBar已经显示为progressbar_checked的图片样式,好像已经拖动到底一样。这个错误让我很不理解,progressbar_checked.png未改为9图时能够正常显示,在改为9图后反而出错了,在将progressbar_checked替换为原来的图片之后,应用又恢复正常。

这里猜测是9图自动适配控件导致的,具体原因还需要继续研究。

 

Android SeekBar 和 draw9patch 的使用的更多相关文章

  1. Android——SeekBar(拖动条)相关知识总结贴

    Android进度条(ProgressBar)拖动条(SeekBar)星级滑块(RatingBar)的例子 http://www.apkbus.com/android-51326-1-1.html A ...

  2. 自定义漂亮的Android SeekBar样式

    系统自带的SeekBar真是太难看了,不能容忍! 只能自己做了,先来张效果图 第1个Seekbar 背景是颜色,thumb是图片,上代码: <SeekBar android:id="@ ...

  3. Android --SeekBar的使用

    1. 效果图

  4. Android SeekBar自定义使用图片和颜色显示

    案例使用的图片如下:                            1.在res/drawable目录下新增一个xml风格文件,seekbar_define_style.xml ? 1 2 3 ...

  5. Android SeekBar实现音量调节

    SeekBar可以通过滑块的位置来标识数值----而且拖动条允许用户拖动滑块来改变值,因此拖动条通常用于对系统的某种数值进行调节,比如调节音量等. SeekBar允许用户改变拖动条的滑块外观,改变滑块 ...

  6. android SeekBar设置背景无法被填充满的bug

    在做一个播放进度的时候,用到了SeekBar,调用布局如下: <SeekBar android:id="@+id/example_audio_bar" android:lay ...

  7. android Seekbar 拖动按钮显示不全问题

    增加下面属性即可解决: android:thumbOffset="0dip" <SeekBar android:id="@+id/controller_progre ...

  8. Android SeekBar 自定义thumb,thumb旋转动画效果

    简介 某些音乐播放或者视频播放的界面上,资源还在加载时,进度条的原点(thumb)会显示一个转圈的效果. 资源加载完成后,又切换回静态效果.这个效果增强了用户体验. 一般来说有美术人员负责设计和切图. ...

  9. Android SeekBar的OnSeekBarChangeListener

    seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { /** * 拖动中数值的时候 * @param f ...

随机推荐

  1. Win32 CreateWindow GdiPlus

    #include "stdafx.h" #include "TestGidPlus.h" LRESULT CALLBACK WndProc(HWND, UINT ...

  2. 九度OJ 1108 堆栈的使用

    题目地址:http://ac.jobdu.com/problem.php?pid=1108 题目描述: 堆栈是一种基本的数据结构.堆栈具有两种基本操作方式,push 和 pop.Push一个值会将其压 ...

  3. 使用link在两个容器之间建立连接(mysql)

    在使用Docker的时候我们会常常碰到这么一种应用,就是我需要两个或多个容器,其中某些容器需要使用另外一些容器提供的服务.比如这么一种情况:我们需要一个容器来提供mysql的数据库服务,而另外两个容器 ...

  4. jQuery iframe 自适应高宽度

    Html <iframe id="你的id" src="你要嵌入的页面" scrolling="no" frameborder=&qu ...

  5. C++笔记1: 单例模式。(一个简单的设计模式在C++中复杂出翔。。)

    C++ 如果用指针new一个单例,内存不容易释放,所以Java和C#等语言中的单例模式在C++不适用... C++中,new申请的内存必须由delete释放,例如: Point p1; Point * ...

  6. 在ajax当中使用url重写来避免url的暴露

    记得一次面试,有这样一道面试题:jsp页面当中需要用到ajax的实现,此时需要调用java的url:此时的问题是如果用户查看页面源码就能看到真是的url,这个问题如何避免.说实话,AJAX我用的只是皮 ...

  7. Xcode8和iOS10的适配问题

    本文转自:http://www.jianshu.com/p/90d5323cf510 =================== 一.遇到的问题 1.权限以及相关设置 iOS10系统下调用系统相册.相机功 ...

  8. Hibernate一对一双向关联(外键)

    网站上各种搜索,都是一些清晰或者不清晰的例子,但是用下来一是确实不给力,二是完全不知道所以然. 后来终于在书中查到了就在这里记一下. 首先要说明,这里只解释双向一对一只有一个表里面有外键的情况. 就以 ...

  9. 深入探究JavaScript中的比较问题

    先用最近遇到的几个问题做引子: 1 console.log(null==undefined); //true 2 console.log(null==false);//false 3 console. ...

  10. VC释放EXE资源文件

    原文地址:http://blog.csdn.net/wangningyu/article/details/4378378 今天有个朋友问到VC能否释放多个EXE.DLL或WAV等文件,我便做了个实例给 ...