自定义View实现环形SeekBar

来源：互联网发布：淘宝在哪里看已买宝贝编辑：程序博客网时间：2024/05/22 02:01

原文地址： http://blog.csdn.net/ly0904010214/article/details/42805363

由于android系统提供的SeekBar是直线型的。但是有些时候我们需要用到其他形状的SeekBar，那么就需要自定义View来实现。这里只是实现了一个环形的，其他形状的类似。

效果图如下

CircleSeekBar文件如下

[java] view plaincopyprint?
package com.lee.circleseekbar.view;  
  
import com.lee.circleseekbar.R;  
  
import android.content.Context;  
import android.content.res.TypedArray;  
import android.graphics.Canvas;  
import android.graphics.Color;  
import android.graphics.Paint;  
import android.graphics.RectF;  
import android.graphics.drawable.Drawable;  
import android.util.AttributeSet;  
import android.util.Log;  
import android.view.MotionEvent;  
import android.view.View;  
  
/** 
 *  
 * CircleSeekBar 
 *  
 * @author lee 
 *  
 */  
  
public class CircleSeekBar extends View {  
  
    private final boolean DEBUG = true;  
    private final String TAG = "CircleSeekBar";  
      
    private Context mContext = null;  
      
    private Drawable mThumbDrawable = null;  
    private int mThumbHeight = 0;  
    private int mThumbWidth = 0;  
    private int[] mThumbNormal = null;  
    private int[] mThumbPressed = null;  
      
    private int mSeekBarMax = 0;  
    private Paint mSeekBarBackgroundPaint = null;  
    private Paint mSeekbarProgressPaint = null;  
    private RectF mArcRectF = null;  
      
    private boolean mIsShowProgressText = false;  
    private Paint mProgressTextPaint = null;  
    private int mProgressTextSize = 0;  
      
    private int mViewHeight = 0;  
    private int mViewWidth = 0;  
    private int mSeekBarSize = 0;  
    private int mSeekBarRadius = 0;  
    private int mSeekBarCenterX = 0;  
    private int mSeekBarCenterY = 0;  
    private float mThumbLeft = 0;  
    private float mThumbTop = 0;  
      
    private float mSeekBarDegree = 0;  
    private int mCurrentProgress = 0;  
      
    private OnSeekBarChangeListener mOnSeekBarChangeListener = null;  
      
    public interface OnSeekBarChangeListener {  
          
        void onProgressChanged(int progress);  
      
        void onStartTrackingTouch();  
          
        void onStopTrackingTouch();  
    }  
      
    public CircleSeekBar(Context context, AttributeSet attrs, int defStyle) {  
        super(context, attrs, defStyle);  
        mContext = context;  
        initViewAttrs(attrs);  
        mArcRectF = new RectF();  
    }  
      
    public CircleSeekBar(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        mContext = context;  
        initViewAttrs(attrs);  
        mArcRectF = new RectF();  
    }  
      
    public CircleSeekBar(Context context) {  
        super(context);  
        mContext = context;  
        initViewDefault();  
        mArcRectF = new RectF();  
    }  
      
