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

2022-08-08 10:22:43

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

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

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

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

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

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

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

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

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);
  15. /**
  16. * 计算内切正方形的位置
  17. */
  18. int relRadius = radius - mCircleWidth / 2;// 获得内圆的半径
  19. /**
  20. * 内切正方形的距离顶部 = mCircleWidth + relRadius - √2 / 2
  21. */
  22. mRect.left = (int) (relRadius - Math.sqrt(2) * 1.0f / 2 * relRadius) + mCircleWidth;
  23. /**
  24. * 内切正方形的距离左边 = mCircleWidth + relRadius - √2 / 2
  25. */
  26. mRect.top = (int) (relRadius - Math.sqrt(2) * 1.0f / 2 * relRadius) + mCircleWidth;
  27. mRect.bottom = (int) (mRect.left + Math.sqrt(2) * relRadius);
  28. mRect.right = (int) (mRect.left + Math.sqrt(2) * relRadius);
  29. /**
  30. * 如果图片比较小，那么根据图片的尺寸放置到正中心
  31. */
  32. if (mImage.getWidth() < Math.sqrt(2) * relRadius)
  33. {
  34. mRect.left = (int) (mRect.left + Math.sqrt(2) * relRadius * 1.0f / 2 - mImage.getWidth() * 1.0f / 2);
  35. mRect.top = (int) (mRect.top + Math.sqrt(2) * relRadius * 1.0f / 2 - mImage.getHeight() * 1.0f / 2);
  36. mRect.right = (int) (mRect.left + mImage.getWidth());
  37. mRect.bottom = (int) (mRect.top + mImage.getHeight());
  38. }
  39. // 绘图
  40. canvas.drawBitmap(mImage, null, mRect, mPaint);
  41. }
  42. /**
  43. * 根据参数画出每个小块
  44. *
  45. * @param canvas
  46. * @param centre
  47. * @param radius
  48. */
  49. private void drawOval(Canvas canvas, int centre, int radius)
  50. {
  51. /**
  52. * 根据需要画的个数以及间隙计算每个块块所占的比例*360
  53. */
  54. float itemSize = (360 * 1.0f - mCount * mSplitSize) / mCount;
  55. RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限
  56. mPaint.setColor(mFirstColor); // 设置圆环的颜色
  57. for (int i = 0; i < mCount; i++)
  58. {
  59. canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根据进度画圆弧
  60. }
  61. mPaint.setColor(mSecondColor); // 设置圆环的颜色
  62. for (int i = 0; i < mCurrentCount; i++)
  63. {
  64. canvas.drawArc(oval, i * (itemSize + mSplitSize), itemSize, false, mPaint); // 根据进度画圆弧
  65. }
  66. }

这里需要注意下：

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

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

4、添加触摸监听：

  1. /**
  2. * 当前数量+1
  3. */
  4. public void up()
  5. {
  6. mCurrentCount++;
  7. postInvalidate();
  8. }
  9. /**
  10. * 当前数量-1
  11. */
  12. public void down()
  13. {
  14. mCurrentCount--;
  15. postInvalidate();
  16. }
  17. private int xDown, xUp;
  18. @Override
  19. public boolean onTouchEvent(MotionEvent event)
  20. {
  21. switch (event.getAction())
  22. {
  23. case MotionEvent.ACTION_DOWN:
  24. xDown = (int) event.getY();
  25. break;
  26. case MotionEvent.ACTION_UP:
  27. xUp = (int) event.getY();
  28. if (xUp > xDown)// 下滑
  29. {
  30. down();
  31. } else
  32. {
  33. up();
  34. }
  35. break;
  36. }
  37. return true;
  38. }

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

最后，效果图：

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

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

源码点击此处下载

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

上一篇：基于 AVPlayer 自定义播放器


下一篇：shell解析my.cnf配置文件