Android中自定义View实现圆环等待及相关的音量调节效果

概述圆环交替、等待效果效果就这样，分析了一下，大概有这几个属性，两个颜色，一个速度，一个圆环的宽度。

圆环交替、等待效果

效果就这样，分析了一下，大概有这几个属性，两个颜色，一个速度，一个圆环的宽度。
自定VIEw的几个步骤：
1、自定义view的属性
2、在VIEw的构造方法中获得我们自定义的属性
3、重写onMesure 
4、重写onDraw

1、自定义属性：

<?xml version="1.0" en@R_301_5563@="utf-8"?> <resources>    <attr name="firstcolor" format="color" />   <attr name="secondcolor" format="color" />   <attr name="circleWIDth" format="dimension" />   <attr name="speed" format="integer" />    <declare-styleable name="CustomProgressbar">     <attr name="firstcolor" />     <attr name="secondcolor" />     <attr name="circleWIDth" />     <attr name="speed" />   </declare-styleable>  </resources> 

2、在VIEw的构造方法中获得我们自定义的属性

/**    * 第一圈的颜色    */   private int mFirstcolor;   /**    * 第二圈的颜色    */   private int mSecondcolor;   /**    * 圈的宽度    */   private int mCircleWIDth;   /**    * 画笔    */   private Paint mPaint;   /**    * 当前进度    */   private int mProgress;    /**    * 速度    */   private int mSpeed;    /**    * 是否应该开始下一个    */   private boolean isNext = false;    public CustomProgressbar(Context context,AttributeSet attrs)   {     this(context,attrs,0);   }    public CustomProgressbar(Context context)   {     this(context,null);   }    /**    * 必要的初始化，获得一些自定义的值    *    * @param context    * @param attrs    * @param defStyle    */   public CustomProgressbar(Context context,AttributeSet attrs,int defStyle)   {     super(context,defStyle);     TypedArray a = context.gettheme().obtainStyledAttributes(attrs,R.styleable.CustomProgressbar,defStyle,0);     int n = a.getIndexCount();      for (int i = 0; i < n; i++)     {       int attr = a.getIndex(i);       switch (attr)       {       case R.styleable.CustomProgressbar_firstcolor:         mFirstcolor = a.getcolor(attr,color.GREEN);         break;       case R.styleable.CustomProgressbar_secondcolor:         mSecondcolor = a.getcolor(attr,color.RED);         break;       case R.styleable.CustomProgressbar_circleWIDth:         mCircleWIDth = a.getDimensionPixelSize(attr,(int) TypedValue.applyDimension(             TypedValue.COMPLEX_UNIT_PX,20,getResources().getdisplayMetrics()));         break;       case R.styleable.CustomProgressbar_speed:         mSpeed = a.getInt(attr,20);// 默认20         break;       }     }     a.recycle();     mPaint = new Paint();     // 绘图线程     new Thread()     {       public voID run()       {         while (true)         {           mProgress++;           if (mProgress == 360)           {             mProgress = 0;             if (!isNext)               isNext = true;             else               isNext = false;           }           postInvalIDate();           try           {             Thread.sleep(mSpeed);           } catch (InterruptedException e)           {             e.printstacktrace();           }         }       };     }.start();    } 

3、直接重写onDraw，这不需要重写onMeasure

@OverrIDe   protected voID onDraw(Canvas canvas)   {      int centre = getWIDth() / 2; // 获取圆心的x坐标     int radius = centre - mCircleWIDth / 2;// 半径     mPaint.setstrokeWIDth(mCircleWIDth); // 设置圆环的宽度     mPaint.setAntiAlias(true); // 消除锯齿     mPaint.setStyle(Paint.Style.stroke); // 设置空心     RectF oval = new RectF(centre - radius,centre - radius,centre + radius,centre + radius); // 用于定义的圆弧的形状和大小的界限     if (!isNext)     {// 第一颜色的圈完整，第二颜色跑       mPaint.setcolor(mFirstcolor); // 设置圆环的颜色       canvas.drawCircle(centre,centre,radius,mPaint); // 画出圆环       mPaint.setcolor(mSecondcolor); // 设置圆环的颜色       canvas.drawArc(oval,-90,mProgress,false,mPaint); // 根据进度画圆弧     } else     {       mPaint.setcolor(mSecondcolor); // 设置圆环的颜色       canvas.drawCircle(centre,mPaint); // 画出圆环       mPaint.setcolor(mFirstcolor); // 设置圆环的颜色       canvas.drawArc(oval,mPaint); // 根据进度画圆弧     }    } 

大功完成了，当然了，唯一比较纠结的地方就是两个颜色何时切换，如何切换，我采用上面的办法，你也可以自己想想怎么实现。

视频音量调控

这样一个效果使用自定义view来实现的话和圆环的思路差不多，所以我们一起来看：
1、先分许需要的属性，两个小块的颜色、一张中间的图片、间隙大小、一个多少个块块。分析完毕，开始写attr.xml

<?xml version="1.0" en@R_301_5563@="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,0);   }    public CustomVolumControlbar(Context context)   {     this(context,null);   }    /**    * 必要的初始化，获得一些自定义的值    *    * @param context    * @param attrs    * @param defStyle    */   public CustomVolumControlbar(Context context,R.styleable.CustomVolumControlbar,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,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,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); // 用于定义的圆弧的形状和大小的界限      mPaint.setcolor(mFirstcolor); // 设置圆环的颜色     for (int i = 0; i < mCount; i++)     {       canvas.drawArc(oval,i * (itemSize + mSplitSize),itemSize,mPaint); // 根据进度画圆弧     }      mPaint.setcolor(mSecondcolor); // 设置圆环的颜色     for (int i = 0; i < mCurrentCount; i++)     {       canvas.drawArc(oval,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;   } 

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

最后，效果图：

总结

以上是内存溢出为你收集整理的Android中自定义View实现圆环等待及相关的音量调节效果全部内容，希望文章能够帮你解决Android中自定义View实现圆环等待及相关的音量调节效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。