自定义控件之-----progressBar

写了那一年多代码都没有认认真真写过自定义控件，最近看到网易新闻里面的加载图标如图

感觉很有意思，就准备自己写个玩玩。在api里面脑补了一些canvas的姿势，就上了，效果如下。

说实话真心不难，自定义控件比起平时做的应用多了几分自由和创作的快感，可能我应该去做游戏，代码如下，注释已经写的很白痴了：

[java] view plaincopyprint?

1. package com.example.circleprogressbar;
2. import android.content.Context;


3. import android.graphics.Canvas;


4. import android.graphics.Color;


5. import android.graphics.Paint;


6. import android.graphics.RectF;


7. import android.util.AttributeSet;


8. import android.view.View;
9. public class CircleProgressBarView extends View {


10. private int progress;


11. private int max;


12. private Paint paint;


13. private RectF oval;


14. public int getMax() {


15. return max;


16. }


17. public void setMax(int max) {


18. this.max = max;


19. }


20. public int getProgress() {


21. return progress;


22. }


23. public void setProgress(int progress) {


24. this.progress = progress;


25. invalidate();


26. }
27. public CircleProgressBarView(Context context, AttributeSet attrs) {


28. super(context, attrs);


29. paint = new Paint();


30. oval = new RectF();


31. }
32. @Override


33. protected void onDraw(Canvas canvas) {


34. super.onDraw(canvas);


35. paint.setAntiAlias(true);// 设置是否抗锯齿


36. paint.setFlags(Paint.ANTI_ALIAS_FLAG);// 帮助消除锯齿


37. paint.setColor(Color.GRAY);// 设置画笔灰色


38. paint.setStrokeWidth(10);// 设置画笔宽度


39. paint.setStyle(Paint.Style.STROKE);// 设置中空的样式


40. canvas.drawCircle(100, 100, 55, paint);// 在中心为（100,100）的地方画个半径为55的圆，宽度为setStrokeWidth：10，也就是灰色的底边


41. paint.setColor(Color.GREEN);// 设置画笔为绿色


42. oval.set(45, 45, 155, 155);// 设置类似于左上角坐标（45,45），右下角坐标（155,155），这样也就保证了半径为55


43. canvas.drawArc(oval, -90, ((float) progress / max) * 360, false, paint);// 画圆弧，第二个参数为：起始角度，第三个为跨的角度，第四个为true的时候是实心，false的时候为空心


44. paint.reset();// 将画笔重置


45. paint.setStrokeWidth(3);// 再次设置画笔的宽度


46. paint.setTextSize(35);// 设置文字的大小


47. paint.setColor(Color.BLACK);// 设置画笔颜色


48. if (progress == max) {


49. canvas.drawText("完成", 70, 110, paint);


50. } else {


51. canvas.drawText(progress + "%", 70, 110, paint);


52. }


53. }


54. }

[html] view plaincopyprint?

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"


2. xmlns:tools="http://schemas.android.com/tools"


3. android:layout_width="match_parent"


4. android:layout_height="match_parent"


5. android:paddingBottom="@dimen/activity_vertical_margin"


6. android:paddingLeft="@dimen/activity_horizontal_margin"


7. android:paddingRight="@dimen/activity_horizontal_margin"


8. android:paddingTop="@dimen/activity_vertical_margin"


9. tools:context=".CirclePbActivity" >
10. <com.example.circleprogressbar.CircleProgressBarView


11. android:id="@+id/circleProgressBar"


12. android:layout_width="wrap_content"


13. android:layout_height="wrap_content" />


14. </RelativeLayout>

[java] view plaincopyprint?

1. package com.example.circleprogressbar;
2. import android.os.Bundle;


3. import android.os.Handler;


4. import android.app.Activity;


5. import android.view.Menu;
6. public class CirclePbActivity extends Activity {


7. private CircleProgressBarView testConvas;


8. private int i = 0;


9. Handler handler = new Handler() {


10. public void handleMessage(android.os.Message msg) {


11. testConvas.setProgress(msg.what);


12. if (i <= testConvas.getMax()) {


13. handler.sendEmptyMessageDelayed(i++, 50);


14. }


15. };


16. };


17. @Override


18. protected void onCreate(Bundle savedInstanceState) {


19. super.onCreate(savedInstanceState);


20. setContentView(R.layout.activity_circle_progressbar);


21. testConvas = (CircleProgressBarView) findViewById(R.id.circleProgressBar);


22. testConvas.setMax(100);


23. handler.sendEmptyMessageDelayed(i++, 50);


24. }


25. }

