Android常用控件之SeekBar的使用

SeekBar的应用非常广，比如用来显示音量条、播放进度条，有水平显示也有垂直显示，但Android只给我们提供了水平的，可以用系统默认的样式也可以用我们自定义的样式，总之进度条的用法多种多样，如果Android没有提供也能我们自己去定制，先上图

使用图片自定义水平进度条时有个缺陷，就是图片不能根据进度条的大小进行拉伸，也就是自适应进度条的长度。当然也可以通过改变进度条的宽度跟图片宽度一致，这样就不会出现上面的情况。我想让图片适应进度条的大小，但还没找到解决办法，我想通过广大网友一起想想办法如何解决这样问题，有知道的朋友可以告诉我，感激不尽！

上图显示的第一个进度条是Android定义的，我们不需要做任何更新，只需要在布局文件中添加就可以，如

[html] view plain copy

1. <SeekBar  
2.         android:id="@+id/seekbar"  
3.         android:layout_width="fill_parent"  
4.         android:layout_height="wrap_content"  
5.         android:layout_alignParentTop="true" />  

然后在Activity中根据相应的ID获取对象，并添加监听器

下面看下第二个进度条的在布局文件中的定义

[html] view plain copy

1. <SeekBar  
2.         android:id="@+id/proSeek"  
3.         style="?android:attr/progressBarStyleHorizontal"  
4.         android:layout_width="match_parent"  
5.         android:layout_height="wrap_content"  
6.         android:layout_below="@id/seekbar"  
7.         android:layout_gravity="center_vertical"  
8.         android:paddingLeft="5dp"  
9.         android:paddingRight="5dp"  
10.         android:progressDrawable="@drawable/seekbar_style"  
11.         android:secondaryProgress="0"  
12.         android:thumb="@drawable/thumb_selector" />  

进度条样式seekbar_style.xml定义 以下是使用图片定义的

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android"   
3.     android:opacity="transparent">  
4.   
5.     <item  
6.         android:id="@android:id/background"  
7.         android:drawable="@drawable/player_progress_bg"/>  
8.     <item  
9.         android:id="@android:id/secondaryProgress"  
10.         android:drawable="@drawable/player_progress_buffering">  
11.     </item>  
12.     <item  
13.         android:id="@android:id/progress"  
14.         android:drawable="@drawable/player_progress_playing">  
15.     </item>  
16.   
17. </layer-list>  

滑块thumb_selector.xml 定义

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.   
4.     <item android:drawable="@drawable/voice_thumb_press"   
5.         android:state_pressed="true"/>  
6.     <item android:drawable="@drawable/voice_thumb_normal"   
7.         android:state_enabled="true"   
8.         android:state_focused="true"   
9.         android:state_window_focused="true"/>  
10.     <item android:drawable="@drawable/voice_thumb_normal"/>  
11.   
12. </selector>  

至此一个用图片定义的进度条就完成了。

第三个进度条是修改了滑块，这就需要重写SeekBar

关键代码如下：

在布局文件中声明自定义的控件  com.example.seekbar.mSeekBar

[html] view plain copy

1. <com.example.seekbar.mSeekBar  
2.         android:id="@+id/proSeek2"  
3.         style="?android:attr/progressBarStyleHorizontal"  
4.         android:layout_width="match_parent"  
5.         android:layout_height="wrap_content"  
6.         android:layout_below="@id/proSeek"  
7.         android:layout_gravity="center_vertical"  
8.         android:paddingLeft="5dp"  
9.         android:paddingRight="5dp"  
10.         android:progressDrawable="@drawable/seekbar_style_1"  
11.         android:secondaryProgress="0"  
12.         android:thumb="@drawable/thumb_selector" />  

修改滑块的关键代码

[java] view plain copy

1. public mSeekBar(Context context, AttributeSet attrs) {  
2.         super(context, attrs);  
3.         paint = new Paint();  
4.         paint.setTextAlign(Paint.Align.CENTER);  
5.         paint.setColor(Color.BLUE);  
6.         res = context.getResources();  
7.         bmp = BitmapFactory.decodeResource(res, R.drawable.voice_thumb_press);  
8.         thumb = new BitmapDrawable(res, bmp);  
9.         bmpPro = BitmapFactory.decodeResource(res, R.drawable.player_progress_bg);  
10.         Progress = new BitmapDrawable(res, bmpPro);  
11.         // 判断屏幕大小 符合条件进行缩放thumb  
12.         if (Pixels.getpixels_x(100) < ScreenWidth  
13.                 && Pixels.getpixels_y(100) < screenHeight) {  
14.             thumb = zoomDrawable(thumb, bmp.getWidth(), bmp.getHeight());  
15.         } else {  
16.             paint.setTextSize(20);  
17.         }  
18.         Progress = zoomDrawable(Progress, bmpPro.getWidth(), bmpPro.getHeight());  
19.         // 设置拖动的图片  
20.         setThumb(thumb);  
21.         // 图片的位置  
22.         setThumbOffset(thumb.getIntrinsicWidth());  
23.         setBackgroundDrawable(Progress);  
24.     }  

第四个进度条是用颜色来填充

主要是下面这个样式文件   

[html] view plain copy

1. seekbar_style_own.xml  

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
3.   
4.     <item android:id="@android:id/background">  
5.         <shape>  
6.             <corners android:radius="5dip" />  
7.   
8.             <gradient  
9.                 android:angle="270"  
10.                 android:centerColor="#ff5a5d5a"  
11.                 android:centerY="0.75"  
12.                 android:endColor="#ff747674"  
13.                 android:startColor="#ff9d9e9d" />  
14.         </shape>  
15.     </item>  
16.     <item android:id="@android:id/secondaryProgress">  
17.         <clip>  
18.             <shape>  
19.                 <corners android:radius="5dip" />  
20.   
21.                 <gradient  
22.                     android:angle="270"  
23.                     android:centerColor="#80ffb600"  
24.                     android:centerY="0.75"  
25.                     android:endColor="#a0ffcb00"  
26.                     android:startColor="#80ffd300" />  
27.             </shape>  
28.         </clip>  
29.     </item>  
30.     <item android:id="@android:id/progress">  
31.         <clip>  
32.             <shape>  
33.                 <corners android:radius="5dip" />  
34.   
35.                 <gradient  
36.                     android:angle="270"  
37.                     android:centerColor="#ff3399CC"  
38.                     android:centerY="0.75"  
39.                     android:endColor="#ff6699CC"  
40.                     android:startColor="#ff0099CC" />  
41.             </shape>  
42.         </clip>  
43.     </item>  
44.   
45. </layer-list>  

布局文件中声明如下：

[html] view plain copy

1. <SeekBar  
2.         android:id="@+id/proSeek1"  
3.         android:layout_width="fill_parent"  
4.         android:layout_height="wrap_content"  
5.         android:layout_below="@id/proSeek2"  
6.         android:paddingBottom="10dp"  
7.         android:paddingLeft="5dp"  
8.         android:paddingRight="5dp"  
9.         android:paddingTop="10dp"  
10.         android:progressDrawable="@drawable/seekbar_style_own"  
11.         android:secondaryProgress="0"  
12.         android:thumb="@drawable/thumb_selector" />  

再下面就是垂直滑动条的实现

布局文件中声明

[html] view plain copy

1. <com.example.seekbar.verSeekBar  
2.         android:id="@+id/verBar"  
3.         android:layout_width="30dip"  
4.         android:layout_height="match_parent"  
5.         android:layout_below="@id/proSeek1"  
6.         android:progressDrawable="@drawable/seekbar_style_own" />  

[html] view plain copy

1. verSeekBar.java文件  

[java] view plain copy

