Android仿mac音量拖动view实现

前言

雨后江岸天破晓，老舟新客知多少；远山见竹林芳草，晨风拂绿了芭蕉。

简介

今天给大家带来的是自定义view的相关知识，我们实现的是仿mac音量加减的拖动view。我们先来看下效果图。

效果图

实现

下面我们讲一下具体的实现逻辑。

• 自定义styleable

<declare-styleable name="VolumeView">
    <attr name="ball_color" format="color" />
    <attr name="left_color" format="color" />
    <attr name="right_color" format="color" />
    <attr name="ball_radius" format="dimension" />
    <attr name="start_value" format="dimension" />
</declare-styleable>

ball_color：拖动小球的颜色
left_color：左边线条的颜色
right_color：右边线条的颜色
ball_radius：小球的半径
start_value：音量默认初始值

• VolumeView

/**
 * Created by kuangxiaoguo on 2016/11/3.
 */

public class VolumeView extends View {

    private static final float DEFAULT_WIDTH = 220;
    private static final float DEFAULT_HEIGHT = 50;
    private static final int DEFAULT_BALL_RADIUS = 10;
    private static final int START_VALUE = 0;
    private Paint mBallPaint;
    private Paint mLeftPaint;
    private Paint mRightPaint;
    private int mBallColor;
    private float mBallRadius;
    private int mStartValue;
    private TouchEnum state;
    private float downX;
    private int mWidth;
    private int endValue;
    private RectF mRectF;
    private int mLeftColor;
    private int mRightColor;

    public VolumeView(Context context) {
        this(context, null);
    }

    public VolumeView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public VolumeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initAttrs(context, attrs, defStyleAttr);
    }

    private void initAttrs(Context context, AttributeSet attrs, int defStyleAttr) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.VolumeView, defStyleAttr, 0);
        mBallColor = typedArray.getColor(R.styleable.VolumeView_ball_color, Color.GREEN);
        mLeftColor = typedArray.getColor(R.styleable.VolumeView_left_color, Color.BLUE);
        mRightColor = typedArray.getColor(R.styleable.VolumeView_right_color, Color.LTGRAY);
        mBallRadius = typedArray.getDimension(R.styleable.VolumeView_ball_radius, dp2px(DEFAULT_BALL_RADIUS));
        mStartValue = (int) typedArray.getDimension(R.styleable.VolumeView_start_value, dp2px(START_VALUE));
        typedArray.recycle();
        initPaint();
    }

    private void initPaint() {
        mBallPaint = new Paint();
        mLeftPaint = new Paint();
        mRightPaint = new Paint();
        initPaint(mBallPaint, mBallColor);
        initPaint(mLeftPaint, mLeftColor);
        initPaint(mRightPaint, mRightColor);
        mLeftPaint.setStrokeWidth(mBallRadius / 2);
        mRightPaint.setStrokeWidth(mBallRadius / 2);
    }

    private void initPaint(Paint paint, int color) {
        paint.setAntiAlias(true);
        paint.setColor(color);
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeCap(Paint.Cap.BUTT);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downX = event.getX();
                /**
                 * 点击小球
                 */
                if (downX > mStartValue && downX < mStartValue + 2 * mBallRadius) {
                    state = TouchEnum.TOUCH_BALL;
                } else {
                    /**
                     * 点击位置位于最左边小于球的直径处
                     */
                    if (downX < 2 * mBallRadius) {
                        downX = 0;
                    } else if (downX > endValue) {
                        /**
                         * 点击位置位于最右边
                         */
                        downX = endValue;
                    }
                    /**
                     * 使得mStartValue为我们按下的值刷新view
                     * 并把state的状态置为TouchEnum.TOUCH_BALL
                     */
                    mStartValue = (int) downX;
                    invalidate();
                    state = TouchEnum.TOUCH_BALL;
                }
                break;
            case MotionEvent.ACTION_MOVE:
                if (state == TouchEnum.TOUCH_BALL) {
                    float moveX = event.getX();
                    float moveDistance = moveX - downX;
                    mStartValue += moveDistance;
                    if (mStartValue < 0) {
                        mStartValue = 0;
                    } else if (mStartValue > endValue) {
                        mStartValue = endValue;
                    }
                    invalidate();
                    /**
                     * 每刷新一次view之后把moveX的值赋给downX，这样在下次又重新获取moveX，两者相减就是我们滑动的距离。
                     */
                    downX = moveX;
                }
                break;
        }
        return true;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = getWidth();
        endValue = (int) (mWidth - 2 * mBallRadius);
        mRectF = new RectF(0, 0, mWidth, h);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        mBallPaint.setColor(getResources().getColor(R.color.colorGray));
        canvas.drawRoundRect(mRectF, getHeight() / 5, getHeight() / 5, mBallPaint);
        mBallPaint.setColor(mBallColor);
        int verticalCenter = getHeight() / 2;
        canvas.drawLine(0, verticalCenter, mStartValue, verticalCenter, mLeftPaint);
        canvas.drawCircle(mStartValue + mBallRadius, verticalCenter, mBallRadius, mBallPaint);
        canvas.drawLine(mStartValue + 2 * mBallRadius, verticalCenter, mWidth, verticalCenter, mRightPaint);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        if (widthMode == MeasureSpec.AT_MOST) {
            widthSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_WIDTH, getResources().getDisplayMetrics());
        }
        if (heightMode == MeasureSpec.AT_MOST) {
            heightSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_HEIGHT, getResources().getDisplayMetrics());
        }
        setMeasuredDimension(widthSize, heightSize);
    }

    public enum TouchEnum {
        TOUCH_BALL, TOUCH_LEFT, TOUCH_RIGHT
    }

    private int dp2px(int dp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics());
    }
}

• xml使用VolumeView

 <com.asiatravel.macvolumeview.wediget.VolumeView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:left_color="#4A9AF9"
        app:right_color="#BBB9BB"
        app:ball_color="#fff"
        app:start_value="20dp" />

总结

由于整体的实现思路比较简单，所以我们直接贴出了view源码并在一些逻辑处理的地方加了部分注释，当然，如果有哪里不明白的地方，大家可以在下面留言。
另外有需要项目源码的童鞋可以去https://github.com/kuangxiaoguo0123/MacVolumeView下载。