android CircularSeekBar

Android 中的 seekBar会被开发者经常用到，用的最多的空拍是控制音量。但是有时后为了更好的UI效果，横着的拖动条不能满足我们项目的需要，我们可能需要竖直的或者圆形的拖动条，那这两种样式的类SeekBar的效果如何实现呢，接下来小编会一一给出效果和源码。接下来，先说一说圆形的效果吧，有图有真相，请看图：

       

看过图之后是不是觉得很炫，自己赞一个，下面给出源码：

 

/values/attr.xml:  

 

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="HoloCircleSeekBar">
        <attr name="wheel_size" format="integer" />
        <attr name="pointer_size" format="integer" />
        <attr name="max" format="integer"></attr>
        <attr name="show_text" format="boolean"></attr>
        <attr name="start_angle" format="integer"></attr>
        <attr name="end_angle" format="integer"></attr>
        <attr name="text_size" format="integer"></attr>
        <attr name="init_position" format="integer"></attr>
        <attr name="color" format="string"></attr>
        <attr name="wheel_active_color" format="string"></attr>
        <attr name="wheel_unactive_color" format="string"></attr>
        <attr name="pointer_color" format="string"></attr>
        <attr name="pointer_halo_color" format="string"></attr>
        <attr name="text_color" format="string"></attr>
    </declare-styleable>

</resources>

ZJBCircleSeekBar.java:

 

 

package com.example.circleseekbar;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.SweepGradient;
import android.os.Bundle;
import android.os.Parcelable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * @author zjbpku
 * @time 2013-08-21
 * @blog http://blog.csdn.net/zjbpku
 */

public class ZJBCircleSeekBar extends View {
    /**
     * 保存状态
     */
    private static final String STATE_PARENT = "parent";
    private static final String STATE_ANGLE = "angle";

    /***
     * 事件监听
     */
    private OnCircleSeekBarChangeListener mOnCircleSeekBarChangeListener;

    /**
     * 圆环paint对象
     */
    private Paint mColorWheelPaint;

    /**
     * 游标paint对象
     */
    private Paint mPointerHaloPaint;

    /**
     * 游标为图画时的paint对象
     */
    private Paint mPointerColor;

    /**
     * 圆环的宽度
     */
    private final int mColorWheelStrokeWidth = 10;

    /**
     * 游标所在圆环半径
     */
    private final int mPointerRadius = 80;

    /**
     * The rectangle enclosing the color wheel.
     */
    private RectF mColorWheelRectangle = new RectF();

    /**
     * {@code true} 点击游标 {@code false} 停止
     *
     * @see #onTouchEvent(MotionEvent)
     */
    private boolean mUserIsMovingPointer = false;

    /**
     *
     */
    private float mTranslationOffset;

    /**
     * 圆环半径 Note: (Re)在onMeasure计算{@link #onMeasure(int, int)}
     */
    private float mColorWheelRadius;

    private float mAngle;
    private String text;
    private int conversion = 0;
    private int max = 100;
    private String color_attr;
    private SweepGradient s;
    private Paint mArcColor;
    private String wheel_color_attr, wheel_unactive_color_attr,
            pointer_color_attr, pointer_halo_color_attr;
    private int init_position;
    private boolean block_end = false;
    private float lastX;
    private int last_radians = 0;
    private boolean block_start = false;

    private int arc_finish_radians = 270;
    // 左下角开始
    private int start_arc = 135;

    private float[] pointerPosition;
    private Paint mColorCenterHalo;
    private RectF mColorCenterHaloRectangle = new RectF();
    private int end_wheel;

    private Bitmap pointerBitmap;
    private boolean show_text = false;

    public ZJBCircleSeekBar(Context context) {
        super(context);
        init(null, 0);
    }

