布局中
首先創建一個項目 在創建一個類RoundProgress 繼承View
布局中定義控件 ：
這里引用了這行代碼
在 values文件夾下建一個xml
里面代碼：
···
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="RoundProgress">
<attr name="roundColor" format="color"></attr>
<attr name="roundProgressColor" format="color"></attr>
<attr name="textColor" format="color"></attr>
<attr name="roundWith" format="dimension"></attr>
<attr name="textSize" format="dimension"></attr>
<attr name="progress" format="integer"></attr>
<attr name="max" format="integer"></attr>
</declare-styleable>
</resources>
···
RoundProgress類中的具體代碼：
···
package com.atguigu.p2pinvest0828.ui;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import com.atguigu.p2pinvest0828.R;
import com.atguigu.p2pinvest0828.util.UIUtils;
/**
Created by shkstart on 2016/12/3 0003.
-
自定義視圖
*/
public class RoundProgress extends View {//設置繪制的圓環及文本的屬性---->使用自定義屬性替換
// private int roundColor = Color.GRAY;//圓環的顏色
// private int roundProgressColor = Color.RED;//圓弧的顏色
// private int textColor = Color.BLUE;//文本的顏色
//
// private int roundWidth = UIUtils.dp2px(10);//圓環的寬度
// private int textSize = UIUtils.dp2px(20);//文本的字體大小
//
// private int max = 100;//圓環的最大值
// private int progress = 60;//圓環的進度//使用自定義屬性來初始化如下的變量
private int roundColor;//圓環的顏色
private int roundProgressColor ;//圓弧的顏色
private int textColor;//文本的顏色private float roundWidth ;//圓環的寬度
private float textSize ;//文本的字體大小private int max;//圓環的最大值
private int progress;//圓環的進度private int width;//當前視圖的寬度（=高度）
private Paint paint;//畫筆
public RoundProgress(Context context) {
this(context, null);
}public RoundProgress(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}public RoundProgress(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);//初始化畫筆 paint = new Paint(); paint.setAntiAlias(true);//去除毛邊 //獲取自定義的屬性 //1.獲取TypeArray的對象(調用兩個參數的方法） TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundProgress); //2.取出所有的自定義屬性 roundColor = typedArray.getColor(R.styleable.RoundProgress_roundColor, Color.GRAY); roundProgressColor = typedArray.getColor(R.styleable.RoundProgress_roundProgressColor,Color.RED); textColor = typedArray.getColor(R.styleable.RoundProgress_textColor,Color.GREEN); roundWidth = typedArray.getDimension(R.styleable.RoundProgress_roundWith,UIUtils.dp2px(10)); textSize = typedArray.getDimension(R.styleable.RoundProgress_textSize,UIUtils.dp2px(20)); max = typedArray.getInteger(R.styleable.RoundProgress_max,100); progress = typedArray.getInteger(R.styleable.RoundProgress_progress,30); //3.回收處理 typedArray.recycle();}
public int getMax() {
return max;
}public void setMax(int max) {
this.max = max;
}public int getProgress() {
return progress;
}public void setProgress(int progress) {
this.progress = progress;
}//測量：獲取當前視圖寬高
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = this.getMeasuredWidth();
}//canvas:畫布，對應著視圖在布局中的范圍區間。范圍的左上頂點即為坐標原點
@Override
protected void onDraw(Canvas canvas) {
//1.繪制圓環
//獲取圓心坐標
int cx = width / 2;
int cy = width / 2;
float radius = width / 2 - roundWidth / 2;
paint.setColor(roundColor);//設置畫筆顏色
paint.setStyle(Paint.Style.STROKE);//設置圓環的樣式
paint.setStrokeWidth(roundWidth);//設置圓環的寬度
canvas.drawCircle(cx, cy, radius, paint);//2.繪制圓弧 RectF rectF = new RectF(roundWidth / 2, roundWidth / 2, width - roundWidth / 2, width - roundWidth / 2); paint.setColor(roundProgressColor);//設置畫筆顏色 canvas.drawArc(rectF,0,progress * 360 / max ,false,paint); //3.繪制文本 String text = progress * 100 / max + "%"; //設置paint paint.setColor(textColor); paint.setTextSize(textSize); paint.setStrokeWidth(0); Rect rect = new Rect();//創建了一個矩形，此時矩形沒有具體的寬度和高度 paint.getTextBounds(text,0,text.length(),rect);//此時的矩形的寬度和高度即為整好包裹文本的矩形的寬高 //獲取左下頂點的坐標 int x = width / 2 - rect.width() / 2; int y = width / 2 + rect.height() / 2; canvas.drawText(text,x,y,paint);}
}
···
效果圖：
