android自定义view实现progressbar的效果

2022-06-02 23:13:06

一键清理是很多Launcher都会带有的功能，其效果也比较美观。实现方式也许有很多中，其中常见的是使用图片drawable来完成的，具体可以参考这篇文章：模仿实现360桌面水晶球式的一键清理特效。本文另辟蹊径，使用自定义View来完成同样的效果，性能、效率更高。
  ProgressWheel相信很多人并不陌生，我参考了其中一些代码。有意思的是，看完它的代码，发现其中隐藏了没有使用的矩形进度条，因为项目名字的原因我估计也永远不会出现了吧。所以就在其基础之上增增改改，形成了ProgressRectangle。为了节省时间，第一版本并没有使用自定义的属性，这个以后再添加吧，毕竟有些鸡肋。代码如下：
  
[html] view plaincopy
  1. /**  
  2. *   
  3. */  
  4. package com.kince.progressrectangle;  
  5.   
  6. import android.content.Context;  
  7. import android.graphics.Canvas;  
  8. import android.graphics.Color;  
  9. import android.graphics.Paint;  
  10. import android.graphics.RectF;  
  11. import android.graphics.Paint.Style;  
  12. import android.os.Handler;  
  13. import android.os.Message;  
  14. import android.util.AttributeSet;  
  15. import android.util.Log;  
  16. import android.view.View;  
  17.   
  18. /**  
  19. * @author kince  
  20. * @category 仿solo桌面内存清理效果  
  21. * @since 2014.7.30  
  22. * @version 1.0.0  
  23. * {@link }  
  24. *   
  25. */  
  26. public class ProgressRectangle extends View {  
  27.   
  28.      // Sizes (with defaults)  
  29.      private int layout_height = 0;  
  30.      private int layout_width = 0;  
  31.      // Colors (with defaults)  
  32.      private int bgColor = Color.TRANSPARENT;  
  33.      private int progressColor = 0xFF339933;  
  34.      // Paints  
  35.      private Paint progressPaint = new Paint();  
  36.      private Paint bgPaint = new Paint();  
  37.      private Paint titlePaint = new Paint();  
  38.      private Paint usePaint = new Paint();  
  39.      // Rectangles  
  40.      private RectF rectBgBounds = new RectF();  
  41.      private RectF rectProgressBounds = new RectF();  
  42.   
  43.      int progress = 100;  
  44.      boolean isProgress;  
  45.   
  46.      private Handler spinHandler = new Handler() {  
  47.           /**  
  48.           * This is the code that will increment the progress variable and so  
  49.           * spin the wheel  
  50.           */  
  51.           @Override  
  52.           public void handleMessage(Message msg) {  
  53.                invalidate();  
  54.   
  55.                // super.handleMessage(msg);  
  56.           }  
  57.      };  
  58.   
  59.      /**  
  60.      * @param context  
  61.      */  
  62.      public ProgressRectangle(Context context) {  
  63.           super(context);  
  64.           // TODO Auto-generated constructor stub  
  65.      }  
  66.   
  67.      /**  
  68.      * @param context  
  69.      * @param attrs  
  70.      */  
  71.      public ProgressRectangle(Context context, AttributeSet attrs) {  
  72.           super(context, attrs);  
  73.           // TODO Auto-generated constructor stub  
  74.      }  
  75.   
  76.      /**  
  77.      * @param context  
  78.      * @param attrs  
  79.      * @param defStyleAttr  
  80.      */  
  81.      public ProgressRectangle(Context context, AttributeSet attrs,  
  82.                int defStyleAttr) {  
  83.           super(context, attrs, defStyleAttr);  
  84.           // TODO Auto-generated constructor stub  
  85.      }  
  86.   
  87.      @Override  
  88.      protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
  89.           // TODO Auto-generated method stub  
  90.           super.onSizeChanged(w, h, oldw, oldh);  
  91.           // Share the dimensions  
  92.           layout_width = w;  
  93.           Log.i("layout_width", layout_width + "");  
  94.   
  95.           layout_height = h;  
  96.           Log.i("layout_height", layout_height + "");  
  97.           setupBounds();  
  98.           setupPaints();  
  99.           invalidate();  
  100.   
  101.      }  
  102.   
  103.      private void setupPaints() {  
  104.           // TODO Auto-generated method stub  
  105.           bgPaint.setColor(bgColor);  
  106.           bgPaint.setAntiAlias(true);  
  107.           bgPaint.setStyle(Style.FILL);  
  108.   
  109.           progressPaint.setColor(progressColor);  
  110.           progressPaint.setAntiAlias(true);  
  111.           progressPaint.setStyle(Style.FILL);  
  112.   
  113.           titlePaint.setColor(Color.WHITE);  
  114.           titlePaint.setTextSize(20);  
  115.           titlePaint.setAntiAlias(true);  
  116.           titlePaint.setStyle(Style.FILL);  
  117.   
  118.           usePaint.setColor(Color.WHITE);  
  119.           usePaint.setAntiAlias(true);  
  120.           usePaint.setTextSize(30);  
  121.           usePaint.setStyle(Style.FILL);  
  122.   
  123.      }  
  124.   
  125.      private void setupBounds() {  
  126.           // TODO Auto-generated method stub  
  127.           int width = getWidth(); // this.getLayoutParams().width;  
  128.           Log.i("width", width + "");  
  129.           int height = getHeight(); // this.getLayoutParams().height;  
  130.           Log.i("height", height + "");  
  131.           rectBgBounds = new RectF(0, 0, width, height);  
  132.      }  
  133.   
  134.      @Override  
  135.      protected void onDraw(Canvas canvas) {  
  136.           // TODO Auto-generated method stub  
  137.           super.onDraw(canvas);  
  138.   
  139.           canvas.drawRect(rectBgBounds, bgPaint);  
  140.   
  141.           Log.i("progress", progress + "");  
  142.           rectProgressBounds = new RectF(0, 0, progress, layout_height);  
  143.           canvas.drawRect(rectProgressBounds, progressPaint);  
  144.           canvas.drawText("使用内存", 25, 25, titlePaint);  
  145.           canvas.drawText(progress + "M" + "/1024M", 25, 60, usePaint);  
  146.   
  147.      }  
  148.   
  149.      /**  
  150.      * Increment the progress by 1 (of 100)  
  151.      */  
  152.      public void incrementProgress() {  
  153.           isProgress = true;  
  154.           progress++;  
  155.           if (progress > 200)  
  156.                progress = 100;  
  157.           // setText(Math.round(((float) progress / 360) * 100) + "%");  
  158.           spinHandler.sendEmptyMessage(0);  
  159.      }  
  160.   
  161.      /**  
  162.      * Increment the progress by 1 (of 100)  
  163.      */  
  164.      public void unIncrementProgress() {  
  165.           isProgress = true;  
  166.           progress--;  
  167.           if (progress < 1)  
  168.                progress = 100;  
  169.           // setText(Math.round(((float) progress / 360) * 100) + "%");  
  170.           spinHandler.sendEmptyMessage(0);  
  171.      }  
  172.   
  173.      /**  
  174.      * Set the progress to a specific value  
  175.      */  
  176.      public void setProgress(int i) {  
  177.   
  178.           progress = i;  
  179.           spinHandler.sendEmptyMessage(0);  
  180.      }  
  181.   
  182. }  
  实现思路也是很简单的，就是在onDraw()方法里面绘制进度条的背景以及进度，进度的参数是传递进来的数值。Activity的代码如下：
