自定义圆形progressbar 加 音量控制自定义view

一、自定义一个漂亮的圆形progressbar

思路参考这个哥们的博客,修改了渐变色的类型
http://blog.csdn.net/wangchunlei123/article/details/50478913
这里写图片描述

1、先分析圆环的组成,两个重叠圆环、宽度、个数、间隔、颜色。
    private void drawOval(Canvas canvas) {
        int center = getWidth() / 2;
        int radius = center - mCircleWidth / 2;
        //mCount是圆环共多少块,mSplitSize是每块的间隔,itemSize是每块对应的角度
        float itemSize = (360 * 1.0f - mCount * mSplitSize) / mCount;
        //圆的大小
        RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);
        mPaintFirst.setColor(mFirstColor);
        //画第一个灰色的圆环
        for (int i = 0; i < mCount ; i++) {
            canvas.drawArc(oval, (i) * (itemSize + mSplitSize) - 90 , itemSize, false, mPaintFirst);
        }
        //采用扫描渐变再选择-90°
        SweepGradient sweepGradient = new SweepGradient(center,center,colorArray,null);
        matrix.setRotate(-90,center,center);
        sweepGradient.setLocalMatrix(matrix);
        mPaintSecond.setShader(sweepGradient);
        mPaintSecond.setShadowLayer(10, 10, 10, Color.RED);
        //画第二个圆环
        for (int i = 0; i < mCurrentCount; i++) {
            canvas.drawArc(oval, (i) * (itemSize + mSplitSize) - 90 , itemSize, false, mPaintSecond);
        }
    }
2、画文字
 private void drawText(Canvas canvas) {
        float textWidth = textPaint.measureText(mCurrentCount*100/mCount+"%");
        int textHeight = (int) Math.ceil(textPaint.getFontMetrics().descent - textPaint.getFontMetrics().ascent+2);
        canvas.drawText(mCurrentCount * 100 / mCount + "%", getWidth() / 2 - textWidth / 2, getHeight() / 2 + textHeight / 4, textPaint);
    }
3、设置滑动增减音量,设置音量监听

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downY = (int) event.getY();
                break;
            case MotionEvent.ACTION_UP:
                int upY = (int) event.getY();
                if (downY > upY) {
                    up();
                } else {
                    down();
                }
                break;
        }
        return true;
    }

    private void down() {
        mCurrentCount--;
        if (mCurrentCount < 0) {
            mCurrentCount = 0;
        }
        changeVolume();
    }

    private void up() {
        mCurrentCount++;
        if (mCurrentCount > mCount - spaceCount) {
            mCurrentCount = mCount - spaceCount;
        }
        changeVolume();
    }

    public void setProgress(int progress){
        float f = mCount*1.0f/100;
        mCurrentCount = (int) (f*progress);
        invalidate();
    }

    private void changeVolume() {
        if (listener != null) {
            listener.volumeChange(mCurrentCount);
        }
        postInvalidate();
    }

    public interface OnVolumeChangeListener {
        void volumeChange(int level);
    }

    private OnVolumeChangeListener listener;

    public void setOnVolumeChangeListener(OnVolumeChangeListener listener) {
        this.listener = listener;
    }

二、自定义view音量控制

把上面的progressbar稍微修改就可以改成一个音量控制view参考了这个鸿洋大神的博客http://blog.csdn.net/lmj623565791/article/details/24529807
这里写图片描述
对比一个下会发现,只是把每段圆弧改成圆角的,在下方增加间距,废话少说直接上代码

    mPaint1.setStrokeCap(Paint.Cap.ROUND);//设置圆弧的圆角

   private void drawOval(Canvas canvas, int center, int radius) {
        float itemSize = (360 * 1.0f - mCount * mSplitSize) / mCount;
        //spaceCount为下方预留几段空白,计算出总共空白的弧度space
        float space = itemSize * spaceCount + mSplitSize * (spaceCount + 1);
        //圆的大小
        RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);
        mPaint1.setColor(mFirstColor);
        //加space/2为了让空白居中
        for (int i = 0; i < mCount - spaceCount; i++) {
            canvas.drawArc(oval, (i) * (itemSize + mSplitSize) + 90 + space / 2, itemSize, false, mPaint1);
        }
        mPaint.setColor(mSecondColor);
        for (int i = 0; i < mCurrentCount; i++) {
            canvas.drawArc(oval, (i) * (itemSize + mSplitSize) + 90 + space / 2, itemSize, false, mPaint);
        }
    }
  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值