自定义控件8---视频音量调控

先来看效果图：

先来分析下这个控件：
1 外围是个圆环，圆环中间有空隙，每个圆环的长度一样，圆环的边缘是圆的
2 圆环中间一张图片或者一个颜色的填充
思考问题：
1 既然是自定义控件，那么圆弧一定是画出来的，怎么画？
2 知道怎么画圆弧了，那么如何确定画多少个圆弧？
3 第一个方式，设置圆弧的个数和长度，以此来确定间隙长度；第二个方式，设置间隙的长度和圆弧的个数，以此来确定圆弧的长度。当然，圆弧和间隙的个数是一致的。
4 中间的图片或者颜色怎么处理？
5 如果图片过大，要进行压缩，如果图片过小，那么居中显示。如果是颜色，那么要测量中间的矩形大小，然后覆盖颜色。
6 圆弧的边缘，圆的，怎么处理？猜测，画笔应该会有一个属性来做控制。

好了，分析完毕，还是老步骤：

第一步，自定义属性

需要哪些属性呢：1 两种圆弧的颜色 2 圆弧的宽度 3圆弧或者间隙的个数 4间隙的长度 5背景图或者颜色

    <attr name="firstColor" format="color" />
    <attr name="secondColor" format="color" />
    <attr name="circleWidth" format="dimension" />
    <attr name="dotCount" format="integer" />
    <attr name="splitSize" format="integer" />
    <attr name="bg" format="reference|color"/>

    <declare-styleable name="CustomVolumControlBar">
        <attr name="firstColor" />
        <attr name="secondColor" />
        <attr name="circleWidth" />
        <attr name="dotCount" />
        <attr name="splitSize" />
        <attr name="bg" />
    </declare-styleable>

第二步，获取自定义属性

    /**
     * 第一圈的颜色
     */
    private int mFirstColor;

    /**
     * 第二圈的颜色
     */
    private int mSecondColor;
    /**
     * 圈的宽度
     */
    private int mCircleWidth;
    /**
     * 画笔
     */
    private Paint mPaint;
    /**
     * 当前进度
     */
    private int mCurrentCount = 3;

    /**
     * 每个块块间的间隙
     */
    private int mSplitSize;
    /**
     * 个数
     */
    private int mCount;
    /**
     * 矩形，用于绘制确定中心图片或者颜色的边界
     */
    private Rect mRect;
    /**
     * 中间的图片
     */
    private Bitmap mImage;
    /**
     * 中间的颜色
     */
    private int mColor;

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

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

    /**
     * 必要的初始化，获得一些自定义的值
     * 
     * @param context
     * @param attrs
     * @param defStyle
     */
    public CustomVolumControlBar(Context context, AttributeSet attrs,
            int defStyle) {
        super(context, attrs, defStyle);
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
                R.styleable.CustomVolumControlBar, defStyle, 0);
        int n = a.getIndexCount();

        for (int i = 0; i < n; i++) {
            int attr = a.getIndex(i);
            switch (attr) {
            case R.styleable.CustomVolumControlBar_firstColor:
                mFirstColor = a.getColor(attr, Color.GREEN);
                break;
            case R.styleable.CustomVolumControlBar_secondColor:
                mSecondColor = a.getColor(attr, Color.CYAN);
                break;
            case R.styleable.CustomVolumControlBar_bg:
                if (a.hasValue(R.styleable.CustomVolumControlBar_bg)) {
                    mImage=null;
                    //有图片则获取图片
                    mImage = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));
                    if(mImage==null){
                        //无图片则获取颜色
                        mColor=a.getColor(attr, Color.RED);
                    }
                }
                break;
            case R.styleable.CustomVolumControlBar_circleWidth:
                mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue
                        .applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10,
                                getResources().getDisplayMetrics()));
                break;
            case R.styleable.CustomVolumControlBar_dotCount:
                mCount = a.getInt(attr, 20);// 默认20
                break;
            case R.styleable.CustomVolumControlBar_splitSize:
                mSplitSize = a.getInt(attr, 20);
                break;
            }
        }
        a.recycle();
        //初始化画笔
        mPaint = new Paint();
        //初始化矩形
        mRect = new Rect();
    }

