先看效果圖。

具體實現程式碼如下：

/**
 * LangK
 * */
public class RingView extends TextView{

	public RingView(Context context) {
		super(context);
	}

	public RingView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	public RingView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}

	
	/**
	 * 環的顏色
	 * */
	private final static int RingColor = Color.parseColor("#00C2C4");
	
	/**
	 * 進度的顏色
	 * */
	private final static int PecentColor = Color.GREEN;
	
	/**
	 * 畫筆
	 */
	private Paint paint;
	/**
	 * 是否第一次
	 */
	private boolean init = false;
	/**
	 * 背景
	 */
	private static final int BackGround = Color.parseColor("#FF0000");
	/**
	 * 已經完成的顏色
	 */
	private static final int CircleColor = Color.YELLOW;

	/**
	 * 完成扇形角度
	 */
	private static final float startAngle = 270;
	/**
	 * 扇形中心點X軸
	 */
	private float content_X;
	/**
	 * 扇形中心點Y軸
	 */
	private float content_Y;
	/**
	 * 環形外半徑
	 */
	private float bigRadius;
	/**
	 * 環形內半徑
	 */
	private float smallRadius;
	/**
	 * 預設終點角度
	 */
	private float SweepAngle = 270;
	/**
	 * 控制元件寬
	 */
	private int width;
	/**
	 * 控制元件高
	 */
	private int height;
	/**
	 * 檔案顯示的文字
	 */
	private String text;
	private static final int TEXTSIZE = 25;

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

	private void initPaint() {
		setPadding(0, 0, 0, 0);
		paint = new Paint();
		paint.setStyle(Style.FILL);
		paint.setAntiAlias(true);
		paint.setColor(RingColor);//ring的顏色
		width = getMeasuredWidth();
		height = getMeasuredHeight();
		bigRadius = ((float) width / 2);
		smallRadius = (float) width / 3;
		content_X = (float) width / 2;
		content_Y = (float) height / 2;
		init = true;
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		paint.setColor(RingColor);//ring的顏色
		Path path = new Path();
		path.reset();
		/*畫圓*/
		path.addCircle(content_X, content_Y, bigRadius -3 , Path.Direction.CCW);
		path.close();
		canvas.drawPath(path, paint);
		path.reset();
		paint.setColor(Color.WHITE);
		path.addCircle(content_X, content_Y, smallRadius, Path.Direction.CCW);
		path.close();
		canvas.drawPath(path, paint);
		getSectorClip(canvas,startAngle);
		path.reset();
		paint.setColor(Color.WHITE);
		path.addCircle(content_X, content_Y, smallRadius-3, Path.Direction.CCW);
		path.close();
		canvas.drawPath(path, paint);
		if (text!=null) {
			paint.setColor(Color.GREEN);
			paint.setFakeBoldText(true);
			paint.setTextSize(TEXTSIZE);
			canvas.drawText(text,width/4,height/2, paint);
		}
	}
	/**
	 * 返回一個扇形的剪裁區
	 * 
	 * @param canvas
	 *            //畫筆
	 * @param startAngle
	 *            //起始角度
	 */
	private void getSectorClip(Canvas canvas,float startAngle) {
		paint.setColor(PecentColor);//進度的顏色
		Path path = new Path();
		// 下面是獲得一個三角形的剪裁區
		path.moveTo(content_X, content_Y); // 圓心
		path.lineTo(
				(float) (content_X + bigRadius * Math.cos(startAngle * Math.PI / 180)), // 起始點角度在圓上對應的橫座標

				(float) (content_Y + bigRadius * Math.sin(startAngle * Math.PI / 180))); // 起始點角度在圓上對應的縱座標
		path.lineTo(
				(float) (content_X + bigRadius * Math.cos(SweepAngle * Math.PI / 180)), // 終點角度在圓上對應的橫座標

				(float) (content_Y + bigRadius * Math.sin(SweepAngle * Math.PI / 180))); // 終點點角度在圓上對應的縱座標
		path.close();
		// //設定一個正方形，內切圓
		RectF rectF = new RectF(content_X - bigRadius, content_Y - bigRadius, content_X + bigRadius,
				content_Y + bigRadius);
		// 下面是獲得弧形剪裁區的方法
		path.addArc(rectF, startAngle, SweepAngle - startAngle);
		canvas.drawPath(path,paint);
		
		
	}
	
	/**
	 * 返回一個扇形的剪裁區
	 * 
	 * @param canvas
	 *            //畫筆
	 * @param startAngle
	 *            //起始角度
	 */
	private void getSmallSectorClip(Canvas canvas,float startAngle) {
		paint.setColor(Color.WHITE);
		Path path = new Path();
		// 下面是獲得一個三角形的剪裁區
		path.moveTo(content_X, content_Y); // 圓心
		path.lineTo(
				(float) (content_X + smallRadius * Math.cos(startAngle * Math.PI / 180)), // 起始點角度在圓上對應的橫座標

				(float) (content_Y + smallRadius * Math.sin(startAngle * Math.PI / 180))); // 起始點角度在圓上對應的縱座標
		path.lineTo(
				(float) (content_X + smallRadius * Math.cos(SweepAngle * Math.PI / 180)), // 終點角度在圓上對應的橫座標

				(float) (content_Y + smallRadius * Math.sin(SweepAngle * Math.PI / 180))); // 終點點角度在圓上對應的縱座標
		path.close();
		// //設定一個正方形，內切圓
		RectF rectF = new RectF(content_X - smallRadius, content_Y - smallRadius, content_X + smallRadius,
				content_Y + smallRadius);
		// 下面是獲得弧形剪裁區的方法
		path.addArc(rectF, startAngle, SweepAngle - startAngle);
		canvas.drawPath(path,paint);
		
		
	}
	
	/**
	 * @param startAngle百分比
	 */
	public void setAngle(float startAngle){
		SweepAngle = (360*startAngle/100 + 270); 
	}
	
	public void setText(String text){
		this.text = text;
	}
}