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

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

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

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

 

[java] view plaincopyprint?
 
  1. package com.example.circleprogressbar;  
  2.   
  3. import android.content.Context;  
  4. import android.graphics.Canvas;  
  5. import android.graphics.Color;  
  6. import android.graphics.Paint;  
  7. import android.graphics.RectF;  
  8. import android.util.AttributeSet;  
  9. import android.view.View;  
  10.   
  11. public class CircleProgressBarView extends View {  
  12.     private int progress;  
  13.     private int max;  
  14.     private Paint paint;  
  15.     private RectF oval;  
  16.     public int getMax() {  
  17.         return max;  
  18.     }  
  19.     public void setMax(int max) {  
  20.         this.max = max;  
  21.     }  
  22.     public int getProgress() {  
  23.         return progress;  
  24.     }  
  25.     public void setProgress(int progress) {  
  26.         this.progress = progress;  
  27.         invalidate();  
  28.     }  
  29.   
  30.     public CircleProgressBarView(Context context, AttributeSet attrs) {  
  31.         super(context, attrs);  
  32.         paint = new Paint();  
  33.         oval = new RectF();  
  34.     }  
  35.   
  36.     @Override  
  37.     protected void onDraw(Canvas canvas) {  
  38.         super.onDraw(canvas);  
  39.         paint.setAntiAlias(true);// 设置是否抗锯齿  
  40.         paint.setFlags(Paint.ANTI_ALIAS_FLAG);// 帮助消除锯齿  
  41.         paint.setColor(Color.GRAY);// 设置画笔灰色  
  42.         paint.setStrokeWidth(10);// 设置画笔宽度  
  43.         paint.setStyle(Paint.Style.STROKE);// 设置中空的样式  
  44.         canvas.drawCircle(100, 100, 55, paint);// 在中心为（100,100）的地方画个半径为55的圆，宽度为setStrokeWidth：10，也就是灰色的底边  
  45.         paint.setColor(Color.GREEN);// 设置画笔为绿色  
  46.         oval.set(45, 45, 155, 155);// 设置类似于左上角坐标（45,45），右下角坐标（155,155），这样也就保证了半径为55  
  47.         canvas.drawArc(oval, -90, ((float) progress / max) * 360, false, paint);// 画圆弧，第二个参数为：起始角度，第三个为跨的角度，第四个为true的时候是实心，false的时候为空心  
  48.         paint.reset();// 将画笔重置  
  49.         paint.setStrokeWidth(3);// 再次设置画笔的宽度  
  50.         paint.setTextSize(35);// 设置文字的大小  
  51.         paint.setColor(Color.BLACK);// 设置画笔颜色  
  52.         if (progress == max) {  
  53.             canvas.drawText("完成", 70, 110, paint);  
  54.         } else {  
  55.             canvas.drawText(progress + "%", 70, 110, paint);  
  56.         }  
  57.     }  
  58. }  

 

[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.   
  11.     <com.example.circleprogressbar.CircleProgressBarView  
  12.         android:id="@+id/circleProgressBar"  
  13.         android:layout_width="wrap_content"  
  14.         android:layout_height="wrap_content" />  
  15. </RelativeLayout>  

 

[java] view plaincopyprint?
 
  1. package com.example.circleprogressbar;  
  2.   
  3. import android.os.Bundle;  
  4. import android.os.Handler;  
  5. import android.app.Activity;  
  6. import android.view.Menu;  
  7.   
  8. public class CirclePbActivity extends Activity {  
  9.     private CircleProgressBarView testConvas;  
  10.     private int i = 0;  
  11.     Handler handler = new Handler() {  
  12.         public void handleMessage(android.os.Message msg) {  
  13.             testConvas.setProgress(msg.what);  
  14.             if (i <= testConvas.getMax()) {  
  15.                 handler.sendEmptyMessageDelayed(i++, 50);  
  16.             }  
  17.         };  
  18.     };  
  19.     @Override  
  20.     protected void onCreate(Bundle savedInstanceState) {  
  21.         super.onCreate(savedInstanceState);  
  22.         setContentView(R.layout.activity_circle_progressbar);  
  23.         testConvas = (CircleProgressBarView) findViewById(R.id.circleProgressBar);  
  24.         testConvas.setMax(100);  
  25.         handler.sendEmptyMessageDelayed(i++, 50);  
  26.     }  
  27. }  


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

 


 

[java] view plaincopyprint?
 
  1. package com.example.circleprogressbar;  
  2.   
  3. import android.annotation.SuppressLint;  
  4. import android.content.Context;  
  5. import android.graphics.Bitmap;  
  6. import android.graphics.BitmapFactory;  
  7. import android.graphics.Canvas;  
  8. import android.graphics.Color;  
  9. import android.graphics.Paint;  
  10. import android.util.AttributeSet;  
  11. import android.view.View;  
  12.   
  13. @SuppressLint("DrawAllocation")  
  14. public class HorizontalProgressBarView extends View {  
  15.     private int progress = 50;  
  16.     private int max = 100;  
  17.     private int mwidth = 450;  
  18.     private int mhight = 40;  
  19.     private int startX;  
  20.     private int startY;  
  21.     private Paint paint;  
  22.   
  23.     public int getMwidth() {  
  24.         return mwidth;  
  25.     }  
  26.   
  27.     public void setMwidth(int mwidth) {  
  28.         this.mwidth = mwidth;  
  29.     }  
  30.   
  31.     public int getMhight() {  
  32.         return mhight;  
  33.     }  
  34.   
  35.     public void setMhight(int mhight) {  
  36.         this.mhight = mhight;  
  37.     }  
  38.   
  39.     public int getProgress() {  
  40.         return progress;  
  41.     }  
  42.   
  43.     public void setProgress(int progress) {  
  44.         this.progress = progress;  
  45.         invalidate();  
  46.     }  
  47.   
  48.     public int getMax() {  
  49.         return max;  
  50.     }  
  51.   
  52.     public void setMax(int max) {  
  53.         this.max = max;  
  54.     }  
  55.   
  56.     public HorizontalProgressBarView(Context context, AttributeSet attrs) {  
  57.         super(context, attrs);  
  58.         paint = new Paint();  
  59.     }  
  60.   
  61.     @Override  
  62.     protected void onDraw(Canvas canvas) {  
  63.         super.onDraw(canvas);  
  64.         paint.setAntiAlias(true);// 设置是否抗锯齿  
  65.         paint.setFlags(Paint.ANTI_ALIAS_FLAG);// 帮助消除锯齿  
  66.         paint.setColor(Color.parseColor("#EFEFEF"));// 设置画笔灰色  
  67.         paint.setStrokeWidth(10);// 设置画笔宽度  
  68.         canvas.drawRect(startX, startY, mwidth, mhight, paint);  
  69.         paint.setColor(Color.parseColor("#76B034"));  
  70.         canvas.drawRect(startX, startY, ((float) progress / max) * mwidth,  
  71.                 mhight, paint);  
  72.         // 绘制内部线条  
  73.         paint.setStrokeWidth(2);  
  74.         paint.setColor(Color.YELLOW);  
  75.         canvas.drawLine(startX, startY + (mhight - startY) / 4 * 1,  
  76.                 ((float) progress / max) * mwidth, startY + (mhight - startY)  
  77.                         / 4 * 1, paint);  
  78.         paint.setColor(Color.RED);  
  79.         canvas.drawLine(startX, startY + (mhight - startY) / 4 * 2,  
  80.                 ((float) progress / max) * mwidth, startY + (mhight - startY)  
  81.                         / 4 * 2, paint);  
  82.         paint.setColor(Color.WHITE);  
  83.         canvas.drawLine(startX, startY + (mhight - startY) / 4 * 3,  
  84.                 ((float) progress / max) * mwidth, startY + (mhight - startY)  
  85.                         / 4 * 3, paint);  
  86.         // 绘制下标进度数字  
  87.         if(progress<(max/3)){  
  88.             paint.setColor(Color.BLACK);  
  89.         }else if(progress<(max/3)*2&&progress>(max/3)){  
  90.             paint.setColor(Color.YELLOW);  
  91.         }else{  
  92.             paint.setColor(Color.RED);  
  93.         }  
  94.         paint.setTextSize(30);  
  95.         canvas.drawText(progress + "%", ((float) progress / max) * mwidth - 20,  
  96.                 mhight + 30, paint);  
  97.     }  
  98. }  

最后谈一下感想：

 

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

 

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

posted on 2014-05-09 18:17  veins  阅读(309)  评论(0)  编辑  收藏  举报

导航