android自定義view制作圓形進(jìn)度條效果

2019-12-12 03:56:50

字體：大中小

供稿：網(wǎng)友

還是我們自定View的那幾個步驟：
1、自定義View的屬性
2、在View的構(gòu)造方法中獲得我們自定義的屬性
[ 3、重寫onMesure ]
4、重寫onDraw

1、自定義屬性：

<?xml version="1.0" encoding="utf-8"?> <resources>  <declare-styleable name="CustomTitleView">   <attr name="mSpeed" format="integer" />   <attr name="mFirstColor" format="color" />   <attr name="mSecondColor" format="color" />   <attr name="mCircleWidth" format="dimension"/>   <attr name="textSize" format="dimension"/>  </declare-styleable> </resources>

2、在View的構(gòu)造方法中獲得我們自定義的屬性

/**  * 當(dāng)前進(jìn)度  */  private int mProgress;  /**  * 第一圈的顏色  */  private int mFirstColor;  /**  * 第二圈的顏色  */  private int mSecondColor;  /**  * 圈的寬度  */  private int mCircleWidth;  /**  * 速度  */  private int mSpeed;  /**  * 中間進(jìn)度百分比的字符串的字體  */  private float textSize;  private boolean isNext = false;  private Paint mPaint;   public CustomTitleView(Context context, AttributeSet attrs) {   super(context, attrs);   TypedArray typearray = context.obtainStyledAttributes(attrs, R.styleable.CustomTitleView);   int count= typearray.getIndexCount();   for(int i=0;i<count;i++){    int attr =typearray.getIndex(i);    switch(attr){     case R.styleable.CustomTitleView_mFirstColor:      mFirstColor=typearray.getColor(attr,Color.BLACK);      break;     case R.styleable.CustomTitleView_mSecondColor:      mSecondColor=typearray.getColor(attr,Color.RED);      break;     case R.styleable.CustomTitleView_mCircleWidth:      mCircleWidth = typearray.getDimensionPixelSize(attr,(int)TypedValue.applyDimension(        TypedValue.COMPLEX_UNIT_PX,20,getResources().getDisplayMetrics()));      break;      case R.styleable.CustomTitleView_textSize:      textSize = typearray.getDimensionPixelSize(attr,(int)TypedValue.applyDimension(        TypedValue.COMPLEX_UNIT_PX,30,getResources().getDisplayMetrics()));      break;     case R.styleable.CustomTitleView_mSpeed:      mSpeed = typearray.getInt(attr,100);// 默認(rèn)100      break;    }   }   Log.v("----",mSpeed+"");   typearray.recycle();   mPaint = new Paint();   new Thread()   {    public void run()    {     while (true)     {      mProgress++;      if (mProgress == 360)      {       mProgress = 0;       if (!isNext)        isNext = true;       else        isNext = false;      }      postInvalidate();      try      {       Thread.sleep(mSpeed);      } catch (InterruptedException e)      {       e.printStackTrace();      }     }    };   }.start();  }

3、直接重寫onDraw，這不需要重寫onMeasure

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){     super.onMeasure(widthMeasureSpec, heightMeasureSpec);  }  protected void onDraw(Canvas canvas)  {   /**   * 畫進(jìn)度百分比   */   mPaint.setStrokeWidth(0);   mPaint.setColor(Color.BLACK);   mPaint.setTextSize(textSize);   mPaint.setTypeface(Typeface.DEFAULT_BOLD); //設(shè)置字體   int percent = (int)(((float)mProgress / (float)360) * 100);   int centre = getWidth() / 2; // 獲取圓心的x坐標(biāo)   int radius = centre - mCircleWidth / 2;// 半徑   float textWidth = mPaint.measureText(percent + "%"); //測量字體寬度，我們需要根據(jù)字體的寬度設(shè)置在圓環(huán)中間   canvas.drawText(percent + "%",centre-textWidth/ 2,centre+textSize/2, mPaint); //畫出進(jìn)度百分比   mPaint.setStrokeWidth(mCircleWidth); // 設(shè)置圓環(huán)的寬度   mPaint.setAntiAlias(true); // 消除鋸齒   mPaint.setStyle(Paint.Style.STROKE); // 設(shè)置空心   RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定義的圓弧的形狀和大小的界限   if(isNext){    mPaint.setColor(mSecondColor); // 設(shè)置圓環(huán)的顏色    canvas.drawCircle(centre, centre, radius, mPaint); // 畫出圓環(huán)    mPaint.setColor(mFirstColor); // 設(shè)置圓環(huán)的顏色    canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根據(jù)進(jìn)度畫圓弧   }else{    mPaint.setColor(mFirstColor); // 設(shè)置圓環(huán)的顏色    canvas.drawCircle(centre, centre, radius, mPaint); // 畫出圓環(huán)    mPaint.setColor(mSecondColor); // 設(shè)置圓環(huán)的顏色    canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根據(jù)進(jìn)度畫圓弧   }  }

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:custom="http://schemas.android.com/apk/res-auto"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:padding="20dp"  >  <view.CustomTitleView   android:layout_width="200dp"   android:layout_height="400dp"   custom:mSpeed="50"   custom:mFirstColor="#7300e6"   custom:mSecondColor="#39ac39"   custom:mCircleWidth="10px"   custom:textSize="20px"   android:id="@+id/one"  />  <view.CustomTitleView   android:layout_toEndOf="@id/one"   android:layout_width="200dp"   android:layout_height="400dp"   custom:mSpeed="100"   custom:mFirstColor="#0040ff"   custom:mSecondColor="#40ff00"   custom:mCircleWidth="20px"   custom:textSize="30px"   /> </RelativeLayout>

效果預(yù)覽