Android 自定义View 视频音量调控

2017/01/01 23:58
阅读数 74

转载至:http://blog.csdn.net/lmj623565791/article/details/24529807
自己重新实现了一遍,并在其中增加了详细的注释,以及优解决了音量可以无限加载的问题。

首先还是先看看效果图:

今天没事逛eoe,看见有人求助要做一个下面的效果,我看下面一哥们说要用12张图片,这尼玛逆天的麻烦,仔细看了一下感觉自定义控件木有问题,就花点时间写了一个。

好了,进入正题,继续我们的自定义View四部曲。

  • 1、自定义View的属性
  • 2、在View的构造方法中获得我们自定义的属性
  • [ 3、重写onMesure ]
  • 4、重写onDraw

1、先分许需要的属性,两个小块的颜色、一张中间的图片、间隙大小、一个多少个块块。分析完毕,开始写attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--CustomVolumControlBar-->
    <attr name="vFirstColor" format="color" />
    <attr name="vSecondColor" format="color" />
    <attr name="vCircleWidth" format="dimension" />
    <attr name="vDotCount" format="integer" />
    <attr name="vSplitSize" format="integer" />
    <attr name="vBg" format="reference" /><!--注意格式-->

    <declare-styleable name="CustomVolumControlBar">
        <attr name="vFirstColor" />
        <attr name="vSecondColor" />
        <attr name="vCircleWidth" />
        <attr name="vDotCount" />
        <attr name="vSplitSize" />
        <attr name="vBg" />

    </declare-styleable>
</resources>

2、在构造中获取这些属性:

/ 第一个圆的颜色
    private int mFirstColor;
    // 第二个圆的颜色
    private int mSecondColor;
    // 圆弧的宽度
    private int mCircleWidth;
    // 个数
    private int mDotCount;
    // 每个块块之间的间隙
    private int mSplitSize;
    // 中间的图片
    private Bitmap mBg;
    // 当前进度
    private int mCurrentCount = 1;
    // 画笔
    private Paint mPaint;
    private Rect mRect;

public CustomVolumControlBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomVolumControlBar, defStyleAttr, 0);
        int indexCount = typedArray.getIndexCount();
        for (int i = 0; i < indexCount; i++) {
            int arr = typedArray.getIndex(i);
            switch (arr) {
                case R.styleable.CustomVolumControlBar_vFirstColor:
                    mFirstColor = typedArray.getColor(arr, Color.BLACK);
                    break;
                case R.styleable.CustomVolumControlBar_vSecondColor:
                    mSecondColor = typedArray.getColor(arr, Color.WHITE);
                    break;
                case R.styleable.CustomVolumControlBar_vCircleWidth:
                    mCircleWidth = typedArray.getDimensionPixelSize(arr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.CustomVolumControlBar_vDotCount:
                    mDotCount = typedArray.getInt(arr, 20);
                    break;
                case R.styleable.CustomVolumControlBar_vSplitSize:
                    mSplitSize = typedArray.getInt(arr, 20);
                    break;
                case R.styleable.CustomVolumControlBar_vBg:
                    mBg = BitmapFactory.decodeResource(getResources(), typedArray.getResourceId(arr, 0));
                    break;
            }
        }
        typedArray.recycle();
        mPaint = new Paint();
        mRect = new Rect();
    }

3、重写onDraw

@Override
    protected void onDraw(Canvas canvas) {
// super.onDraw(canvas);
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(mCircleWidth);
        mPaint.setStrokeCap(Paint.Cap.ROUND);//定义线段断电形状为圆头
        mPaint.setStyle(Paint.Style.STROKE);// 设置空心
        int center = getWidth() / 2;// 获取圆心x坐标
        int radius = center - mCircleWidth / 2;// 半径(***圆边在圆环的中间***)
        /** * 椭圆 */
        drawOval(canvas, center, radius);

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

        /** * 内切正方形距离左边的距离(或顶部): * (内圆半径 - (更2 / 2) * 内圆半径) + 圆弧的宽度 */
        mRect.left = (int) (relRadius - Math.sqrt(2) / 2 * relRadius) + mCircleWidth;
        mRect.top = (int) (relRadius - Math.sqrt(2) / 2 * relRadius) + mCircleWidth;
        /** * 内切正方形距离左边的距离 + 正方形的边长(Math.sqrt(2) * relRadius) */
        mRect.right = (int) (mRect.left + Math.sqrt(2) * relRadius);
        mRect.bottom = (int) (mRect.left + Math.sqrt(2) * relRadius);


        /** * 如果图片比较小,那么根据图片的尺寸放置到正中心 */
        if (mBg.getWidth() < Math.sqrt(2) * relRadius) {
            mRect.left = mCircleWidth + (relRadius - mBg.getWidth() / 2);
            mRect.top = mCircleWidth + (relRadius - mBg.getWidth() / 2);
            mRect.right = mCircleWidth + (relRadius + mBg.getWidth() / 2);
            mRect.bottom = mCircleWidth + (relRadius + mBg.getWidth() / 2);
        }
        canvas.drawBitmap(mBg, null, mRect, mPaint);

    }

    /** * 根据参数画出每个小块 */
    private void drawOval(Canvas canvas, int center, int radius) {
        /** * 根据需要的个数以及间隙计算每个块块所占的比例 * 360 ---> 每个块的大小 * ( 360 - 块个数 * 间距 ) / 块的个数 */
        float itemSize = (360 * 1.0f - mDotCount * mSplitSize) / mDotCount;
        // 用于定义的圆的形状和大小的界限
        RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);

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

        /** * 画圆环的第二种颜色 mCurrentCount */
        mPaint.setColor(mSecondColor);// 设置圆环的颜色
        for (int i = 0; i < mCurrentCount; i++) {
            // canvas.drawArc(rectF, -90, mProgress, false, mPaint);// 根据进度画圆弧
            // 根据进度画圆弧
            canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint);
        }
    }

这里需要注意下:
画块:首先根据块数量和间隙计算,每个块所占的比例。
画图:当图比较大时,直接使用该环内切正方形大小进行约束,当图片比较小时,在正中心的位置绘制。有些数学运算过程,楼主在草稿上画了一会,不复杂,大家自己画画,我就不贴草稿了。

4、添加触摸监听:

    /** * 添加触摸监听 * 当前数量+1 */
    public void up() {
        if (mCurrentCount < mDotCount) {
            mCurrentCount++;
        }
        postInvalidate();
    }

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

    private int xDown, xUp;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
// return super.onTouchEvent(event);
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                xDown = (int) event.getY();
                break;
            case MotionEvent.ACTION_UP:
                xUp = (int) event.getY();
                if (xDown < xUp) {
                    down();
                } else {
                    up();
                }
                break;
        }
        return true;
    }

触摸监听也得很简单哈,基本能实现,大家也可以加个最小距离加速度什么的,都行。

最后,效果图:

效果图

源码点击此处查看

嘿嘿,留个言,顶一个哈~

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部