做了圆形的，一不做二不休，把horizontalProgressBar也做了一遍，加了一点创意要素，立马多了几分艺术气息(其实好像更俗气了)，各位可以自己发挥想象力。

[java] view plaincopyprint?

1. package com.example.circleprogressbar;
2. import android.annotation.SuppressLint;


3. import android.content.Context;


4. import android.graphics.Bitmap;


5. import android.graphics.BitmapFactory;


6. import android.graphics.Canvas;


7. import android.graphics.Color;


8. import android.graphics.Paint;


9. import android.util.AttributeSet;


10. import android.view.View;
11. @SuppressLint("DrawAllocation")


12. public class HorizontalProgressBarView extends View {


13. private int progress = 50;


14. private int max = 100;


15. private int mwidth = 450;


16. private int mhight = 40;


17. private int startX;


18. private int startY;


19. private Paint paint;
20. public int getMwidth() {


21. return mwidth;


22. }
23. public void setMwidth(int mwidth) {


24. this.mwidth = mwidth;


25. }
26. public int getMhight() {


27. return mhight;


28. }
29. public void setMhight(int mhight) {


30. this.mhight = mhight;


31. }
32. public int getProgress() {


33. return progress;


34. }
35. public void setProgress(int progress) {


36. this.progress = progress;


37. invalidate();


38. }
39. public int getMax() {


40. return max;


41. }
42. public void setMax(int max) {


43. this.max = max;


44. }
45. public HorizontalProgressBarView(Context context, AttributeSet attrs) {


46. super(context, attrs);


47. paint = new Paint();


48. }
49. @Override


50. protected void onDraw(Canvas canvas) {


51. super.onDraw(canvas);


52. paint.setAntiAlias(true);// 设置是否抗锯齿


53. paint.setFlags(Paint.ANTI_ALIAS_FLAG);// 帮助消除锯齿


54. paint.setColor(Color.parseColor("#EFEFEF"));// 设置画笔灰色


55. paint.setStrokeWidth(10);// 设置画笔宽度


56. canvas.drawRect(startX, startY, mwidth, mhight, paint);


57. paint.setColor(Color.parseColor("#76B034"));


58. canvas.drawRect(startX, startY, ((float) progress / max) * mwidth,


59. mhight, paint);


60. // 绘制内部线条


61. paint.setStrokeWidth(2);


62. paint.setColor(Color.YELLOW);


63. canvas.drawLine(startX, startY + (mhight - startY) / 4 * 1,


64. ((float) progress / max) * mwidth, startY + (mhight - startY)


65. / 4 * 1, paint);


66. paint.setColor(Color.RED);


67. canvas.drawLine(startX, startY + (mhight - startY) / 4 * 2,


68. ((float) progress / max) * mwidth, startY + (mhight - startY)


69. / 4 * 2, paint);


70. paint.setColor(Color.WHITE);


71. canvas.drawLine(startX, startY + (mhight - startY) / 4 * 3,


72. ((float) progress / max) * mwidth, startY + (mhight - startY)


73. / 4 * 3, paint);


74. // 绘制下标进度数字


75. if(progress<(max/3)){


76. paint.setColor(Color.BLACK);


77. }else if(progress<(max/3)*2&&progress>(max/3)){


78. paint.setColor(Color.YELLOW);


79. }else{


80. paint.setColor(Color.RED);


81. }


82. paint.setTextSize(30);


83. canvas.drawText(progress + "%", ((float) progress / max) * mwidth - 20,


84. mhight + 30, paint);


85. }


86. }

最后谈一下感想：

总感觉学的越多，自己的想象力和创新能力越枯竭，代码敲多了，脑袋敲不灵活了，以前没接触程序的时候有很多的想法，现在感觉自己越来越平庸，没了那份想象力，和搬砖的有什么区别？天朝的教育让能很快学会人家的技术，但是永远跟着别人后面，就看各大布局，各种控件，基本上都是学国外的。哎，不吐槽了，已经这样了，我希望能保存自己仅有的那份想象力，在敲代码的时候多想想自己能创造什么，一次从无到有，比重复千万次人家的都有价值，我是这么认为的。

原文：http://blog.csdn.net/mobilexu/article/details/9666461