<?xml version="1.0" encoding="utf-8"?>
<resources>
 //自定義屬性名,定義公共屬性
 <attr name="titleSize" format="dimension"></attr>
 <attr name="titleColor" format="color"></attr>
 <attr name="outCircleColor" format="color"></attr>
 <attr name="inCircleColor" format="color"></attr>
 <attr name="lineColor" format="color"></attr>

 //自定義控件的主題樣式
 <declare-styleable name="MySportView">
  <attr name="titleSize"></attr>
  <attr name="titleColor"></attr>
  <attr name="outCircleColor"></attr>
  <attr name="inCircleColor"></attr>
 </declare-styleable>
</resources>

    <com.example.tangyangkai.myview.MySportView
    android:id="@+id/sport_view"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_margin="20dp"
    app:inCircleColor="@color/strong"
    app:outCircleColor="@color/colorAccent"
    app:titleColor="@color/colorPrimary"
    app:titleSize="50dp" />

/**
 * Created by tangyangkai on 16/5/23.
 */
public class MySportView extends View {


 private String text;
 private int textColor;
 private int textSize;
 private int outCircleColor;
 private int inCircleColor;
 private Paint mPaint, circlePaint;
 //繪制文本的范圍
 private Rect mBound;
 private RectF circleRect;
 private float mCurrentAngle;
 private float mStartSweepValue;
 private int mCurrentPercent, mTargetPercent;

 public MySportView(Context context) {
  this(context, null);
 }

 public MySportView(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }

 public MySportView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);


  //獲取我們自定義的樣式屬性
  TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MySportView, defStyleAttr, 0);
  int n = array.getIndexCount();
  for (int i = 0; i < n; i++) {
   int attr = array.getIndex(i);
   switch (attr) {
    case R.styleable.MySportView_titleColor:
     // 默認(rèn)顏色設(shè)置為黑色
     textColor = array.getColor(attr, Color.BLACK);
     break;
    case R.styleable.MySportView_titleSize:
     // 默認(rèn)設(shè)置為16sp，TypeValue也可以把sp轉(zhuǎn)化為px
     textSize = array.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
       TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
     break;
    case R.styleable.MySportView_outCircleColor:
     // 默認(rèn)顏色設(shè)置為黑色
     outCircleColor = array.getColor(attr, Color.BLACK);
     break;
    case R.styleable.MySportView_inCircleColor:
     // 默認(rèn)顏色設(shè)置為黑色
     inCircleColor = array.getColor(attr, Color.BLACK);
     break;

   }

  }
  array.recycle();
  init();

 }

 //初始化
 private void init() {
  //創(chuàng)建畫(huà)筆
  mPaint = new Paint();
  circlePaint = new Paint();
  //設(shè)置是否抗鋸齒
  mPaint.setAntiAlias(true);
  //圓環(huán)開(kāi)始角度 (-90° 為12點(diǎn)鐘方向)
  mStartSweepValue = -90;
  //當(dāng)前角度
  mCurrentAngle = 0;
  //當(dāng)前百分比
  mCurrentPercent = 0;
  //繪制文本的范圍
  mBound = new Rect();
 }

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

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//如果布局里面設(shè)置的是固定值,這里取布局里面的固定值和父布局大小值中的最小值;如果設(shè)置的是match_parent,則取父布局的大小
  int widthMode = MeasureSpec.getMode(widthMeasureSpec);
  int widthSize = MeasureSpec.getSize(widthMeasureSpec);
  int heightMode = MeasureSpec.getMode(heightMeasureSpec);
  int heightSize = MeasureSpec.getSize(heightMeasureSpec);
  int width;
  int height;
  if (widthMode == MeasureSpec.EXACTLY) {
   width = widthSize;
  } else {
   mPaint.setTextSize(textSize);
   mPaint.getTextBounds(text, 0, text.length(), mBound);
   float textWidth = mBound.width();
   int desired = (int) (getPaddingLeft() + textWidth + getPaddingRight());
   width = desired;
  }

  if (heightMode == MeasureSpec.EXACTLY) {
   height = heightSize;
  } else {
   mPaint.setTextSize(textSize);
   mPaint.getTextBounds(text, 0, text.length(), mBound);
   float textHeight = mBound.height();
   int desired = (int) (getPaddingTop() + textHeight + getPaddingBottom());
   height = desired;
  }
  //調(diào)用父類(lèi)方法,把View的大小告訴父布局。
  setMeasuredDimension(width, height);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  //設(shè)置外圓的顏色
  mPaint.setColor(outCircleColor);
  //設(shè)置外圓為空心
  mPaint.setStyle(Paint.Style.STROKE);
  //畫(huà)外圓
  canvas.drawCircle(getWidth() / 2, getWidth() / 2, getWidth() / 2, mPaint);
  //設(shè)置字體顏色
  mPaint.setColor(textColor);
  //設(shè)置字體大小
  mPaint.setTextSize(textSize);
  //得到字體的寬高范圍
  text = String.valueOf(mCurrentPercent);
  mPaint.getTextBounds(text, 0, text.length(), mBound);
  //繪制字體
  canvas.drawText(text, getWidth() / 2 - mBound.width() / 2, getWidth() / 2 + mBound.height() / 2, mPaint);

  //設(shè)置字體大小
  mPaint.setTextSize(textSize / 3);
  //繪制字體
  canvas.drawText("分", getWidth() * 3 / 4, getWidth() / 3, mPaint);

  circlePaint.setAntiAlias(true);
  circlePaint.setStyle(Paint.Style.STROKE);
  //設(shè)置圓弧的寬度
  circlePaint.setStrokeWidth(10);
  //設(shè)置圓弧的顏色
  circlePaint.setColor(inCircleColor);
  //圓弧范圍
  circleRect = new RectF(20, 20, getWidth() - 20, getWidth() - 20);
  //繪制圓弧
  canvas.drawArc(circleRect, mStartSweepValue, mCurrentAngle, false, circlePaint);
  //判斷當(dāng)前百分比是否小于設(shè)置目標(biāo)的百分比
  if (mCurrentPercent < mTargetPercent) {
   //當(dāng)前百分比+1
   mCurrentPercent += 1;
   //當(dāng)前角度+360
   mCurrentAngle += 3.6;
   //每100ms重畫(huà)一次
   postInvalidateDelayed(100);
  }
 }