android自定义View----音量控制界面

本篇主要记录我学习自定义view时的一个demo。初步完成效果如下：

音量控制效果图

• 首先，在attr中定义好需要在xml中定义的属性：

######为什么要把属性抽出来在外面写？ 我也是和大神学的，这样的写法可以类比成员变量的用法。
******

* ####然后，创建一个View的子类，继承它的构造方法，并在构造方法中获取xml中定义的属性值:

一般使用三参构造器，如果需要使用单参的，可以通过this调三参的方法来实现。

public MyVoiceControlView(Context context,  AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyVoiceControlView, 0, defStyleAttr);

        for (int i = 0; i < typedArray.getIndexCount(); i++) {
            int attr = typedArray.getIndex(i);

            switch (attr) {
                case R.styleable.MyVoiceControlView_firstColor:
                    mFirstColor = typedArray.getColor(attr, Color.BLACK);//默认颜色、底色
                    break;
                case R.styleable.MyVoiceControlView_secondColor:
                    mSecondColor = typedArray.getColor(attr, Color.WHITE);//选中后的颜色
                    break;
                case R.styleable.MyVoiceControlView_background://中心的喇叭图片，等下会绘制出来
                    mImage = BitmapFactory.decodeResource(getResources(), typedArray.getResourceId(attr, 0));
                    break;
                case R.styleable.MyVoiceControlView_dotCount:
                    mDotCount = typedArray.getInteger(attr, 10);//点的数量
                    break;
                case R.styleable.MyVoiceControlView_circleWidth:
                    mCircleWidth = typedArray.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_PX, 16, getResources().getDisplayMetrics()
                    ));//这里是将xml中定义的dimension类型转化为可以绘制的px属性，默认设置16
                    break;
                case R.styleable.MyVoiceControlView_splitSize:
                    mSplitSize = typedArray.getInteger(attr, 20);//这个属性是 点之间间隙的大小，默认20
                    break;
            }
        }
        typedArray.recycle();
        mPaint = new Paint();
        mPaint.setAntiAlias(true);//抗锯齿
        mRect = new Rect();
    }


* ####为简单起见，就直接onDraw()了，这里略掉onMeasure()步骤，代码中View的尺寸写死就行

- onDraw很简单，将中心图片画出来后，再用for循环画出外圈的点（其实是strokeCap为Round的弧线实现的）
        mPaint.setStrokeWidth(mCircleWidth);
        mPaint.setStrokeCap(Paint.Cap.ROUND);//线段的断点形状为round
        mPaint.setStyle(Paint.Style.STROKE);
        int center = getWidth() / 2;
//根据需要画的个数以及间隙计算每个块块所占的比例*240,不画整圆了这里
        float itemSize = (240 * 1.0f - (mDotCount - 1) * mSplitSize) / mDotCount;
// 用于定义的圆弧的形状和大小的界限的rectf
        RectF oval = new RectF(mCircleWidth / 2, mCircleWidth / 2,
                getWidth() - mCircleWidth / 2, getWidth() - mCircleWidth / 2); 
mPaint.setColor(mFirstColor); // 设置圆环的颜色
        for (int i = 0; i < mDotCount; i++) {
            canvas.drawArc(oval, i * (itemSize + mSplitSize) + 150, itemSize, false, mPaint); // 根据进度画圆弧
        }
        mPaint.setColor(mSecondColor); // 设置圆环的颜色
        // 根据进度绘制圆弧
        for (int i = 0; i < mCurrentCount; i++) {
            canvas.drawArc(oval, i * (itemSize + mSplitSize) + 150, itemSize, false, mPaint);
        }
        int r = center - mCircleWidth;
        mRect.left = (int) ((1 - Math.sqrt(2) / 2) * r + mCircleWidth);
        mRect.top = (int) ((1 - Math.sqrt(2) / 2) * r + mCircleWidth);
        mRect.right = (int) ((1 + Math.sqrt(2) / 2) * r + mCircleWidth);
        mRect.bottom = (int) ((1 + Math.sqrt(2) / 2) * r + mCircleWidth);
//如果图片的尺寸过小，无法与外圆相交，就使用它本来的尺寸
        if (mImage.getWidth() < Math.sqrt(2) * r) {
            mRect.left = r + mCircleWidth - mImage.getWidth() / 2;
            mRect.right = mRect.left + mImage.getWidth();
            mRect.top = r + mCircleWidth - mImage.getWidth() / 2;
            mRect.bottom = mRect.top + mImage.getWidth();
        }
        canvas.drawBitmap(mImage, null, mRect, mPaint);


这时，绘制出来的效果基本可以展示了
UI界面的xml中调用这个view:(注意先声明命名空间)
        

中心的图片是as中生成的，不用去烦你的美工MM或者抠半天图了。

![](http://upload-images.jianshu.io/upload_images/4005564-104d208a51af0ccf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

* 到这里，可以直接在这个类中添加set和get方法，动态设置就可以收工了，如果想实现一点交互，就可以重写onTouchEvent()：


 @Override
    public boolean onTouchEvent(MotionEvent event) {
//用来判断滑动距离是这个距离的多少倍。 乘3只是为了达到更好的控制效果，这个自定义即可
        float moveLength = getHeight() / (mDotCount *3 );
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                xLast = (int) event.getX();
                yLast = (int) event.getY();
                break;
            case MotionEvent.ACTION_UP:
                break;
            case MotionEvent.ACTION_MOVE:
                //x轴方向move事件
                int xCurrent = (int) event.getX() - xLast;
                int moveCountX = (int) (xCurrent / moveLength);
                if (xCurrent > 0) {//——→滑
                    if (moveCountX > 1) {
                        up(); //自定义的方法
                        xLast = (int) event.getX();
                    }
                } else if (xCurrent < 0) {//下滑
                    if (moveCountX < -1) {
                        down();//自定义的方法
                        xLast = (int) event.getX();
                    }
                }
                //y轴方向move事件
                int yCurrent = (int) (event.getY() - yLast);
                int moveCountY = (int) (yCurrent / moveLength);
                if (yCurrent > 0) {//↓滑
                    if (moveCountY > 1) {
                        down();
                        yLast = (int) event.getY();
                    }
                } else if (yCurrent < -1) {
                    if (yCurrent < -1) {
                        up();
                        yLast = (int) event.getY();
                    }
                }
                break;
        }
        return true;
    }


up() 和 down()方法

public void up() {
        if (mCurrentCount < mDotCount)
            mCurrentCount++;
        postInvalidate();
    }

    public void down() {
        if (mCurrentCount >= 1)
            mCurrentCount--;
        postInvalidate();
    }


这里我设置的是向→ 或者 ↑ 都是增加音量，反之减小。

这些也是自己照着大神的demo练习的，有很多地方不一定适用，大伙看看就行，欢迎指正。

[具体代码点击这里查看](https://github.com/TrueHub/SomeView)