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

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

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

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

1. <?xml version="1.0" encoding="utf-8"?>
2. <resources>
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>
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>
20. </resources>

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

1. /**
2. * 第一圈的颜色
3. */
4. private int mFirstColor;
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;
23. /**
24. * 中间的图片
25. */
26. private Bitmap mImage;
27. /**
28. * 每个块块间的间隙
29. */
30. private int mSplitSize;
31. /**
32. * 个数
33. */
34. private int mCount;
36. private Rect mRect;
38. public CustomVolumControlBar(Context context, AttributeSet attrs)
39. {
40. this(context, attrs, 0);
41. }
43. public CustomVolumControlBar(Context context)
44. {
45. this(context, null);
46. }
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();
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

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);
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);
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());
41. }
42. // 绘图
43. canvas.drawBitmap(mImage, null, mRect, mPaint);
44. }
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;
60. RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限
62. mPaint.setColor(mFirstColor); // 设置圆环的颜色
63. for ( int i = 0; i < mCount; i++)
64. {
65. canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根据进度画圆弧
66. }
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、添加触摸监听：

1. /**
2. * 当前数量+1
3. */
4. public void up()
5. {
6. mCurrentCount++;
7. postInvalidate();
8. }
10. /**
11. * 当前数量-1
12. */
13. public void down()
14. {
15. mCurrentCount--;
16. postInvalidate();
17. }
19. private int xDown, xUp;
21. @Override
22. public boolean onTouchEvent(MotionEvent event)
23. {
25. switch (event.getAction())
26. {
27. case MotionEvent.ACTION_DOWN:
28. xDown = ( int) event.getY();
29. break;
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. }
43. return true;
44. }

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

最后，效果图：

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