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

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24529807

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


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

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

[html]  view plain copy
  1. xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.   
  4.     <attr name="firstColor" format="color" />  
  5.     <attr name="secondColor" format="color" />  
  6.     <attr name="circleWidth" format="dimension" />  
  7.     <attr name="dotCount" format="integer" />  
  8.     <attr name="splitSize" format="integer" />  
  9.     <attr name="bg" format="reference">attr>  
  10.   
  11.     <declare-styleable name="CustomVolumControlBar">  
  12.         <attr name="firstColor" />  
  13.         <attr name="secondColor" />  
  14.         <attr name="circleWidth" />  
  15.         <attr name="dotCount" />  
  16.         <attr name="splitSize" />  
  17.         <attr name="bg" />  
  18.     declare-styleable>  
  19.   
  20. resources>  

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

[java]  view plain copy
  1. /** 
  2.      * 第一圈的颜色 
  3.      */  
  4.     private int mFirstColor;  
  5.   
  6.     /** 
  7.      * 第二圈的颜色 
  8.      */  
  9.     private int mSecondColor;  
  10.     /** 
  11.      * 圈的宽度 
  12.      */  
  13.     private int mCircleWidth;  
  14.     /** 
  15.      * 画笔 
  16.      */  
  17.     private Paint mPaint;  
  18.     /** 
  19.      * 当前进度 
  20.      */  
  21.     private int mCurrentCount = 3;  
  22.   
  23.     /** 
  24.      * 中间的图片 
  25.      */  
  26.     private Bitmap mImage;  
  27.     /** 
  28.      * 每个块块间的间隙 
  29.      */  
  30.     private int mSplitSize;  
  31.     /** 
  32.      * 个数 
  33.      */  
  34.     private int mCount;  
  35.   
  36.     private Rect mRect;  
  37.   
  38.     public CustomVolumControlBar(Context context, AttributeSet attrs)  
  39.     {  
  40.         this(context, attrs, 0);  
  41.     }  
  42.   
  43.     public CustomVolumControlBar(Context context)  
  44.     {  
  45.         this(context, null);  
  46.     }  
  47.   
  48.     /** 
  49.      * 必要的初始化,获得一些自定义的值 
  50.      *  
  51.      * @param context 
  52.      * @param attrs 
  53.      * @param defStyle 
  54.      */  
  55.     public CustomVolumControlBar(Context context, AttributeSet attrs, int defStyle)  
  56.     {  
  57.         super(context, attrs, defStyle);  
  58.         TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomVolumControlBar, defStyle, 0);  
  59.         int n = a.getIndexCount();  
  60.   
  61.         for (int i = 0; i < n; i++)  
  62.         {  
  63.             int attr = a.getIndex(i);  
  64.             switch (attr)  
  65.             {  
  66.             case R.styleable.CustomVolumControlBar_firstColor:  
  67.                 mFirstColor = a.getColor(attr, Color.GREEN);  
  68.                 break;  
  69.             case R.styleable.CustomVolumControlBar_secondColor:  
  70.                 mSecondColor = a.getColor(attr, Color.CYAN);  
  71.                 break;  
  72.             case R.styleable.CustomVolumControlBar_bg:  
  73.                 mImage = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));  
  74.                 break;  
  75.             case R.styleable.CustomVolumControlBar_circleWidth:  
  76.                 mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(  
  77.                         TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));  
  78.                 break;  
  79.             case R.styleable.CustomVolumControlBar_dotCount:  
  80.                 mCount = a.getInt(attr, 20);// 默认20  
  81.                 break;  
  82.             case R.styleable.CustomVolumControlBar_splitSize:  
  83.                 mSplitSize = a.getInt(attr, 20);  
  84.                 break;  
  85.             }  
  86.         }  
  87.         a.recycle();  
  88.         mPaint = new Paint();  
  89.         mRect = new Rect();  
  90.     }  

3、重写onDraw