[html] view plaincopy
  1. package com.kince.progressrectangle;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.util.Log;  
  6. import android.view.View;  
  7. import android.view.View.OnClickListener;  
  8. import android.widget.Button;  
  9.   
  10. public class RecActivity extends Activity {  
  11.   
  12.      boolean running;  
  13.      int progress = 0;  
  14.      ProgressRectangle progressRectangle;  
  15.        
  16.      @Override  
  17.      protected void onCreate(Bundle savedInstanceState) {  
  18.           // TODO Auto-generated method stub  
  19.           super.onCreate(savedInstanceState);  
  20.           setContentView(R.layout.activity_rec);  
  21.             
  22.           progressRectangle=(ProgressRectangle) findViewById(R.id.progressBar);  
  23.           final Runnable r = new Runnable() {  
  24.                     public void run() {  
  25.                          running = true;  
  26.                          while(progress<100) {  
  27.                               progressRectangle.incrementProgress();  
  28.                               progress++;  
  29.                               try {  
  30.                                    Thread.sleep(15);  
  31.                               } catch (InterruptedException e) {  
  32.                                    // TODO Auto-generated catch block  
  33.                                    e.printStackTrace();  
  34.                               }  
  35.                          }  
  36.                          while(progress>0) {  
  37.                               progressRectangle.unIncrementProgress();  
  38.                               progress--;  
  39.                               try {  
  40.                                    Thread.sleep(15);  
  41.                               } catch (InterruptedException e) {  
  42.                                    // TODO Auto-generated catch block  
  43.                                    e.printStackTrace();  
  44.                               }  
  45.                          }  
  46.             
  47.                          running = false;  
  48.                     }  
  49.              };  
  50.                
  51.           Button increment = (Button) findViewById(R.id.btn_increment);  
  52.         increment.setOnClickListener(new OnClickListener() {  
  53.                public void onClick(View v) {  
  54.                     if(!running) {  
  55.                          progress = 0;  
  56.                          Thread s = new Thread(r);  
  57.                          s.start();  
  58.                     }  
  59.                }  
  60.         });  
  61.      }  
  62. }  
  效果如下：
android自定义view实现progressbar的效果
android自定义view实现progressbar的效果

  总体来说，就是通过绘制矩形来达到目的。当然，在实际使用中的效果还是有所差异的，欢迎大家反馈、交流。
  <--
  csdn下载：http://download.csdn.net/detail/wangjinyu501/7694607
  gitub地址：https://github.com/wangjinyu501/ProgressRectangle
  -->
上一篇：从零学React Native之09可触摸组件


下一篇：从零学React Native之02状态机