    private void initViewAttrs(AttributeSet attrs){  
        if(DEBUG) Log.d(TAG, "initView");  
        TypedArray localTypedArray = mContext.obtainStyledAttributes(attrs, R.styleable.CircleSeekBar);  
          
        //thumb的属性是使用android:thumb属性进行设置的  
        //返回的Drawable为一个StateListDrawable类型，即可以实现选中效果的drawable list  
        //mThumbNormal和mThumbPressed则是用于设置不同状态的效果，当点击thumb时设置mThumbPressed，否则设置mThumbNormal  
        mThumbDrawable = localTypedArray.getDrawable(R.styleable.CircleSeekBar_android_thumb);  
        mThumbWidth = mThumbDrawable.getIntrinsicWidth();  
        mThumbHeight = mThumbDrawable.getIntrinsicHeight();  
          
        mThumbNormal = new int[]{-android.R.attr.state_focused, -android.R.attr.state_pressed,   
                -android.R.attr.state_selected, -android.R.attr.state_checked};  
        mThumbPressed = new int[]{android.R.attr.state_focused, android.R.attr.state_pressed,   
                android.R.attr.state_selected, android.R.attr.state_checked};  
          
        float progressWidth = localTypedArray.getDimension(R.styleable.CircleSeekBar_progress_width, 5);  
        int progressBackgroundColor = localTypedArray.getColor(R.styleable.CircleSeekBar_progress_background, Color.GRAY);  
        int progressFrontColor = localTypedArray.getColor(R.styleable.CircleSeekBar_progress_front, Color.BLUE);  
        mSeekBarMax = localTypedArray.getInteger(R.styleable.CircleSeekBar_progress_max, 100);  
          
        mSeekbarProgressPaint = new Paint();  
        mSeekBarBackgroundPaint = new Paint();  
          
        mSeekbarProgressPaint.setColor(progressFrontColor);  
        mSeekBarBackgroundPaint.setColor(progressBackgroundColor);  
          
        mSeekbarProgressPaint.setAntiAlias(true);  
        mSeekBarBackgroundPaint.setAntiAlias(true);  
          
        mSeekbarProgressPaint.setStyle(Paint.Style.STROKE);  
        mSeekBarBackgroundPaint.setStyle(Paint.Style.STROKE);  
          
        mSeekbarProgressPaint.setStrokeWidth(progressWidth);  
        mSeekBarBackgroundPaint.setStrokeWidth(progressWidth);  
          
        mIsShowProgressText = localTypedArray.getBoolean(R.styleable.CircleSeekBar_show_progress_text, false);  
        int progressTextStroke = (int) localTypedArray.getDimension(R.styleable.CircleSeekBar_progress_text_stroke_width, 5);  
        int progressTextColor = localTypedArray.getColor(R.styleable.CircleSeekBar_progress_text_color, Color.GREEN);  
        mProgressTextSize = (int) localTypedArray.getDimension(R.styleable.CircleSeekBar_progress_text_size, 50);  
          
        mProgressTextPaint = new Paint();  
        mProgressTextPaint.setColor(progressTextColor);  
        mProgressTextPaint.setAntiAlias(true);  
        mProgressTextPaint.setStrokeWidth(progressTextStroke);  
        mProgressTextPaint.setTextSize(mProgressTextSize);  
          
        localTypedArray.recycle();  
    }  
      
    private void initViewDefault(){  
        mThumbDrawable = null;  
        mThumbWidth = 0;  
        mThumbHeight = 0;  
          
        mThumbNormal = new int[]{-android.R.attr.state_focused, -android.R.attr.state_pressed,   
                -android.R.attr.state_selected, -android.R.attr.state_checked};  
        mThumbPressed = new int[]{android.R.attr.state_focused, android.R.attr.state_pressed,   
                android.R.attr.state_selected, android.R.attr.state_checked};  
          
        float progressWidth = 5;  
        int progressBackgroundColor = Color.GRAY;  
        int progressFrontColor = Color.BLUE;  
        mSeekBarMax = 100;  
          
        mSeekbarProgressPaint = new Paint();  
        mSeekBarBackgroundPaint = new Paint();  
          
        mSeekbarProgressPaint.setColor(progressFrontColor);  
        mSeekBarBackgroundPaint.setColor(progressBackgroundColor);  
          
        mSeekbarProgressPaint.setAntiAlias(true);  
        mSeekBarBackgroundPaint.setAntiAlias(true);  
          
        mSeekbarProgressPaint.setStyle(Paint.Style.STROKE);  
        mSeekBarBackgroundPaint.setStyle(Paint.Style.STROKE);  
          
        mSeekbarProgressPaint.setStrokeWidth(progressWidth);  
        mSeekBarBackgroundPaint.setStrokeWidth(progressWidth);  
          
        mIsShowProgressText = false;  
        int progressTextStroke = 5;  
        int progressTextColor = Color.GREEN;  
        mProgressTextSize = 50;  
          
        mProgressTextPaint = new Paint();  
        mProgressTextPaint.setColor(progressTextColor);  
        mProgressTextPaint.setAntiAlias(true);  
        mProgressTextPaint.setStrokeWidth(progressTextStroke);  
        mProgressTextPaint.setTextSize(mProgressTextSize);  
    }  
  
