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

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

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

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

好了，进入正题，继续我们的自定义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; }

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

最后，效果图：

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

源码点击此处下载

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

           

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow