Android常用控件之SeekBar的使用

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

Android常用控件之SeekBar的使用_第1张图片

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

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

<SeekBar        android:id="@+id/seekbar"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_alignParentTop="true" />

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

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

<SeekBar        android:id="@+id/proSeek"        style="?android:attr/progressBarStyleHorizontal"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_below="@id/seekbar"        android:layout_gravity="center_vertical"        android:paddingLeft="5dp"        android:paddingRight="5dp"        android:progressDrawable="@drawable/seekbar_style"        android:secondaryProgress="0"        android:thumb="@drawable/thumb_selector" />

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

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android"     android:opacity="transparent">    <item        android:id="@android:id/background"        android:drawable="@drawable/player_progress_bg"/>    <item        android:id="@android:id/secondaryProgress"        android:drawable="@drawable/player_progress_buffering">    </item>    <item        android:id="@android:id/progress"        android:drawable="@drawable/player_progress_playing">    </item></layer-list>

滑块thumb_selector.xml 定义

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/voice_thumb_press"         android:state_pressed="true"/>    <item android:drawable="@drawable/voice_thumb_normal"         android:state_enabled="true"         android:state_focused="true"         android:state_window_focused="true"/>    <item android:drawable="@drawable/voice_thumb_normal"/></selector>

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

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

关键代码如下：

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

<com.example.seekbar.mSeekBar        android:id="@+id/proSeek2"        style="?android:attr/progressBarStyleHorizontal"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_below="@id/proSeek"        android:layout_gravity="center_vertical"        android:paddingLeft="5dp"        android:paddingRight="5dp"        android:progressDrawable="@drawable/seekbar_style_1"        android:secondaryProgress="0"        android:thumb="@drawable/thumb_selector" />

修改滑块的关键代码

public mSeekBar(Context context, AttributeSet attrs) {super(context, attrs);paint = new Paint();paint.setTextAlign(Paint.Align.CENTER);paint.setColor(Color.BLUE);res = context.getResources();bmp = BitmapFactory.decodeResource(res, R.drawable.voice_thumb_press);thumb = new BitmapDrawable(res, bmp);bmpPro = BitmapFactory.decodeResource(res, R.drawable.player_progress_bg);Progress = new BitmapDrawable(res, bmpPro);// 判断屏幕大小 符合条件进行缩放thumbif (Pixels.getpixels_x(100) < ScreenWidth&& Pixels.getpixels_y(100) < screenHeight) {thumb = zoomDrawable(thumb, bmp.getWidth(), bmp.getHeight());} else {paint.setTextSize(20);}Progress = zoomDrawable(Progress, bmpPro.getWidth(), bmpPro.getHeight());// 设置拖动的图片setThumb(thumb);// 图片的位置setThumbOffset(thumb.getIntrinsicWidth());setBackgroundDrawable(Progress);}

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

主要是下面这个样式文件

seekbar_style_own.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">        <shape>            <corners android:radius="5dip" />            <gradient                android:angle="270"                android:centerColor="#ff5a5d5a"                android:centerY="0.75"                android:endColor="#ff747674"                android:startColor="#ff9d9e9d" />        </shape>    </item>    <item android:id="@android:id/secondaryProgress">        <clip>            <shape>                <corners android:radius="5dip" />                <gradient                    android:angle="270"                    android:centerColor="#80ffb600"                    android:centerY="0.75"                    android:endColor="#a0ffcb00"                    android:startColor="#80ffd300" />            </shape>        </clip>    </item>    <item android:id="@android:id/progress">        <clip>            <shape>                <corners android:radius="5dip" />                <gradient                    android:angle="270"                    android:centerColor="#ff3399CC"                    android:centerY="0.75"                    android:endColor="#ff6699CC"                    android:startColor="#ff0099CC" />            </shape>        </clip>    </item></layer-list>

布局文件中声明如下：

<SeekBar        android:id="@+id/proSeek1"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_below="@id/proSeek2"        android:paddingBottom="10dp"        android:paddingLeft="5dp"        android:paddingRight="5dp"        android:paddingTop="10dp"        android:progressDrawable="@drawable/seekbar_style_own"        android:secondaryProgress="0"        android:thumb="@drawable/thumb_selector" />

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

布局文件中声明

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

verSeekBar.java文件

package com.example.seekbar;/* *Author: tanrui *Date: 20/1/2010 */import android.content.Context;import android.graphics.Canvas;import android.graphics.Rect;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.util.Log;import android.view.KeyEvent;import android.view.MotionEvent;import android.view.View;import android.widget.AbsSeekBar;public class verSeekBar extends AbsSeekBar {private Drawable mThumb;private int height;private int width;public static final int TOP = 0;public static final int BUTTOM = 1;private int mntype = TOP;public interface OnSeekBarChangeListener {void onProgressChanged(verSeekBar VerticalSeekBar, int progress,boolean fromUser);void onStartTrackingTouch(verSeekBar VerticalSeekBar);void onStopTrackingTouch(verSeekBar VerticalSeekBar);}private OnSeekBarChangeListener mOnSeekBarChangeListener;public verSeekBar(Context context) {this(context, null);}public verSeekBar(Context context, AttributeSet attrs) {this(context, attrs, android.R.attr.seekBarStyle);}public verSeekBar(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}public void setOnSeekBarChangeListener(OnSeekBarChangeListener l) {mOnSeekBarChangeListener = l;}void onStartTrackingTouch() {if (mOnSeekBarChangeListener != null) {mOnSeekBarChangeListener.onStartTrackingTouch(this);}}void onStopTrackingTouch() {if (mOnSeekBarChangeListener != null) {mOnSeekBarChangeListener.onStopTrackingTouch(this);}}void onProgressRefresh(float scale, boolean fromUser) {Log.i("6", "onProgressRefresh==>scale"+scale);Drawable thumb = mThumb;if (thumb != null) {setThumbPos(getHeight(), thumb, scale, Integer.MIN_VALUE);invalidate();}if (mOnSeekBarChangeListener != null) {mOnSeekBarChangeListener.onProgressChanged(this, getProgress(),fromUser);}}public void setType(int type){mntype = type;}private void setThumbPos(int w, Drawable thumb, float scale, int gap) {Log.i("6", "setThumbPos==>w"+w);int available = w + getPaddingLeft() - getPaddingRight();int thumbWidth = thumb.getIntrinsicWidth();int thumbHeight = thumb.getIntrinsicHeight();available -= thumbWidth;// The extra space for the thumb to move on the trackavailable += getThumbOffset()* 2;int thumbPos = (int) (scale * available);int topBound, bottomBound;if (gap == Integer.MIN_VALUE) {Rect oldBounds = thumb.getBounds();topBound = oldBounds.top;bottomBound = oldBounds.bottom;} else {topBound = gap;bottomBound = gap + thumbHeight;}thumb.setBounds(thumbPos, topBound, thumbPos + thumbWidth, bottomBound);}protected void onDraw(Canvas c) {Log.i("6", "onDraw==>height"+height);if(mntype == TOP){c.rotate(90);c.translate(0, -width);}else {c.rotate(-90);c.translate(-height, 0);}super.onDraw(c);}protected synchronized void onMeasure(int widthMeasureSpec,int heightMeasureSpec) {// width = 200;// height = 120;height = View.MeasureSpec.getSize(heightMeasureSpec);width = View.MeasureSpec.getSize(widthMeasureSpec);Log.i("6", "onMeasure==>height,,width"+height+"     "+width);this.setMeasuredDimension(width, height);}@Overridepublic void setThumb(Drawable thumb) {mThumb = thumb;super.setThumb(thumb);}protected void onSizeChanged(int w, int h, int oldw, int oldh) {Log.i("6", "onSizeChanged==>w,,h,,oldw,,oldh"+w+"     "+h+"     "+oldw+"     "+oldh);super.onSizeChanged(h, w, oldw, oldh);}public boolean onTouchEvent(MotionEvent event) {if (!isEnabled()) {return false;}switch (event.getAction()) {case MotionEvent.ACTION_DOWN:setPressed(true);onStartTrackingTouch();trackTouchEvent(event);break;case MotionEvent.ACTION_MOVE:trackTouchEvent(event);attemptClaimDrag();break;case MotionEvent.ACTION_UP:trackTouchEvent(event);onStopTrackingTouch();setPressed(false);break;case MotionEvent.ACTION_CANCEL:onStopTrackingTouch();setPressed(false);break;}return true;}private void trackTouchEvent(MotionEvent event) {final int Height = getHeight();Log.i("6", "trackTouchEvent==>Height"+Height);final int available = Height - getPaddingBottom() - getPaddingTop();int Y = (int) event.getY();Log.i("6", "trackTouchEvent==>Y"+Y);float scale;float progress = 0;if (Y > Height - getPaddingBottom()) {scale = 1.0f;} else if (Y < getPaddingTop()) {scale = 0.0f;} else {scale = (float) (Y)/ (float) available;}final int max = getMax();progress = scale * max;int temp;if(mntype == TOP){temp = (int) progress;}else{temp = (int) (max - progress);}setProgress(temp);}private void attemptClaimDrag() {if (getParent() != null) {getParent().requestDisallowInterceptTouchEvent(true);}}public boolean dispatchKeyEvent(KeyEvent event) {if (event.getAction() == KeyEvent.ACTION_DOWN) {KeyEvent newEvent = null;switch (event.getKeyCode()) {case KeyEvent.KEYCODE_DPAD_UP:newEvent = new KeyEvent(KeyEvent.ACTION_DOWN,KeyEvent.KEYCODE_DPAD_RIGHT);break;case KeyEvent.KEYCODE_DPAD_DOWN:newEvent = new KeyEvent(KeyEvent.ACTION_DOWN,KeyEvent.KEYCODE_DPAD_LEFT);break;case KeyEvent.KEYCODE_DPAD_LEFT:newEvent = new KeyEvent(KeyEvent.ACTION_DOWN,KeyEvent.KEYCODE_DPAD_DOWN);break;case KeyEvent.KEYCODE_DPAD_RIGHT:newEvent = new KeyEvent(KeyEvent.ACTION_DOWN,KeyEvent.KEYCODE_DPAD_UP);break;default:newEvent = new KeyEvent(KeyEvent.ACTION_DOWN, event.getKeyCode());break;}return newEvent.dispatch(this);}return false;}}

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

点击打开链接

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

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

当然如果用了9.png的图片，选择图片的配置也需要修改

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android"    android:opacity="transparent" >    <item android:id="@android:id/background">        <nine-patch android:src="@drawable/seek_bg" />    </item>    <item android:id="@android:id/progress">        <clip>            <nine-patch android:src="@drawable/seek_progress" />        </clip>    </item></layer-list>

这样进度条就能正常显示了。

在这里需要感谢石同事给我的帮助！

更多相关文章

随机推荐