爲了增強對自定義 View 的認知以及開發能力,我計劃這段時間陸續來完成幾個難度從易到難的自定義 View,並簡單的寫幾篇博客來進行介紹,全部的代碼也都會開源,也但願讀者能給個 star 哈 GitHub 地址:github.com/leavesC/Cus… 也能夠下載 Apk 來體驗下:www.pgyer.com/CustomViewjava
先看下效果圖:git
繪製太極 View 的步驟分爲如下幾步:github
繪製過程仍是蠻簡單的,總的代碼也就一百行左右canvas
/** * 做者:leavesC * 時間:2019/4/26 9:29 * 描述: */
public class TaiJiView extends BaseView {
private Paint paint;
public TaiJiView(Context context) {
this(context, null);
}
public TaiJiView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public TaiJiView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaint();
}
private void initPaint() {
paint = new Paint();
paint.setAntiAlias(true);
paint.setDither(true);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = getSize(widthMeasureSpec, getResources().getDisplayMetrics().widthPixels);
int height = getSize(heightMeasureSpec, getResources().getDisplayMetrics().heightPixels);
width = height = Math.min(width, height);
setMeasuredDimension(width, height);
}
private float radius;
private float centerX;
private float centerY;
private float degrees;
@Override
protected void onSizeChanged(int w, int h, int oldW, int oldH) {
w = w - getPaddingLeft() - getPaddingRight();
h = h - getPaddingTop() - getPaddingBottom();
w = Math.min(w, h);
radius = w / 2f;
centerX = getPaddingLeft() + radius;
centerY = getPaddingTop() + radius;
}
private RectF rectF = new RectF();
@Override
protected void onDraw(Canvas canvas) {
//稍稍留一點間距
float realRadius = radius - 8;
float temp1 = realRadius / 2f;
float temp2 = temp1 / 8f;
canvas.translate(centerX, centerY);
canvas.rotate(degrees);
//繪製邊框
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(0.4f);
canvas.drawCircle(0, 0, realRadius, paint);
//繪製左右半圓
rectF.set(-realRadius, -realRadius, realRadius, realRadius);
paint.setStyle(Paint.Style.FILL);
paint.setStrokeWidth(0);
paint.setColor(Color.BLACK);
canvas.drawArc(rectF, 90, 180, true, paint);
paint.setColor(Color.WHITE);
canvas.drawArc(rectF, -90, 180, true, paint);
//繪製上邊的白色圓
canvas.save();
canvas.translate(0, -temp1);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.FILL);
paint.setStrokeWidth(1);
canvas.drawCircle(0, 0, temp1, paint);
paint.setColor(Color.BLACK);
canvas.drawCircle(0, 0, temp2, paint);
canvas.restore();
//繪製上邊的黑色圓
canvas.save();
canvas.translate(0, temp1);
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.FILL);
canvas.drawCircle(0, 0, temp1, paint);
paint.setColor(Color.WHITE);
canvas.drawCircle(0, 0, temp2, paint);
canvas.restore();
}
public float getDegrees() {
return degrees;
}
public void setDegrees(float degrees) {
this.degrees = degrees;
postInvalidate();
}
}
複製代碼