Android的SeekBar
使用SeekBar的时候,经常遇到的问题有如下:1. seekbar的拖动按钮没有居中。
2. seekbar的高度有问题。
3. seekbar的拖动按钮在最左最右显示不全。
首先,要解决上述问题,要先检查layout文件在描述seekbar时,有没有正确设置图片的尺寸和检查屏幕密度与图片是否放置在相应的drawable文件夹中(drawable-hdpi, drawable-mdpi, drawable-ldpi).
在确保图片资源正确的情况下,参考如下XML:
layout
View Code
1 <SeekBar
2 android:layout_width="321px"
3 android:layout_height="wrap_content"
4 android:layout_centerInParent="true"
5 android:maxHeight="12px"
6 android:minHeight="12px"
7 android:paddingLeft="18px"
8 android:paddingRight="18px"
9 android:max="100"
10 android:progressDrawable="@drawable/seekbar_style"
11 android:thumb="@drawable/drag_ball"
12 android:id="@+id/seekBar"/>
seekbar_style
View Code
1 <layer-list
2 xmlns:android="http://schemas.android.com/apk/res/android">
3 <item
4 android:id="@android:id/background"
5 android:drawable="@drawable/drag_bar_background"/>
6 <item
7 android:id="@android:id/progress"
8 android:drawable="@drawable/drag_bar_foreground"/>
9 <item
10 android:id="@android:id/secondaryProgress"
11 android:drawable="@drawable/drag_bar_foreground"/>
12 </layer-list>
简单解释下seekbar中几个重要的属性:
android:layout_height="wrap_content"
//建议使用wrap_content,否则一定要保证设置的值不小于seekbar图片资源中的最高值
android:maxHeight="12px"
android:minHeight="12px"
//说明进度条的最低和最大高度,解决高度问题。
android:paddingLeft="18px"
android:paddingRight="18px"
//解决拖动按钮在最左最右显示不全的问题,padding的值一般是thumb的一半宽度。
android:progressDrawable="@drawable/seekbar_style"
//设置了此值,就表示使用自定义的进度条样式,在其中可以设置进度条背景图,进度条图,缓冲条图。
android:thumb="@drawable/drag_ball"
//seekbar的拖动按钮图片
android系统自带的自定义样式例子:
seekbar_style
View Code
1 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
2 <item android:id="@android:id/background">
3 <shape>
4 <corners android:radius="5dip" />
5 <gradient
6 android:startColor="#ff9d9e9d"
7 android:centerColor="#ff5a5d5a"
8 android:centerY="0.75"
9 android:endColor="#ff747674"
10 android:angle="270"/>
11 </shape>
12 </item>
13 <item android:id="@android:id/secondaryProgress">
14 <clip>
15 <shape>
16 <corners android:radius="5dip" />
17 <gradient
18 android:startColor="#80ffd300"
19 android:centerColor="#80ffb600"
20 android:centerY="0.75"
21 android:endColor="#a0ffcb00"
22 android:angle="270"/>
23 </shape>
24 </clip>
25 </item>
26 <item android:id="@android:id/progress">
27 <clip>
28 <shape>
29 <corners android:radius="5dip" />
30 <gradient
31 android:startColor="#ff0099CC"
32 android:centerColor="#ff3399CC"
33 android:centerY="0.75"
34 android:endColor="#ff6699CC"
35 android:angle="270"/>
36 </shape>
37 </clip>
38 </item>
39 </layer-list>
thumb
View Code
1 <selector xmlns:android="http://schemas.android.com/apk/res/android">
2
3 <!-- 按下状态-->
4 <item
5 android:state_focused="true"
6 android:state_pressed="true"
7 android:drawable="@drawable/thumb_pressed" />
8 <!-- 普通无焦点状态 -->
9 <item
10 android:state_focused="false"
11 android:state_pressed="false"
12 android:drawable="@drawable/thumb_normal" />
13 <!-- 有焦点状态-->
14 <item
15 android:state_focused="true"
16 android:state_pressed="false"
17 android:drawable="@drawable/thumb_focused" />
18 <!-- 有焦点 -->
19 <item
20 android:state_focused="true"
21 android:drawable="@drawable/thumb_focused" />
22 </selector>