自定义View合辑（4）-太极-白红宇

为了加强对自定义 View 的认知以及开发能力，我计划这段时间陆续来完成几个难度从易到难的自定义 View，并简单的写几篇博客来进行介绍，所有的代码也都会开源，也希望读者能给个 star 哈 GitHub 地址：也可以下载 Apk 来体验下：

先看下效果图：

一、思路描述

绘制太极 View 的步骤分为以下几步：

绘制一个半径为 radius 的空心圆

将上半圆填充为黑色，下半圆填充为白色

在穿过圆心的平行线上，绘制两个填充色分别为黑白色，半径为 radius/2 的圆

在两个小圆的圆心上再绘制两个相反颜色，半径更小的小圆

绘制过程还是蛮简单的，总的代码也就一百行左右

二、源码

/** * 作者：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();    }}复制代码