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

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

先看下效果图：

一、思路描述

绘制太极 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();
    }

}

复制代码

转载于:https://juejin.im/post/5cceea29e51d453a3a0acb53