第三步，重写onDraw()

    @Override
    protected void onDraw(Canvas canvas) {
        //基础设置
        mPaint.setAntiAlias(true); // 消除锯齿
        mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度
        mPaint.setStrokeCap(Paint.Cap.ROUND); // 定义线段断电形状为圆头
        mPaint.setStyle(Paint.Style.STROKE); // 设置空心


        int centre = getWidth() / 2; // 获取圆心的x坐标
        int radius = centre - mCircleWidth/2 ;// 内圆半径
        /**
         * 画块块去
         */
         drawOval(canvas, centre, radius);

        /**
         * 计算内切正方形的位置
         */
        int relRadius = radius - mCircleWidth / 2;// 获得内圆的半径

        mRect.left = (int) (centre - relRadius / Math.sqrt(2)) + 1;
        mRect.top = (int) (centre - relRadius / Math.sqrt(2)) + 1;
        mRect.bottom = (int) (centre + relRadius / Math.sqrt(2));
        mRect.right = (int) (centre + relRadius / Math.sqrt(2));


        if(mImage==null){
            //填充颜色
            mPaint.setColor(mColor);
            mPaint.setStyle(Paint.Style.FILL);
            canvas.drawRect(mRect, mPaint);
        }else{
            /**
             * 如果图片比较小，那么根据图片的尺寸放置到正中心
             */
            if (mImage.getWidth() / 2 < relRadius / Math.sqrt(2)) {
                mRect.left = (int) (centre - mImage.getWidth() / 2);
                mRect.top = (int) (centre - mImage.getWidth() / 2);
                mRect.right = (int) (centre + mImage.getWidth() / 2);
                mRect.bottom = (int) (centre + mImage.getWidth() / 2);

            }
            // 绘图
            canvas.drawBitmap(mImage, null, mRect, mPaint);
        }

    }
    /**
     * 根据参数画出每个小块
     * 
     * @param canvas
     * @param centre
     * @param radius
     */
    private void drawOval(Canvas canvas, int centre, int radius) {
        /**
         * 根据需要画的个数以及间隙计算每个块块所占的比例*360
         */
        float itemSize = (360 * 1.0f - mCount * mSplitSize) / mCount;

        RectF oval = new RectF(centre - radius, centre - radius, centre
                + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限

        mPaint.setColor(mFirstColor); // 设置圆环的颜色
        for (int i = 0; i < mCount; i++) {
            canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false,
                    mPaint); //根据进度画圆弧，这个是第一层圆弧
        }

        mPaint.setColor(mSecondColor); // 设置圆环的颜色
        for (int i = 0; i < mCurrentCount; i++) {
            canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false,
                    mPaint); // 根据进度画圆弧，这个是第二层圆弧，是显示进度的，覆盖在第一层圆弧上面
        }
    }

为了方便大家理解，看下图：

看了这张图，相信大家能够明白中间的矩形是怎么得来的了。
可能有人会问，mRect.left和mRect.top后面为什么要+1？
因为，这个矩形是包含左上角而不包含右下角的，加1是为了左上角不和圆弧有重合。

第四步，添加触摸监听

    /**
     * 当前数量+1
     */
    public void up() {
        mCurrentCount++;
        postInvalidate();
    }

    /**
     * 当前数量-1
     */
    public void down() {
        mCurrentCount--;
        postInvalidate();
    }

    private int xDown, xUp;

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            xDown = (int) event.getY();
            break;

        case MotionEvent.ACTION_UP:
            xUp = (int) event.getY();
            if (xUp > xDown)// 下滑
            {
                down();
            } else {
                up();
            }
            break;
        }

        return true;
    }

源码下载

引用：
Android 自定义View (四) 视频音量调控 - Hongyang - 博客频道 - CSDN.NET