[java]  view plain copy
  1. @Override  
  2.     protected void onDraw(Canvas canvas)  
  3.     {  
  4.         mPaint.setAntiAlias(true); // 消除锯齿  
  5.         mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度  
  6.         mPaint.setStrokeCap(Paint.Cap.ROUND); // 定义线段断电形状为圆头  
  7.         mPaint.setAntiAlias(true); // 消除锯齿  
  8.         mPaint.setStyle(Paint.Style.STROKE); // 设置空心  
  9.         int centre = getWidth() / 2// 获取圆心的x坐标  
  10.         int radius = centre - mCircleWidth / 2;// 半径  
  11.         /** 
  12.          * 画块块去 
  13.          */  
  14.         drawOval(canvas, centre, radius);  
  15.   
  16.         /** 
  17.          * 计算内切正方形的位置 
  18.          */  
  19.         int relRadius = radius - mCircleWidth / 2;// 获得内圆的半径  
  20.         /** 
  21.          * 内切正方形的距离顶部 = mCircleWidth + relRadius - √2 / 2 
  22.          */  
  23.         mRect.left = (int) (relRadius - Math.sqrt(2) * 1.0f / 2 * relRadius) + mCircleWidth;  
  24.         /** 
  25.          * 内切正方形的距离左边 = mCircleWidth + relRadius - √2 / 2 
  26.          */  
  27.         mRect.top = (int) (relRadius - Math.sqrt(2) * 1.0f / 2 * relRadius) + mCircleWidth;  
  28.         mRect.bottom = (int) (mRect.left + Math.sqrt(2) * relRadius);  
  29.         mRect.right = (int) (mRect.left + Math.sqrt(2) * relRadius);  
  30.   
  31.         /** 
  32.          * 如果图片比较小,那么根据图片的尺寸放置到正中心 
  33.          */  
  34.         if (mImage.getWidth() < Math.sqrt(2) * relRadius)  
  35.         {  
  36.             mRect.left = (int) (mRect.left + Math.sqrt(2) * relRadius * 1.0f / 2 - mImage.getWidth() * 1.0f / 2);  
  37.             mRect.top = (int) (mRect.top + Math.sqrt(2) * relRadius * 1.0f / 2 - mImage.getHeight() * 1.0f / 2);  
  38.             mRect.right = (int) (mRect.left + mImage.getWidth());  
  39.             mRect.bottom = (int) (mRect.top + mImage.getHeight());  
  40.   
  41.         }  
  42.         // 绘图  
  43.         canvas.drawBitmap(mImage, null, mRect, mPaint);  
  44.     }  
  45.   
  46.     /** 
  47.      * 根据参数画出每个小块 
  48.      *  
  49.      * @param canvas 
  50.      * @param centre 
  51.      * @param radius 
  52.      */  
  53.     private void drawOval(Canvas canvas, int centre, int radius)  
  54.     {  
  55.         /** 
  56.          * 根据需要画的个数以及间隙计算每个块块所占的比例*360 
  57.          */  
  58.         float itemSize = (360 * 1.0f - mCount * mSplitSize) / mCount;  
  59.   
  60.         RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限  
  61.   
  62.         mPaint.setColor(mFirstColor); // 设置圆环的颜色  
  63.         for (int i = 0; i < mCount; i++)  
  64.         {  
  65.             canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根据进度画圆弧  
  66.         }  
  67.   
  68.         mPaint.setColor(mSecondColor); // 设置圆环的颜色  
  69.         for (int i = 0; i < mCurrentCount; i++)  
  70.         {  
  71.             canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根据进度画圆弧  
  72.         }  
  73.     }  

这里需要注意下:

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

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

4、添加触摸监听:

[java]  view plain copy
  1. /** 
  2.      * 当前数量+1 
  3.      */  
  4.     public void up()  
  5.     {  
  6.         mCurrentCount++;  
  7.         postInvalidate();  
  8.     }  
  9.   
  10.     /** 
  11.      * 当前数量-1 
  12.      */  
  13.     public void down()  
  14.     {  
  15.         mCurrentCount--;  
  16.         postInvalidate();  
  17.     }  
  18.   
  19.     private int xDown, xUp;  
  20.   
  21.     @Override  
  22.     public boolean onTouchEvent(MotionEvent event)  
  23.     {  
  24.   
  25.         switch (event.getAction())  
  26.         {  
  27.         case MotionEvent.ACTION_DOWN:  
  28.             xDown = (int) event.getY();  
  29.             break;  
  30.   
  31.         case MotionEvent.ACTION_UP:  
  32.             xUp = (int) event.getY();  
  33.             if (xUp > xDown)// 下滑  
  34.             {  
  35.                 down();  
  36.             } else  
  37.             {  
  38.                 up();  
  39.             }  
  40.             break;  
  41.         }  
  42.   
  43.         return true;  
  44.     }  
触摸监听也得很简单哈,基本能实现,大家也可以加个最小距离加速度什么的,都行。


最后,效果图:


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


源码点击此处下载


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

你可能感兴趣的:(Android自定义控件)