    @Override  
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
        if(DEBUG) Log.d(TAG, "onMeasure");  
        mViewWidth = getWidth();  
        mViewHeight = getHeight();  
          
        mSeekBarSize = mViewWidth > mViewHeight ? mViewHeight : mViewWidth;  
  
        mSeekBarCenterX = mViewWidth / 2;  
        mSeekBarCenterY = mViewHeight / 2;  
          
        mSeekBarRadius = mSeekBarSize / 2 - mThumbWidth / 2;  
          
        int left = mSeekBarCenterX - mSeekBarRadius;  
        int right = mSeekBarCenterX + mSeekBarRadius;  
        int top = mSeekBarCenterY - mSeekBarRadius;  
        int bottom = mSeekBarCenterY + mSeekBarRadius;  
        mArcRectF.set(left, top, right, bottom);  
          
        // 起始位置，三点钟方向  
        setThumbPosition(Math.toRadians(mSeekBarDegree));  
    }  
      
    @Override  
    protected synchronized void onDraw(Canvas canvas) {  
        canvas.drawCircle(mSeekBarCenterX, mSeekBarCenterY, mSeekBarRadius,  
                mSeekBarBackgroundPaint);  
        canvas.drawArc(this.mArcRectF, 0.0F, mSeekBarDegree, false, mSeekbarProgressPaint);  
        drawThumbBitmap(canvas);  
        drawProgressText(canvas);  
          
        super.onDraw(canvas);  
    }  
      
    private void drawThumbBitmap(Canvas canvas) {  
        if(null != mThumbDrawable){  
            mThumbDrawable.setBounds((int) mThumbLeft, (int) mThumbTop,  
                    (int) (mThumbLeft + mThumbWidth), (int) (mThumbTop + mThumbHeight));  
            mThumbDrawable.draw(canvas);  
        }  
    }  
      
    private void drawProgressText(Canvas canvas) {  
        if (true == mIsShowProgressText){  
            float textWidth = mProgressTextPaint.measureText("" + mCurrentProgress);  
            canvas.drawText("" + mCurrentProgress, mSeekBarCenterX - textWidth / 2, mSeekBarCenterY  
                    + mProgressTextSize / 2, mProgressTextPaint);  
        }  
    }  
      
    @Override  
    public boolean onTouchEvent(MotionEvent event) {  
        float eventX = event.getX();  
        float eventY = event.getY();  
        switch (event.getAction()) {  
            case MotionEvent.ACTION_DOWN:  
                if(null != mOnSeekBarChangeListener){  
                    mOnSeekBarChangeListener.onStartTrackingTouch();  
                }  
                seekTo(eventX, eventY, false);  
                break ;  
                  
            case MotionEvent.ACTION_MOVE:  
                seekTo(eventX, eventY, false);  
                break ;  
                  
            case MotionEvent.ACTION_UP:  
                if(null != mOnSeekBarChangeListener){  
                    mOnSeekBarChangeListener.onStopTrackingTouch();  
                }  
                seekTo(eventX, eventY, true);  
                break ;  
        }  
        return true;  
    }  
  
    private void seekTo(float eventX, float eventY, boolean isUp) {  
        if (true == isPointOnThumb(eventX, eventY) && false == isUp) {  
            if(null != mThumbDrawable){  
                mThumbDrawable.setState(mThumbPressed);  
            }  
            double radian = Math.atan2(eventY - mSeekBarCenterY, eventX - mSeekBarCenterX);  
            /* 
             * 由于atan2返回的值为[-pi,pi] 
             * 因此需要将弧度值转换一下，使得区间为[0,2*pi] 
             */  
            if (radian < 0){  
                radian = radian + 2*Math.PI;  
            }  
            if(DEBUG) Log.e(TAG, "seekTo radian = " + radian);  
            setThumbPosition(radian);  
              
            mSeekBarDegree = (float) Math.round(Math.toDegrees(radian));  
            mCurrentProgress = (int) (mSeekBarMax * mSeekBarDegree / 360);  
            if(null != mOnSeekBarChangeListener){  
                mOnSeekBarChangeListener.onProgressChanged(mCurrentProgress);  
            }  
            invalidate();  
        }else{  
            if(null != mThumbDrawable){  
                mThumbDrawable.setState(mThumbNormal);  
            }  
            invalidate();  
        }  
    }  
  
    private boolean isPointOnThumb(float eventX, float eventY) {  
        boolean result = false;  
        double distance = Math.sqrt(Math.pow(eventX - mSeekBarCenterX, 2)  
                + Math.pow(eventY - mSeekBarCenterY, 2));  
        if (distance < mSeekBarSize && distance > (mSeekBarSize / 2 - mThumbWidth)){  
            result = true;  
        }  
        return result;  
    }  
      
    private void setThumbPosition(double radian) {  
        if(DEBUG) Log.v(TAG, "setThumbPosition radian = " + radian);  
        double x = mSeekBarCenterX + mSeekBarRadius * Math.cos(radian);  
        double y = mSeekBarCenterY + mSeekBarRadius * Math.sin(radian);  
        mThumbLeft = (float) (x - mThumbWidth / 2);  
        mThumbTop = (float) (y - mThumbHeight / 2);  
    }  
      
    /* 
     * 增加set方法，用于在java代码中调用 
     */  
    public synchronized void setProgress(int progress) {  
        if(DEBUG) Log.v(TAG, "setProgress progress = " + progress);  
        if (progress > mSeekBarMax){  
            progress = mSeekBarMax;  
        }  
        if (progress < 0){  
            progress = 0;  
        }  
        mCurrentProgress = progress;  
        mSeekBarDegree = (progress * 360 / mSeekBarMax);  
        if(DEBUG) Log.d(TAG, "setProgress mSeekBarDegree = " + mSeekBarDegree);  
        setThumbPosition(Math.toRadians(mSeekBarDegree));  
          
        invalidate();  
    }  
      
    public synchronized int getProgress(){  
        return mCurrentProgress;  
    }  
      
    public synchronized void setProgressMax(int max){  
        if(DEBUG) Log.v(TAG, "setProgressMax max = " + max);  
        mSeekBarMax = max;  
    }  
      
    public synchronized int getProgressMax(){  
        return mSeekBarMax;  
    }  
      
    public void setProgressThumb(int thumbId){  
        mThumbDrawable = mContext.getResources().getDrawable(thumbId);  
        mThumbWidth = mThumbDrawable.getIntrinsicWidth();  
        mThumbHeight = mThumbDrawable.getIntrinsicHeight();  
    }  
      
    public void setProgressWidth(int width){  
        if(DEBUG) Log.v(TAG, "setProgressWidth width = " + width);  
        mSeekbarProgressPaint.setStrokeWidth(width);  
        mSeekBarBackgroundPaint.setStrokeWidth(width);  
    }  
      
    public void setProgressBackgroundColor(int color){  
        mSeekBarBackgroundPaint.setColor(color);  
    }  
      
    public void setProgressFrontColor(int color){  
        mSeekbarProgressPaint.setColor(color);  
    }  
      
    public void setProgressTextColor(int color){  
        mProgressTextPaint.setColor(color);  
    }  
      
    public void setProgressTextSize(int size){  
        if(DEBUG) Log.v(TAG, "setProgressTextSize size = " + size);  
        mProgressTextPaint.setTextSize(size);  
    }  
      
    public void setProgressTextStrokeWidth(int width){  
        if(DEBUG) Log.v(TAG, "setProgressTextStrokeWidth width = " + width);  
        mProgressTextPaint.setStrokeWidth(width);  
    }  
      
    public void setIsShowProgressText(boolean isShow){  
        mIsShowProgressText = isShow;  
    }  
      
    /* 
     * 增加SeekBar change的监听 
     */  
      
    public void setOnSeekBarChangeListener(OnSeekBarChangeListener onSeekBarChangeListener){  
        mOnSeekBarChangeListener = onSeekBarChangeListener;  
    }  
}  

