1. 程式人生 > >android 自定義view實現太極圖效果

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);
}
}
效果圖: