Android自定义View实现八卦图效果

需求搞完了 下午不想做新需求,中午没事看了下博客,发现别人写了一个太极的效果,我之前有想过,当时发现这个怎么实现,今天突然看到图有感觉了,于是关掉博客,自己想实现下,应该不是很难!分如下步骤

第一步：

画二个半圆一般是黑色 一般是白色,这个应该不难,看代码

package com.load.anim;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
/**
 * Created by admin on 2016/11/8.
 */
public class TaiJiView extends View {
    private int width = 360;
    private int height = 360;
    private int padding = 5;
    private Paint mPaint;
    private RectF mRectf;
    public TaiJiView(Context context) {
        this(context,null);
    }
    public TaiJiView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }
    public TaiJiView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }
    /**
     * 初始化画笔
     */
    private void initPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(5);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(width,height);
        mRectf = new RectF(0,0,width,width);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawCirCle(canvas);
    }
    /**
     * 画一个简单的圆
     * @param canvas
     */
    private void drawCirCle(Canvas canvas) {
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.WHITE);
        canvas.drawArc(mRectf,270,180,true,mPaint);
        mPaint.setColor(Color.BLACK);
        canvas.drawArc(mRectf,270,-180,true,mPaint);
    }
}

效果：

第二步：

先看一张图：

第二步应该是画这个图了,这个怎么画呢?其实也简单,看如下分析图

现在图分析出来了,写代码就简单了!如下：

private void drawHalfCirCle(Canvas canvas) {
    //画上面黑色半圆
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setColor(Color.BLACK);
    RectF blackHalfRect = new RectF(width/4,0,width/2+width/4,width/2);
    canvas.drawArc(blackHalfRect,270,180,true,mPaint);


    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setColor(Color.WHITE);
    RectF whiteHalfRect = new RectF(width/4,width/2,width/2+width/4,width);
    canvas.drawArc(whiteHalfRect,270,-180,true,mPaint);
}

效果：

第三步：

就是在刚才的分析的图中画二个很小的圆,就是八卦图中的阴阳二级,这个就更没啥难度了,直接写代码

/**
 * 绘制二个小圆点
 * @param canvas
 */
private void drawSmallCircle(Canvas canvas) {
       mPaint.setColor(Color.WHITE);
       mPaint.setStyle(Paint.Style.FILL);
       canvas.drawCircle(width/2,width/4,20,mPaint);

      mPaint.setColor(Color.BLACK);
      mPaint.setStyle(Paint.Style.FILL);
      canvas.drawCircle(width/2,width/4*3,20,mPaint);
}

效果图：

最后一步加上一个旋转动画而已,以这个圆的中心点为旋转点就ok了,最后把全部代码贴上来

package com.load.anim;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.LinearInterpolator;
import android.view.animation.RotateAnimation;

/**
 * Created by admin on 2016/11/8.
 */
public class TaiJiView extends View implements View.OnClickListener {
    private RotateAnimation rotateAnimation;
    private int width = 360;
    private int height = 360;
    private int padding = 5;
    private Paint mPaint;
    private RectF mRectf;
    private RectF blackHalfRect;
    private RectF whiteHalfRect;
    public TaiJiView(Context context) {
        this(context,null);
    }
    public TaiJiView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }
    public TaiJiView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
        initAnim();
        setOnClickListener(this);
    }
    /**
     * 初始化画笔
     */
    private void initPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(5);
    }
    private void initAnim() {
        //以view的中心点为旋转参考点
        rotateAnimation = new RotateAnimation(0f, 360f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnimation.setRepeatCount(-1);
        rotateAnimation.setFillAfter(false);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(width,height);
        mRectf = new RectF(0,0,width,width);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawCirCle(canvas);
        drawHalfCirCle(canvas);
        drawSmallCircle(canvas);
    }

    /**
     * 绘制二个小圆点
     * @param canvas
     */
    private void drawSmallCircle(Canvas canvas) {
           mPaint.setColor(Color.WHITE);
           mPaint.setStyle(Paint.Style.FILL);
           canvas.drawCircle(width/2,width/4,20,mPaint);

          mPaint.setColor(Color.BLACK);
          mPaint.setStyle(Paint.Style.FILL);
          canvas.drawCircle(width/2,width/4*3,20,mPaint);
    }

    /**
     * 绘制二个半圆 一个黑色 一个白色
     * @param canvas
     */
    private void drawHalfCirCle(Canvas canvas) {
        //画上面黑色半圆
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.BLACK);
        blackHalfRect = new RectF(width/4,0,width/2+width/4,width/2);
        canvas.drawArc(blackHalfRect,270,180,true,mPaint);


        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.WHITE);
        whiteHalfRect = new RectF(width/4,width/2,width/2+width/4,width);
        canvas.drawArc(whiteHalfRect,270,-180,true,mPaint);
    }
    /**
     * 画一个简单的圆
     * @param canvas
     */
    private void drawCirCle(Canvas canvas) {
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.WHITE);
        canvas.drawArc(mRectf,270,180,true,mPaint);
        mPaint.setColor(Color.BLACK);
        canvas.drawArc(mRectf,270,-180,true,mPaint);
    }
    @Override
    public void onClick(View view) {
        rotateAnimation.setDuration(1000);
        rotateAnimation.setInterpolator(new LinearInterpolator());//不停顿
        startAnimation(rotateAnimation);
    }
}

效果图：