    public ZJBCircleSeekBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs, 0);
    }

    public ZJBCircleSeekBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(attrs, defStyle);
    }

    private void init(AttributeSet attrs, int defStyle) {
        final TypedArray a = getContext().obtainStyledAttributes(attrs,
                R.styleable.HoloCircleSeekBar, defStyle, 0);

        initAttributes(a);

        a.recycle();
        // mAngle = (float) (-Math.PI / 2);

        mColorWheelPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mColorWheelPaint.setShader(s);
        mColorWheelPaint.setColor(Color.BLACK);
        mColorWheelPaint.setStyle(Paint.Style.STROKE);
        mColorWheelPaint.setStrokeWidth(mColorWheelStrokeWidth);

        mColorCenterHalo = new Paint(Paint.ANTI_ALIAS_FLAG);
        mColorCenterHalo.setColor(Color.CYAN);
        mColorCenterHalo.setAlpha(0xCC);
        // mColorCenterHalo.setStyle(Paint.Style.STROKE);
        // mColorCenterHalo.setStrokeWidth(mColorCenterHaloRectangle.width() /
        // 2);

        mPointerHaloPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPointerHaloPaint.setColor(Color.GREEN);
        mPointerHaloPaint.setStrokeWidth(mPointerRadius + 10);
        // mPointerHaloPaint.setAlpha(150);
        // 游标图片
        pointerBitmap = BitmapFactory.decodeResource(this.getResources(),
                R.drawable.pointer);

        mPointerColor = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPointerColor.setStrokeWidth(mPointerRadius);

        // 设置游标指针的颜色
        mPointerColor.setColor(Color.GREEN);

        // 设置游标滑过的背景属性
        mArcColor = new Paint(Paint.ANTI_ALIAS_FLAG);
        mArcColor.setColor(Color.GREEN);
        mArcColor.setStyle(Paint.Style.STROKE);
        mArcColor.setStrokeWidth(mColorWheelStrokeWidth);

        arc_finish_radians = (int) calculateAngleFromText(init_position) - 90;

        if (arc_finish_radians > end_wheel)
            arc_finish_radians = end_wheel;
        mAngle = calculateAngleFromRadians(arc_finish_radians > end_wheel ? end_wheel
                : arc_finish_radians);
        text = String.valueOf(calculateTextFromAngle(arc_finish_radians));

        invalidate();
    }

    private void initAttributes(TypedArray a) {

        max = a.getInteger(R.styleable.HoloCircleSeekBar_max, 100);

        color_attr = a.getString(R.styleable.HoloCircleSeekBar_color);
        wheel_color_attr = a
                .getString(R.styleable.HoloCircleSeekBar_wheel_active_color);
        wheel_unactive_color_attr = a
                .getString(R.styleable.HoloCircleSeekBar_wheel_unactive_color);
        pointer_color_attr = a
                .getString(R.styleable.HoloCircleSeekBar_pointer_color);
        pointer_halo_color_attr = a
                .getString(R.styleable.HoloCircleSeekBar_pointer_halo_color);

        a.getString(R.styleable.HoloCircleSeekBar_text_color);

        a.getInteger(R.styleable.HoloCircleSeekBar_text_size, 95);

        init_position = a.getInteger(
                R.styleable.HoloCircleSeekBar_init_position, 0);

        start_arc = a.getInteger(R.styleable.HoloCircleSeekBar_start_angle, 0);
        end_wheel = a.getInteger(R.styleable.HoloCircleSeekBar_end_angle, 360);

        show_text = a.getBoolean(R.styleable.HoloCircleSeekBar_show_text, true);

        last_radians = end_wheel;

        if (init_position < start_arc)
            init_position = calculateTextFromStartAngle(start_arc);

        // mAngle = (float) calculateAngleFromText(init_position);

        if (color_attr != null) {
            try {
                Color.parseColor(color_attr);
            } catch (IllegalArgumentException e) {
            }
            Color.parseColor(color_attr);
        } else {
        }

        if (wheel_color_attr != null) {
            try {
                Color.parseColor(wheel_color_attr);
            } catch (IllegalArgumentException e) {
            }

        } else {
        }
        if (wheel_unactive_color_attr != null) {
            try {
                Color.parseColor(wheel_unactive_color_attr);
            } catch (IllegalArgumentException e) {
            }

        } else {
        }

        if (pointer_color_attr != null) {
            try {
                Color.parseColor(pointer_color_attr);
            } catch (IllegalArgumentException e) {
            }

        } else {
        }

        if (pointer_halo_color_attr != null) {
            try {
                Color.parseColor(pointer_halo_color_attr);
            } catch (IllegalArgumentException e) {
            }

        } else {
        }

    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.translate(mTranslationOffset, mTranslationOffset);

        // 滑过的弧
        canvas.drawArc(mColorWheelRectangle, start_arc + 270, end_wheel
                - (start_arc), false, mColorWheelPaint);

        // 背景弧
        canvas.drawArc(mColorWheelRectangle, start_arc + 270,
                (arc_finish_radians) > (end_wheel) ? end_wheel - (start_arc)
                        : arc_finish_radians - start_arc, false, mArcColor);
        // 游标为圆形
        // canvas.drawCircle(pointerPosition[0], pointerPosition[1],
        // mPointerRadius, mPointerHaloPaint);
        //
        // canvas.drawCircle(pointerPosition[0], pointerPosition[1],
        // (float) (mPointerRadius / 1.2), mPointerColor);

        // 游标为方形
        // canvas.drawRect(pointerPosition[0] - 50, pointerPosition[1] - 30,
        // pointerPosition[0] + 50, pointerPosition[1] + 30, mPointerColor);

        // 游标为图片
        canvas.drawBitmap(pointerBitmap, pointerPosition[0] - 50,
                pointerPosition[1] - 115, null);

        // 添加游标上的文字
        Paint pai = new Paint();
        pai.setColor(Color.BLACK);
        pai.setTextSize(50);
        canvas.drawText(text, pointerPosition[0] - 30, pointerPosition[1] - 40,
                pai);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int height = getDefaultSize(getSuggestedMinimumHeight(),
                heightMeasureSpec);
        int width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        int min = Math.min(width, height);
        setMeasuredDimension(min, min);

        mTranslationOffset = min * 0.5f;
        mColorWheelRadius = mTranslationOffset - mPointerRadius;

        mColorWheelRectangle.set(-mColorWheelRadius, -mColorWheelRadius,
                mColorWheelRadius, mColorWheelRadius);

        mColorCenterHaloRectangle.set(-mColorWheelRadius / 2,
                -mColorWheelRadius / 2, mColorWheelRadius / 2,
                mColorWheelRadius / 2);

        pointerPosition = calculatePointerPosition(mAngle);

    }

    private int calculateTextFromAngle(float angle) {
        float m = angle - start_arc;

        float f = (float) ((end_wheel - start_arc) / m);

        return (int) (max / f);
    }

    private int calculateTextFromStartAngle(float angle) {
        float m = angle;

        float f = (float) ((end_wheel - start_arc) / m);

        return (int) (max / f);
    }

    private double calculateAngleFromText(int position) {
        if (position == 0 || position >= max)
            return (float) 90;

        double f = (double) max / (double) position;

        double f_r = 360 / f;

        double ang = f_r + 90;

        return ang;

    }

    private int calculateRadiansFromAngle(float angle) {
        float unit = (float) (angle / (2 * Math.PI));
        if (unit < 0) {
            unit += 1;
        }
        int radians = (int) ((unit * 360) - ((360 / 4) * 3));
        if (radians < 0)
            radians += 360;
        return radians;
    }

    private float calculateAngleFromRadians(int radians) {
        return (float) (((radians + 270) * (2 * Math.PI)) / 360);
    }

    public int getValue() {
        return conversion;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // Convert coordinates to our internal coordinate system
        float x = event.getX() - mTranslationOffset;
        float y = event.getY() - mTranslationOffset;

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            // Check whether the user pressed on (or near) the pointer
            mAngle = (float) java.lang.Math.atan2(y, x);

            block_end = false;
            block_start = false;
            mUserIsMovingPointer = true;

            arc_finish_radians = calculateRadiansFromAngle(mAngle);

            if (arc_finish_radians > end_wheel) {
                arc_finish_radians = end_wheel;
                block_end = true;
            }

            if (!block_end && !block_start) {
                text = String
                        .valueOf(calculateTextFromAngle(arc_finish_radians));
                pointerPosition = calculatePointerPosition(mAngle);
                invalidate();
            }
            break;
        case MotionEvent.ACTION_MOVE:
            if (mUserIsMovingPointer) {
                mAngle = (float) java.lang.Math.atan2(y, x);

                int radians = calculateRadiansFromAngle(mAngle);

                if (last_radians > radians && radians < (360 / 6) && x > lastX
                        && last_radians > (360 / 6)) {

                    if (!block_end && !block_start)
                        block_end = true;

                } else if (last_radians >= start_arc
                        && last_radians <= (360 / 4) && radians <= (360 - 1)
                        && radians >= ((360 / 4) * 3) && x < lastX) {
                    if (!block_start && !block_end)
                        block_start = true;

                } else if (radians >= end_wheel && !block_start
                        && last_radians < radians) {
                    block_end = true;
                } else if (radians < end_wheel && block_end
                        && last_radians > end_wheel) {
                    block_end = false;
                } else if (radians < start_arc && last_radians > radians
                        && !block_end) {
                    block_start = true;
                } else if (block_start && last_radians < radians
                        && radians > start_arc && radians < end_wheel) {
                    block_start = false;
                }

                if (block_end) {

                    arc_finish_radians = end_wheel - 1;
                    text = String.valueOf(0);
                    mAngle = calculateAngleFromRadians(arc_finish_radians);
                    pointerPosition = calculatePointerPosition(mAngle);
                } else if (block_start) {

                    arc_finish_radians = start_arc;
                    mAngle = calculateAngleFromRadians(arc_finish_radians);
                    text = String.valueOf(0);
                    pointerPosition = calculatePointerPosition(mAngle);
                } else {
                    // text = String.valueOf(calculateTextFromAngle(mAngle));
                    arc_finish_radians = calculateRadiansFromAngle(mAngle);
                    text = String
                            .valueOf(calculateTextFromAngle(arc_finish_radians));
                    pointerPosition = calculatePointerPosition(mAngle);
                }
                invalidate();
                if (mOnCircleSeekBarChangeListener != null)
                    mOnCircleSeekBarChangeListener.onProgressChanged(this,
                            Integer.parseInt(text), true);

                last_radians = radians;

            }
            break;
        case MotionEvent.ACTION_UP:
            mUserIsMovingPointer = false;
            break;
        }
        if (event.getAction() == MotionEvent.ACTION_MOVE && getParent() != null) {
            getParent().requestDisallowInterceptTouchEvent(true);
        }
        lastX = x;

        return true;
    }

    /**
     * Calculate the pointer's coordinates on the color wheel using the supplied
     * angle.
     *
     * @param angle
     *            The position of the pointer expressed as angle (in rad).
     *
     * @return The coordinates of the pointer's center in our internal
     *         coordinate system.
     */
    private float[] calculatePointerPosition(float angle) {
        // if (calculateRadiansFromAngle(angle) > end_wheel)
        // angle = calculateAngleFromRadians(end_wheel);
        float x = (float) (mColorWheelRadius * Math.cos(angle));
        float y = (float) (mColorWheelRadius * Math.sin(angle));

        return new float[] { x, y };
    }

    @Override
    protected Parcelable onSaveInstanceState() {
        Parcelable superState = super.onSaveInstanceState();

        Bundle state = new Bundle();
        state.putParcelable(STATE_PARENT, superState);
        state.putFloat(STATE_ANGLE, mAngle);

        return state;
    }

    @Override
    protected void onRestoreInstanceState(Parcelable state) {
        Bundle savedState = (Bundle) state;

        Parcelable superState = savedState.getParcelable(STATE_PARENT);
        super.onRestoreInstanceState(superState);

        mAngle = savedState.getFloat(STATE_ANGLE);
        arc_finish_radians = calculateRadiansFromAngle(mAngle);
        text = String.valueOf(calculateTextFromAngle(arc_finish_radians));
        pointerPosition = calculatePointerPosition(mAngle);

    }

    public void setOnSeekBarChangeListener(OnCircleSeekBarChangeListener l) {
        mOnCircleSeekBarChangeListener = l;
    }

    public interface OnCircleSeekBarChangeListener {

        public abstract void onProgressChanged(ZJBCircleSeekBar seekBar,
                int progress, boolean fromUser);

    }

}

