Android 自定义View (四) 视频音量调控

快来打我* 2022-09-23 08:20 172阅读 0赞

转载出处：http://blog.csdn.net/lmj623565791/article/details/24529807

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

![Center][]

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

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

<?xml version="1.0" encoding="utf-8"?>  
    <resources>  
      
        <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"></attr>  
      
        <declare-styleable name="CustomVolumControlBar">  
            <attr name="firstColor" />  
            <attr name="secondColor" />  
            <attr name="circleWidth" />  
            <attr name="dotCount" />  
            <attr name="splitSize" />  
            <attr name="bg" />  
        </declare-styleable>  
      
    </resources>

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

/** 
         * 第一圈的颜色 
         */  
        private int mFirstColor;  
      
        /** 
         * 第二圈的颜色 
         */  
        private int mSecondColor;  
        /** 
         * 圈的宽度 
         */  
        private int mCircleWidth;  
        /** 
         * 画笔 
         */  
        private Paint mPaint;  
        /** 
         * 当前进度 
         */  
        private int mCurrentCount = 3;  
      
        /** 
         * 中间的图片 
         */  
        private Bitmap mImage;  
        /** 
         * 每个块块间的间隙 
         */  
        private int mSplitSize;  
        /** 
         * 个数 
         */  
        private int mCount;  
      
        private Rect mRect;  
      
        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:  
                    mImage = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));  
                    break;  
                case R.styleable.CustomVolumControlBar_circleWidth:  
                    mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(  
                            TypedValue.COMPLEX_UNIT_PX, 20, 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();  
        }

3、重写onDraw

@Override  
        protected void onDraw(Canvas canvas)  
        {  
            mPaint.setAntiAlias(true); // 消除锯齿  
            mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度  
            mPaint.setStrokeCap(Paint.Cap.ROUND); // 定义线段断电形状为圆头  
            mPaint.setAntiAlias(true); // 消除锯齿  
            mPaint.setStyle(Paint.Style.STROKE); // 设置空心  
            int centre = getWidth() / 2; // 获取圆心的x坐标  
            int radius = centre - mCircleWidth / 2;// 半径  
            /** 
             * 画块块去 
             */  
            drawOval(canvas, centre, radius);  
      
            /** 
             * 计算内切正方形的位置 
             */  
            int relRadius = radius - mCircleWidth / 2;// 获得内圆的半径  
            /** 
             * 内切正方形的距离顶部 = mCircleWidth + relRadius - √2 / 2 
             */  
            mRect.left = (int) (relRadius - Math.sqrt(2) * 1.0f / 2 * relRadius) + mCircleWidth;  
            /** 
             * 内切正方形的距离左边 = mCircleWidth + relRadius - √2 / 2 
             */  
            mRect.top = (int) (relRadius - Math.sqrt(2) * 1.0f / 2 * relRadius) + mCircleWidth;  
            mRect.bottom = (int) (mRect.left + Math.sqrt(2) * relRadius);  
            mRect.right = (int) (mRect.left + Math.sqrt(2) * relRadius);  
      
            /** 
             * 如果图片比较小，那么根据图片的尺寸放置到正中心 
             */  
            if (mImage.getWidth() < Math.sqrt(2) * relRadius)  
            {  
                mRect.left = (int) (mRect.left + Math.sqrt(2) * relRadius * 1.0f / 2 - mImage.getWidth() * 1.0f / 2);  
                mRect.top = (int) (mRect.top + Math.sqrt(2) * relRadius * 1.0f / 2 - mImage.getHeight() * 1.0f / 2);  
                mRect.right = (int) (mRect.left + mImage.getWidth());  
                mRect.bottom = (int) (mRect.top + mImage.getHeight());  
      
            }  
            // 绘图  
            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); // 根据进度画圆弧  
            }  
        }

这里需要注意下：

画块：首先根据块数量和间隙计算，每个块所占的比例。

画图：当图比较大时，直接使用该环内切正方形大小进行约束，当图片比较小时，在正中心的位置绘制。有些数学运算过程，楼主在草稿上画了一会，不复杂，大家自己画画，我就不贴草稿了。

4、添加触摸监听：

/** 
         * 当前数量+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;  
        }

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

最后，效果图：

![20140426141003906][]

可惜楼主尼玛是找不到那个音量的图，不要叫我去抠图哈，就随便拿了几张图片来试试。

[源码点击此处下载][Link 1]

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

[Center]: /images/20220721/ffa4b09820be48ec95eee4d9b12e51ef.png
[20140426141003906]: /images/20220721/53b6f741d80549b6828cab08cd4d62b7.png
[Link 1]: http://download.csdn.net/detail/lmj623565791/7256111