1. package com.example.seekbar;  
2.   
3. /* 
4.  *Author: tanrui 
5.  *Date: 20/1/2010 
6.  */  
7.   
8. import android.content.Context;  
9. import android.graphics.Canvas;  
10. import android.graphics.Rect;  
11. import android.graphics.drawable.Drawable;  
12. import android.util.AttributeSet;  
13. import android.util.Log;  
14. import android.view.KeyEvent;  
15. import android.view.MotionEvent;  
16. import android.view.View;  
17. import android.widget.AbsSeekBar;  
18.   
19. public class verSeekBar extends AbsSeekBar {  
20.     private Drawable mThumb;  
21.     private int height;  
22.     private int width;  
23.       
24.     public static final int TOP = 0;  
25.     public static final int BUTTOM = 1;  
26.       
27.     private int mntype = TOP;  
28.       
29.   
30.     public interface OnSeekBarChangeListener {  
31.         void onProgressChanged(verSeekBar VerticalSeekBar, int progress,  
32.                 boolean fromUser);  
33.   
34.         void onStartTrackingTouch(verSeekBar VerticalSeekBar);  
35.   
36.         void onStopTrackingTouch(verSeekBar VerticalSeekBar);  
37.     }  
38.   
39.     private OnSeekBarChangeListener mOnSeekBarChangeListener;  
40.   
41.     public verSeekBar(Context context) {  
42.         this(context, null);  
43.     }  
44.   
45.     public verSeekBar(Context context, AttributeSet attrs) {  
46.         this(context, attrs, android.R.attr.seekBarStyle);  
47.     }  
48.   
49.     public verSeekBar(Context context, AttributeSet attrs, int defStyle) {  
50.         super(context, attrs, defStyle);  
51.     }  
52.   
53.     public void setOnSeekBarChangeListener(OnSeekBarChangeListener l) {  
54.         mOnSeekBarChangeListener = l;  
55.     }  
56.   
57.     void onStartTrackingTouch() {  
58.         if (mOnSeekBarChangeListener != null) {  
59.             mOnSeekBarChangeListener.onStartTrackingTouch(this);  
60.         }  
61.     }  
62.   
63.     void onStopTrackingTouch() {  
64.         if (mOnSeekBarChangeListener != null) {  
65.             mOnSeekBarChangeListener.onStopTrackingTouch(this);  
66.         }  
67.     }  
68.   
69.     void onProgressRefresh(float scale, boolean fromUser) {  
70.         Log.i("6", "onProgressRefresh==>scale"+scale);  
71.         Drawable thumb = mThumb;  
72.         if (thumb != null) {  
73.             setThumbPos(getHeight(), thumb, scale, Integer.MIN_VALUE);  
74.             invalidate();  
75.         }  
76.         if (mOnSeekBarChangeListener != null) {  
77.             mOnSeekBarChangeListener.onProgressChanged(this, getProgress(),  
78.                     fromUser);  
79.         }  
80.     }  
81.       
82.     public void setType(int type)  
83.     {  
84.         mntype = type;  
85.     }  
86.   
87.     private void setThumbPos(int w, Drawable thumb, float scale, int gap) {  
88.         Log.i("6", "setThumbPos==>w"+w);  
89.         int available = w + getPaddingLeft() - getPaddingRight();  
90.         int thumbWidth = thumb.getIntrinsicWidth();  
91.         int thumbHeight = thumb.getIntrinsicHeight();  
92.         available -= thumbWidth;  
93.         // The extra space for the thumb to move on the track  
94.         available += getThumbOffset()* 2;  
95.         int thumbPos = (int) (scale * available);  
96.         int topBound, bottomBound;  
97.         if (gap == Integer.MIN_VALUE) {  
98.             Rect oldBounds = thumb.getBounds();  
99.             topBound = oldBounds.top;  
100.             bottomBound = oldBounds.bottom;  
101.         } else {  
102.             topBound = gap;  
103.             bottomBound = gap + thumbHeight;  
104.         }  
105.         thumb.setBounds(thumbPos, topBound, thumbPos + thumbWidth, bottomBound);  
106.     }  
107.   
108.     protected void onDraw(Canvas c) {  
109.         Log.i("6", "onDraw==>height"+height);  
110.         if(mntype == TOP)  
111.         {  
112.         c.rotate(90);  
113.         c.translate(0, -width);  
114.         }  
115.         else {  
116.             c.rotate(-90);  
117.             c.translate(-height, 0);  
118.         }  
119.         super.onDraw(c);  
120.     }  
121.   
122.     protected synchronized void onMeasure(int widthMeasureSpec,  
123.             int heightMeasureSpec) {  
124.         // width = 200;  
125.         // height = 120;  
126.         height = View.MeasureSpec.getSize(heightMeasureSpec);  
127.         width = View.MeasureSpec.getSize(widthMeasureSpec);  
128.         Log.i("6", "onMeasure==>height,,width"+height+"     "+width);  
129.         this.setMeasuredDimension(width, height);  
130.   
131.     }  
132.   
133.     @Override  
134.     public void setThumb(Drawable thumb) {  
135.         mThumb = thumb;  
136.         super.setThumb(thumb);  
137.     }  
138.   
139.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
140.         Log.i("6", "onSizeChanged==>w,,h,,oldw,,oldh"+w+"     "+h+"     "+oldw+"     "+oldh);  
141.         super.onSizeChanged(h, w, oldw, oldh);  
142.     }  
143.   
144.     public boolean onTouchEvent(MotionEvent event) {  
145.         if (!isEnabled()) {  
146.             return false;  
147.         }  
148.         switch (event.getAction()) {  
149.         case MotionEvent.ACTION_DOWN:  
150.             setPressed(true);  
151.             onStartTrackingTouch();  
152.             trackTouchEvent(event);  
153.             break;  
154.   
155.         case MotionEvent.ACTION_MOVE:  
156.             trackTouchEvent(event);  
157.             attemptClaimDrag();  
158.             break;  
159.   
160.         case MotionEvent.ACTION_UP:  
161.             trackTouchEvent(event);  
162.             onStopTrackingTouch();  
163.             setPressed(false);  
164.             break;  
165.   
166.         case MotionEvent.ACTION_CANCEL:  
167.             onStopTrackingTouch();  
168.             setPressed(false);  
169.             break;  
170.         }  
171.         return true;  
172.     }  
173.   
174.     private void trackTouchEvent(MotionEvent event) {  
175.         final int Height = getHeight();  
176.         Log.i("6", "trackTouchEvent==>Height"+Height);  
177.         final int available = Height - getPaddingBottom() - getPaddingTop();  
178.         int Y = (int) event.getY();  
179.         Log.i("6", "trackTouchEvent==>Y"+Y);  
180.         float scale;  
181.         float progress = 0;  
182.         if (Y > Height - getPaddingBottom()) {  
183.             scale = 1.0f;  
184.         } else if (Y < getPaddingTop()) {  
185.             scale = 0.0f;  
186.         } else {  
187.             scale = (float) (Y)  
188.                     / (float) available;  
189.         }  
190.   
191.         final int max = getMax();  
192.         progress = scale * max;  
193.         int temp;  
194.         if(mntype == TOP)  
195.         {  
196.             temp = (int) progress;  
197.         }  
198.         else  
199.         {  
200.             temp = (int) (max - progress);  
201.         }  
202.         setProgress(temp);  
203.     }  
204.   
205.     private void attemptClaimDrag() {  
206.         if (getParent() != null) {  
207.             getParent().requestDisallowInterceptTouchEvent(true);  
208.         }  
209.     }  
210.   
211.     public boolean dispatchKeyEvent(KeyEvent event) {  
212.         if (event.getAction() == KeyEvent.ACTION_DOWN) {  
213.             KeyEvent newEvent = null;  
214.             switch (event.getKeyCode()) {  
215.             case KeyEvent.KEYCODE_DPAD_UP:  
216.                 newEvent = new KeyEvent(KeyEvent.ACTION_DOWN,  
217.                         KeyEvent.KEYCODE_DPAD_RIGHT);  
218.                 break;  
219.             case KeyEvent.KEYCODE_DPAD_DOWN:  
220.                 newEvent = new KeyEvent(KeyEvent.ACTION_DOWN,  
221.                         KeyEvent.KEYCODE_DPAD_LEFT);  
222.                 break;  
223.             case KeyEvent.KEYCODE_DPAD_LEFT:  
224.                 newEvent = new KeyEvent(KeyEvent.ACTION_DOWN,  
225.                         KeyEvent.KEYCODE_DPAD_DOWN);  
226.                 break;  
227.             case KeyEvent.KEYCODE_DPAD_RIGHT:  
228.                 newEvent = new KeyEvent(KeyEvent.ACTION_DOWN,  
229.                         KeyEvent.KEYCODE_DPAD_UP);  
230.                 break;  
231.             default:  
232.                 newEvent = new KeyEvent(KeyEvent.ACTION_DOWN, event  
233.                         .getKeyCode());  
234.                 break;  
235.             }  
236.             return newEvent.dispatch(this);  
237.         }  
238.         return false;  
239.     }  
240. }  

另外一个只是更新样式就可以，这里就不写出来了，附上源码供大家参考

点击打开链接

上面提到的图片不能根据控件大小进行拉伸找到解决办法了，原来Android给我们提供了一个工具制作9.png格式的文件，这种格式的图片可以根据控件大小自适应调节大小而不失真。这个工具是draw9patch.bat  在Android  SDK的tools目录下可以找到。来看下修改过后的效果

是不是比上面那张好看多了，只需要把.png格式的图片用工具改成9.png格式就OK了。