/layout/activity_main.xml:

 

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="center_horizontal"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="80dp"
        android:gravity="center_horizontal"
        android:textSize="60sp"
        android:textColor="#ffff0000"
        />

    <com.example.circleseekbar.HoloCircleSeekBar
        android:id="@+id/c"
        android:layout_width="500px"
        android:layout_height="500px"
        android:layout_centerInParent="true" />

</RelativeLayout>

MainActivity.java:

 

 

package com.example.circleseekbar;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

import com.example.circleseekbar.ZJBCircleSeekBar.OnCircleSeekBarChangeListener;

/**
 * @author zjbpku
 * @time 2013-08-21
 * @blog http://blog.csdn.net/zjbpku
 */
public class MainActivity extends Activity implements
        OnCircleSeekBarChangeListener {

    private ZJBCircleSeekBar circleSeekBar;
    TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        circleSeekBar = (ZJBCircleSeekBar) findViewById(R.id.c);
        textView = (TextView) findViewById(R.id.text);
        circleSeekBar.setOnSeekBarChangeListener(this);
    }

    @Override
    public void onProgressChanged(ZJBCircleSeekBar seekBar, int progress,
            boolean fromUser) {
        // TODO Auto-generated method stub
        textView.setText(progress + "");
    }

}

小编很辛苦，请尊重菜鸟的劳动成果，转载请注明出处：http://blog.csdn.net/zjbpku/article/details/10140815