1.自定義 View 的基本流程
- 創(chuàng)建 View Class
- 創(chuàng)建 attr 屬性文件型宝，確定屬性
- View Class 綁定 attr 屬性
- onMeasure 測(cè)量
- onDraw 繪制
1.1 創(chuàng)建 View Class
public class ArcView extends View {
public ArcView(Context context) {
this(context, null);
}
public ArcView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public ArcView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
}
1.2 創(chuàng)建 attr 屬性
<declare-styleable name="ArcView">
<!--內(nèi)環(huán)顏色-->
<attr name="arcInnerColor" format="color" />
<!--外環(huán)顏色-->
<attr name="arcOutColor" format="color" />
<!--環(huán)大小-->
<attr name="arcWidth" format="dimension" />
<!--文字-->
<attr name="arcText" format="string" />
<!--文字大小-->
<attr name="arcTextSize" format="dimension" />
<!--文字顏色-->
<attr name="arcTextColor" format="color" />
</declare-styleable>
1.3 綁定屬性
private void initAttr(Context context, AttributeSet attrs) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ArcView);
//外環(huán)顏色
mInnerColor = array.getColor(R.styleable.ArcView_arcInnerColor, mInnerColor);
//內(nèi)環(huán)顏色
mOutColor = array.getColor(R.styleable.ArcView_arcOutColor, mOutColor);
//環(huán)大小
mWidth = (int) array.getDimension(R.styleable.ArcView_arcWidth, mWidth);
//文字
mText = array.getString(R.styleable.ArcView_arcText);
//文字大小
mTextSize = array.getDimensionPixelSize(R.styleable.ArcView_arcTextSize, mTextSize);
//文字顏色
mTextColor = array.getColor(R.styleable.ArcView_arcTextColor, mTextColor);
array.recycle();
}
1.4 onMeasure
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//確保正方形荤懂，將短邊的大小設(shè)為狂傲
//寬
int width = MeasureSpec.getSize(widthMeasureSpec);
//高
int height = MeasureSpec.getSize(heightMeasureSpec);
//設(shè)置寬高
setMeasuredDimension(Math.min(width, height), Math.min(width, height));
}
1.5 onDraw
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
- 第一步，畫內(nèi)環(huán)
private void initInnerPaint() {
mInnerPaint = new Paint();
//抗鋸齒
mInnerPaint.setAntiAlias(true);
//防抖動(dòng)
mInnerPaint.setDither(true);
//寬度
mInnerPaint.setStrokeWidth(mWidth);
//顏色
mInnerPaint.setColor(mInnerColor);
//設(shè)置狀態(tài)
mInnerPaint.setStyle(Paint.Style.STROKE);
//頭部小圓點(diǎn)
mInnerPaint.setStrokeCap(Paint.Cap.ROUND);
}
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//畫內(nèi)環(huán)
RectF rectF = new RectF(mWidth / 2, mWidth / 2, getWidth() - mWidth / 2, getHeight() - mWidth / 2);
canvas.drawArc(rectF, 135, 270, false, mInnerPaint);
}
內(nèi)環(huán)
- 第二步韩脏，畫外環(huán)
private void initOutPaint() {
mOutPaint = new Paint();
//抗鋸齒
mOutPaint.setAntiAlias(true);
//防抖動(dòng)
mOutPaint.setDither(true);
//寬度
mOutPaint.setStrokeWidth(mWidth);
//顏色
mOutPaint.setColor(mOutColor);
//設(shè)置狀態(tài)
mOutPaint.setStyle(Paint.Style.STROKE);
//頭部小圓點(diǎn)
mOutPaint.setStrokeCap(Paint.Cap.ROUND);
}
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//畫內(nèi)環(huán)
RectF rectF = new RectF(mWidth / 2, mWidth / 2, getWidth() - mWidth / 2, getHeight() - mWidth / 2);
canvas.drawArc(rectF, 135, 270, false, mInnerPaint);
//畫內(nèi)環(huán)
if (MaxProgress == 0) return;
float sweepAngle = (float) CurrentProgress / MaxProgress;
canvas.drawArc(rectF, 135, sweepAngle * 270, false, mOutPaint);
}
外環(huán)
- 第三步赵抢，畫文字
private void initTextPaint() {
mTextPaint = new Paint();
//抗鋸齒
mTextPaint.setAntiAlias(true);
//文字大小
mTextPaint.setTextSize(mTextSize);
//文字顏色
mTextPaint.setColor(mTextColor);
}
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//畫內(nèi)環(huán)
RectF rectF = new RectF(mWidth / 2, mWidth / 2, getWidth() - mWidth / 2, getHeight() - mWidth / 2);
canvas.drawArc(rectF, 135, 270, false, mInnerPaint);
//畫內(nèi)環(huán)
if (MaxProgress == 0) return;
float sweepAngle = (float) CurrentProgress / MaxProgress;
canvas.drawArc(rectF, 135, sweepAngle * 270, false, mOutPaint);
//畫文字
//測(cè)量文字寬度
Rect rect = new Rect();
mTextPaint.getTextBounds(mText, 0, mText.length(), rect);
int x = getWidth() / 2 - rect.width() / 2;
//基線
Paint.FontMetricsInt fontMetricsInt = mTextPaint.getFontMetricsInt();
int y = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom;
int baseline = getHeight() / 2 + y;
canvas.drawText(mText, x, baseline, mTextPaint);
}
最終效果圖