xml文件如下

[html] view plaincopyprint?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:circle_seekbar="http://schemas.android.com/apk/res/com.lee.circleseekbar"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent" >  
  
    <com.lee.circleseekbar.view.CircleSeekBar  
        android:id="@+id/circle_seekbar"  
        android:layout_width="200dp"  
        android:layout_height="200dp"  
        android:layout_centerInParent="true"  
        android:thumb="@drawable/thumb"  
        circle_seekbar:progress_background="@android:color/darker_gray"  
        circle_seekbar:progress_front="@android:color/holo_blue_light"  
        circle_seekbar:progress_max="1000"  
        circle_seekbar:progress_text_color="@android:color/holo_green_light"  
        circle_seekbar:progress_text_size="30dp"  
        circle_seekbar:progress_text_stroke_width="4dp"  
        circle_seekbar:progress_width="2dp"  
        circle_seekbar:show_progress_text="true" />  
  
</RelativeLayout>  

attrs属性文件如下

[html] view plaincopyprint?
<?xml version="1.0" encoding="utf-8"?>  
<resources>  
  
    <declare-styleable name="CircleSeekBar">  
        <attr name="android:thumb" />  
        <attr name="progress_width" format="dimension" />  
        <attr name="progress_background" format="color" />  
        <attr name="progress_front" format="color" />  
        <attr name="progress_max" format="integer" />  
        <attr name="show_progress_text" format="boolean" />  
        <attr name="progress_text_stroke_width" format="dimension" />  
        <attr name="progress_text_color" format="color" />  
        <attr name="progress_text_size" format="dimension" />  
    </declare-styleable>  
  
