Android SeekBar 和 draw9patch 的使用

今天要使用一个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图自动适配控件导致的,具体原因还需要继续研究。

 
时间: 2024-08-10 15:05:10

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

Android九宫图(draw9patch)

左边和上边的线决定重复的区域: 右边和下边的线决定显示内容的区域: Android九宫图(draw9patch),布布扣,bubuko.com

从零开始学android&lt;SeekBar滑动组件.二十二.&gt;

拖动条可以由用户自己进行手工的调节,例如:当用户需要调整播放器音量或者是电影的播放进度时都会使用到拖动条,SeekBar类的定义结构如下所示: java.lang.Object ? android.view.View ? android.widget.ProgressBar ? android.widget.AbsSeekBar ? android.widget.SeekBar 常用方法 public SeekBar(Context context) 构造 创建SeekBar类的对象 publi

Android学习随笔 -- draw9patch的使用

draw9patch的作用 通过draw9pacth生成的.9.png的图片的主要解决 在设计中 比如使用一个图片作为背景图片时,当要填充的区域 的长宽比例不同于图片的实际长宽比例时 图片会被拉伸的变形.所以使用生成的.9.png图片不会被完全的拉伸变形  而是只是拉伸其中的某一部分. 如没有使用draw9patch的图片做背景 以及 使用draw9patch的图片做的背景. 图像会被全部拉伸放大,变形不清晰.这样的不需要放的部分不会被拉伸变形. 如何制作9patch的图片 进入android目

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

      1.在res/drawable目录下新增一个xml风格文件,seekbar_define_style.xml <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 未选中 --> <item android:id=&q

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

增加下面属性即可解决: android:thumbOffset="0dip" <SeekBar android:id="@+id/controller_progress_seekbar" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:maxHeight=

Android SeekBar实现音量调节

SeekBar可以通过滑块的位置来标识数值----而且拖动条允许用户拖动滑块来改变值,因此拖动条通常用于对系统的某种数值进行调节,比如调节音量等. SeekBar允许用户改变拖动条的滑块外观,改变滑块外观通常通过如下属性来指定:android:thumb: 指定一个Drawable对象,该对象将自定义滑块. 为了让程序能响应拖动条滑块位置的改变,程序可以考虑为它绑定一个OnSeekBarChangeListener监听器. 以下是一个使用SeekBar来调节系统音量的实例: XML代码: <Se

自定义漂亮的Android SeekBar样式

系统自带的SeekBar真是太难看了,项目需要,只能自定义了,先来张效果图 第一个Seekbar 背景是颜色,thumb是图片,上代码: [html] view plaincopy <SeekBar android:id="@+id/timeline" android:layout_width="fill_parent" android:layout_height="wrap_content" android:focusable="

Android --SeekBar的使用

1. 效果图 2. 源码文件 1. main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/LL" android:layout_width="fill_parent" a

【android seekbar 增大拖动区域】

//seekbarLayout 是seekBar对象statusSeekbar的父层布局 seekbarLayout = mStatusViewLayout.findViewById(R.id.id_seekbar_layout); seekbarLayout.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { Rect seek