自定义环形进度条

1480阅读　0评论2015-04-03　vibe26
分类：Android平台

解决方案：自定义View
效果如下：

贴出代码:

注意：对于自定义View，必须要有两个参数的构造函数

MyProgressBar.java

  1. package cn.com.xiebiao.circleprogress;

  3. import android.content.Context;
  4. import android.content.res.TypedArray;
  5. import android.graphics.Canvas;
  6. import android.graphics.Color;
  7. import android.graphics.Paint;
  8. import android.graphics.RectF;
  9. import android.util.AttributeSet;
  10. import android.util.Log;
  11. import android.view.View;

  13. import java.text.DecimalFormat;


  16. /**
  17.  * Created by vibexie on 4/2/15.
  18.  */
  19. public class MyProgressBar extends View {
  20.     /**
  21.      *内圈的颜色
  22.      */
  23.     private int innerColor;
  24.     /**
  25.      *外圈的颜色
  26.      */
  27.     private int outerColor;
  28.     /**
  29.      *内圆的半径
  30.      */
  31.     private int circleRadius;
  32.     /**
  33.      * 圆环的宽度
  34.      */
  35.     private int ringWidth;
  36.     /**
  37.      *速度
  38.      */
  39.     private int speed;
  40.     /**
  41.      *当前进度
  42.      */
  43.     private int currentProgress;
  44.     /*
  45.      *环的画笔
  46.      */
  47.     private Paint circlePaint;

  49.     /**
  50.      * 进度画笔
  51.      */
  52.     private Paint progressPaint;

  54.     /**
  55.      * 进度文本字体大小
  56.      */
  57.     private int progressTextSize;

  59.     public MyProgressBar(Context context) {
  60.         this(context, null);
  61.     }

  63.     public MyProgressBar(Context context, AttributeSet attrs) {
  64.         super(context, attrs);

  66.         /**
  67.          *获取自定义属性数组
  68.          */
  69.         TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.MyProgressBar);
  70.         int attrCount=typedArray.getIndexCount();

  72.         /**
  73.          *提取自定义属性的值
  74.          */
  75.         for(int i=0;i<attrCount;i++){
  76.             int attr=typedArray.getIndex(i);
  77.             switch (attr){
  78.                 case R.styleable.MyProgressBar_innerColor:
  79.                     //getColor的第二个参数是在第一个参数为空的时候设置的值
  80.                     innerColor=typedArray.getColor(R.styleable.MyProgressBar_innerColor,Color.GREEN);
  81.                     break;
  82.                 case R.styleable.MyProgressBar_outerColor:
  83.                     outerColor=typedArray.getColor(R.styleable.MyProgressBar_outerColor,Color.RED);
  84.                     break;
  85.                 case R.styleable.MyProgressBar_innerCircleRadius:
  86.                     circleRadius=typedArray.getDimensionPixelOffset(R.styleable.MyProgressBar_innerCircleRadius,100);
  87.                     break;
  88.                 case R.styleable.MyProgressBar_ringWidth:
  89.                     ringWidth=typedArray.getDimensionPixelOffset(R.styleable.MyProgressBar_ringWidth, 10);
  90.                     break;
  91.                 case R.styleable.MyProgressBar_progressTextSize:
  92.                     progressTextSize=typedArray.getDimensionPixelSize(R.styleable.MyProgressBar_progressTextSize,25);
  93.                     break;
  94.                 case R.styleable.MyProgressBar_speed:
  95.                     speed=typedArray.getInt(R.styleable.MyProgressBar_speed,20);
  96.                     break;
  97.             }
  98.         }
  99.         /**
  100.          * Recycle the TypedArray, to be re-used by a later caller. After calling
  101.          * this function you must not ever touch the typed array again.
  102.          */
  103.         typedArray.recycle();

  105.         /**
  106.          * new出画笔
  107.          */
  108.         circlePaint=new Paint();
  109.         progressPaint=new Paint();
  110.         /**
  111.          * 绘图线程
  112.          */

  114.         new Thread()
  115.         {
  116.             public void run()
  117.             {
  118.                 while (true)
  119.                 {
  120.                     currentProgress++;
  121.                     if (currentProgress == 360)
  122.                     {
  123.                         currentProgress = 0;
  124.                     }
  125.                     postInvalidate();
  126.                     try
  127.                     {
  128.                         Thread.sleep(speed);
  129.                     } catch (InterruptedException e)
  130.                     {
  131.                         e.printStackTrace();
  132.                     }
  133.                 }
  134.             };
  135.         }.start();
  136.     }


  139.     @Override
  140.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  141.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  142.     }

  144.     @Override
  145.     protected void onDraw(Canvas canvas) {
  146.         super.onDraw(canvas);
  147.         /**
  148.          * 获取圆心的x坐标
  149.          */
  150.         int x=getWidth()/2;
  151.         /**
  152.          * 获取圆心的Y坐标
  153.          */
  154.         int y=getHeight()/2;

  156.         /**
  157.          *设置环画笔的属性
  158.          */
  159.         circlePaint.setStyle(Paint.Style.STROKE);
  160.         circlePaint.setStrokeWidth(ringWidth);
  161.         circlePaint.setAntiAlias(true);

  163.         /**
  164.          * 设置进度画笔的属性
  165.          */
  166.         progressPaint.setStyle(Paint.Style.FILL);
  167.         progressPaint.setTextSize(progressTextSize);
  168.         progressPaint.setAntiAlias(true);
  169.         /**
  170.          * 进度文本的X坐标
  171.          */
  172.         int progressX=(int)(x-(progressTextSize*3/4));
  173.         int progressY=y+(progressTextSize/2);
  174.         /**
  175.          * 用于定义的圆弧的形状和大小的界限
  176.          */
  177.         RectF oval = new RectF(x-circleRadius, y-circleRadius, x+circleRadius, y+circleRadius);
  178.         /**
  179.          * 底层的圆圈完整，上层的圆圈跑
  180.          */
  181.         circlePaint.setColor(innerColor);
  182.         canvas.drawCircle(x, y, circleRadius, circlePaint);
  183.         circlePaint.setColor(outerColor);

  185.         DecimalFormat decimalFormat=new DecimalFormat("#.0");
  186.         canvas.drawText("" + decimalFormat.format(currentProgress/3.6), progressX, progressY, progressPaint);
  187.         canvas.drawArc(oval, -90, currentProgress, false, circlePaint);
  188.     }
  189. }

/value/attr.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <declare-styleable name="MyProgressBar">
  4.         <attr name="innerColor" format="color"/>
  5.         <attr name="outerColor" format="color"/>
  6.         <!--内圆的半径-->
  7.         <attr name="innerCircleRadius" format="dimension"/>
  8.         <!--圆环的宽度-->
  9.         <attr name="ringWidth" format="dimension"/>
  10.         <!--进度文本字体大小-->
  11.         <attr name="progressTextSize" format="dimension"/>
  12.         <attr name="speed" format="integer"/>
  13.     </declare-styleable>
  14. </resources>


MainActivity.java

  1. package cn.com.xiebiao.circleprogress;

  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.view.Menu;
  6. import android.view.MenuItem;


  9. public class MainActivity extends Activity {

  11.     @Override
  12.     protected void onCreate(Bundle savedInstanceState) {
  13.         super.onCreate(savedInstanceState);
  14.         setContentView(R.layout.activity_main);
  15.     }

  17. }

AndroidMainfest.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android=""
  3.     package="cn.com.xiebiao.circleprogress" >

  5.     <application
  6.         android:allowBackup="true"
  7.         android:icon="@mipmap/ic_launcher"
  8.         android:label="@string/app_name"
  9.         android:theme="@style/AppTheme" >
  10.         <activity
  11.             android:name="cn.com.xiebiao.circleprogress.MainActivity"
  12.             android:label="@string/app_name" >
  13.             <intent-filter>
  14.                 <action android:name="android.intent.action.MAIN" />

  16.                 <category android:name="android.intent.category.LAUNCHER" />
  17.             </intent-filter>
  18.         </activity>
  19.     </application>

  21. </manifest>

注意，在android Studio上开发安卓，对于自定义View的命名空间，只要""即可。

activity_main.xml

  1. <RelativeLayout xmlns:android=""
  2.     xmlns:tools=""
  3.     xmlns:myProgressBar=""
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">

  7.     <cn.com.xiebiao.circleprogress.MyProgressBar
  8.         android:layout_width="match_parent"
  9.         android:layout_height="match_parent"
  10.         myProgressBar:innerColor="#ff1f8a3c"
  11.         myProgressBar:outerColor="#ffa60a0e"
  12.         myProgressBar:ringWidth="30dp"
  13.         myProgressBar:innerCircleRadius="100dp"
  14.         myProgressBar:progressTextSize="50dp"
  15.         myProgressBar:speed="20"
  16.         />

  18. </RelativeLayout>




上一篇：动态添加Fragment布局文件的诡异
下一篇：Android Studio下ViewPager全屏的诡异