Android 自定义View (三) 圆环交替 等待效果

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

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

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

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

1、自定义View的属性

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

[ 3、重写onMesure ]

4、重写onDraw

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

1、自定义属性：

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

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

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

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

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

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

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

源码点击下载