您的位置: 首页  >  文章  >  Android开发，自定义View（三）-----圆环交替 等待效果

Android开发，自定义View（三）-----圆环交替 等待效果

分类: 文章 • 2025-01-03 20:28:40

转载自：http://blog.****.NET/lmj623565791/article/details/24500107

照惯例感谢鸿神


上一篇Android开发，自定义View（二）-----进阶


一个朋友今天有这么个需求（下图），我觉得那自定义View来做还是很适合的，就做了下，顺便和大家分享下，对于自定义View多练没坏处么。如果你看了前两篇，那么这篇一定so easy 。

Android开发，自定义View（三）-----圆环交替 等待效果

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

还是我们自定View的那几个步骤：

1、自定义View的属性

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

[ 3、重写onMesure ]

4、重写onDraw

-------------------------------------------------------------------------------------------------------------------

1、自定义属性：

[java] 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="speed" format="integer" />  
  8.   
  9.     <declare-styleable name="CustomProgressBar">  
  10.         <attr name="firstColor" />  
  11.         <attr name="secondColor" />  
  12.         <attr name="circleWidth" />  
  13.         <attr name="speed" />  
  14.     </declare-styleable>  
  15.   
  16. </resources>  

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

[java] view plain copy
  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 mProgress;  
  21.   
  22.     /** 
  23.      * 速度 
  24.      */  
  25.     private int mSpeed;  
  26.   
  27.     /** 
  28.      * 是否应该开始下一个 
  29.      */  
  30.     private boolean isNext = false;  
  31.   
  32.     public CustomProgressBar(Context context, AttributeSet attrs)  
  33.     {  
  34.         this(context, attrs, 0);  
  35.     }  
  36.   
  37.     public CustomProgressBar(Context context)  
  38.     {  
  39.         this(context, null);  
  40.     }  
  41.   
  42.     /** 
  43.      * 必要的初始化，获得一些自定义的值 
  44.      *  
  45.      * @param context 
  46.      * @param attrs 
  47.      * @param defStyle 
  48.      */  
  49.     public CustomProgressBar(Context context, AttributeSet attrs, int defStyle)  
  50.     {  
  51.         super(context, attrs, defStyle);  
  52.         TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomProgressBar, defStyle, 0);  
  53.         int n = a.getIndexCount();  
  54.   
  55.         for (int i = 0; i < n; i++)  
  56.         {  
  57.             int attr = a.getIndex(i);  
  58.             switch (attr)  
  59.             {  
  60.             case R.styleable.CustomProgressBar_firstColor:  
  61.                 mFirstColor = a.getColor(attr, Color.GREEN);  
  62.                 break;  
  63.             case R.styleable.CustomProgressBar_secondColor:  
  64.                 mSecondColor = a.getColor(attr, Color.RED);  
  65.                 break;  
  66.             case R.styleable.CustomProgressBar_circleWidth:  
  67.                 mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(  
  68.                         TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));  
  69.                 break;  
  70.             case R.styleable.CustomProgressBar_speed:  
  71.                 mSpeed = a.getInt(attr, 20);// 默认20  
  72.                 break;  
  73.             }  
  74.         }  
  75.         a.recycle();  
  76.         mPaint = new Paint();  
  77.         // 绘图线程  
  78.         new Thread()  
  79.         {  
  80.             public void run()  
  81.             {  
  82.                 while (true)  
  83.                 {  
  84.                     mProgress++;  
  85.                     if (mProgress == 360)  
  86.                     {  
  87.                         mProgress = 0;  
  88.                         if (!isNext)  
  89.                             isNext = true;  
  90.                         else  
  91.                             isNext = false;  
  92.                     }  
  93.                     postInvalidate();  
  94.                     try  
  95.                     {  
  96.                         Thread.sleep(mSpeed);  
  97.                     } catch (InterruptedException e)  
  98.                     {  
  99.                         e.printStackTrace();  
  100.                     }  
  101.                 }  
  102.             };  
  103.         }.start();  
  104.   
  105.     }  

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

[java] view plain copy
  1. @Override  
  2.     protected void onDraw(Canvas canvas)  
  3.     {  
  4.   
  5.         int centre = getWidth() / 2; // 获取圆心的x坐标  
  6.         int radius = centre - mCircleWidth / 2;// 半径  
  7.         mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度  
  8.         mPaint.setAntiAlias(true); // 消除锯齿  
  9.         mPaint.setStyle(Paint.Style.STROKE); // 设置空心  
  10.         RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限  
  11.         if (!isNext)  
  12.         {// 第一颜色的圈完整，第二颜色跑  
  13.             mPaint.setColor(mFirstColor); // 设置圆环的颜色  
  14.             canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环  
  15.             mPaint.setColor(mSecondColor); // 设置圆环的颜色  
  16.             canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧  
  17.         } else  
  18.         {  
  19.             mPaint.setColor(mSecondColor); // 设置圆环的颜色  
  20.             canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环  
  21.             mPaint.setColor(mFirstColor); // 设置圆环的颜色  
  22.             canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧  
  23.         }  
  24.   
  25.     }  

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


好了，各位看官留个言，顶一个吧~


源码点击下载


相关推荐