</resources>  

activity文件如下

[java] view plaincopyprint?
package com.lee.circleseekbar;  
  
import android.app.Activity;  
import android.graphics.Color;  
import android.os.Bundle;  
import android.util.Log;  
import android.view.LayoutInflater;  
import android.widget.RelativeLayout;  
  
import com.lee.circleseekbar.view.CircleSeekBar;  
import com.lee.circleseekbar.view.CircleSeekBar.OnSeekBarChangeListener;  
  
public class MainActivity extends Activity {  
  
    private final boolean DEBUG = true;  
    private final String TAG = "MainActivity";  
      
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        RelativeLayout mainLayout = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.activity_main, null);  
        setContentView(mainLayout);  
          
        CircleSeekBar circleSeekBar = (CircleSeekBar) findViewById(R.id.circle_seekbar);  
        circleSeekBar.setProgress(100);  
        circleSeekBar.setProgressFrontColor(Color.RED);  
        circleSeekBar.setOnSeekBarChangeListener(new CircleSeekBarOnChangeListener());  
      
        CircleSeekBar circleSeekBar2 = new CircleSeekBar(this);  
        circleSeekBar2.setProgress(10);  
        circleSeekBar2.setProgressFrontColor(Color.RED);  
        circleSeekBar2.setProgressThumb(R.drawable.thumb);  
        circleSeekBar2.setOnSeekBarChangeListener(new CircleSeekBarOnChangeListener());  
        RelativeLayout.LayoutParams circleSeekBarParams = new RelativeLayout.LayoutParams(200, 200);  
        circleSeekBarParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);  
        mainLayout.addView(circleSeekBar2, circleSeekBarParams);  
    }  
  
    private class CircleSeekBarOnChangeListener implements OnSeekBarChangeListener{  
  
        @Override  
        public void onProgressChanged(int progress) {  
            if(DEBUG) Log.d(TAG, "onProgressChanged progress = " + progress);  
        }  
  
        @Override  
        public void onStartTrackingTouch() {  
            if(DEBUG) Log.d(TAG, "onStartTrackingTouch");  
        }  
  
        @Override  
        public void onStopTrackingTouch() {  
            if(DEBUG) Log.d(TAG, "onStopTrackingTouch");  
        }  
          
    }  
      
}  

Demo下载地址

http://download.csdn.net/detail/ly0904010214/8373347

1 0