Android自定義View學習之畫太極圖

自定義控件是Android開發者必須掌握的知識，因爲開發中很多高級的UI特效都是自定義而來的，我們知道一個View顯示在界面上一般會經歷創建，測量，佈局，繪製，事件處理等生命週期方法，個人對自定義控件接觸的不多，所以也是在學習的初級階段，下面我們來繪製一個簡單的太極圖（實現代碼也是參考網上的，這裏加上自己的彙總分析下幾個方法的使用和具體的參數意義，從而加深對自定義UI的初步認識）

一、效果圖和分析

這個圖主要是由幾個圓和圓弧疊加在一起形成的，可以看成是左右兩個大半圓，上層兩個小圓覆蓋而成

二。代碼實現

drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

繪製圓弧（扇形，半圓，整個圓都可以用此方法）

oval：RectF類型，定義一個矩形對象，所繪製的圓弧（整個圓）的外接矩形

startAngle：繪製的開始角度，水平方向爲起點（x軸正方向），順時針方向角度逐漸增大

sweepAngle：繪製的圓弧的角度，180度爲半圓，360度爲一個圓

paint：畫筆對象，修改顏色，透明度，樣式，抗鋸齒，粗細等，和canvas一起使用

1.最外層圓弧

 RectF rect=new RectF();
        rect.left=getWidth()/2-getHeight()/2;
        rect.top=0;
        rect.right=getWidth()/2+getHeight()/2;
        rect.bottom=getHeight();

rect爲整個圓的繪製區域，getWidth，getHeight獲取的是當前自定義View在Layout。xml中聲明的寬和高，簡單理解就是View的寬和高，單位都爲像素，

//右邊黑半圓圓弧
 canvas.drawArc(rect, 270, 180, false, mPaintBlack);

2.上面小圓

drawCircle(float cx, float cy, float radius, Paint paint)

這裏換了個繪製方法，直接繪製一個圓，繪製圓的只需要確定一個圓心和一個半徑就好了

cx：圓心x的座標，以當前VIew的左上角爲原點

cy：圓心y的座標，以當前View的左上角爲原點

//上圓
 canvas.drawCircle(getWidth()/2,getHeight()/4,getHeight()/4,mPaintBlack);

3.圓心所在文字

drawText(String text, float x, float y, Paint paint)

繪製文字的方法就比較多了，當然知識點也就比較多了，這裏只使用了這一種，確定要繪製的文本，繪製的起點座標（很特殊，這裏指的是文本的左下角座標），畫筆

//上圓心文字
 canvas.drawText(mTopText,getWidth()/2,getHeight()/4,mPaintTextT);

好了每一個都給了一個示例，下面是全部代碼

package com.yufs.drawcircle;

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 yufs on 2017/5/17.
 */

public class CircleView extends View{
    private Paint mPaintWhite;
    private Paint mPaintBlack;
    private Paint mPaintTextT,mPaintTextB;
    private String mTopText="太";
    private String mBottomText="太極";
    private int mTextSize=35;

    public CircleView(Context context) {
        super(context);
        init();
    }

    public CircleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        //白色，抗鋸齒，實心畫筆
        mPaintWhite=new Paint();
        mPaintWhite.setColor(Color.WHITE);
        mPaintWhite.setAntiAlias(true);
        mPaintWhite.setStyle(Paint.Style.FILL_AND_STROKE);

        //黑色，抗鋸齒，實心畫筆
        mPaintBlack=new Paint();
        mPaintBlack.setColor(Color.BLACK);
        mPaintBlack.setAntiAlias(true);
        mPaintBlack.setStyle(Paint.Style.FILL_AND_STROKE);

        mPaintTextT=new Paint();
        mPaintTextT.setColor(Color.WHITE);
        mPaintTextT.setTextAlign(Paint.Align.CENTER);//文字居中，默認是左邊開始繪製
        mPaintTextT.setAntiAlias(true);
        mPaintTextT.setTextSize(mTextSize);

        mPaintTextB=new Paint();
        mPaintTextB.setTextAlign(Paint.Align.CENTER);//文字居中，默認是左邊開始繪製
        mPaintTextB.setColor(Color.BLACK);
        mPaintTextB.setAntiAlias(true);
        mPaintTextB.setTextSize(mTextSize);

    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //最外層圓弧的外截矩形(與圓的一樣爲正方形)，此時圓弧的半徑對應的是View的height/2
        RectF rect=new RectF();
        rect.left=getWidth()/2-getHeight()/2;
        rect.top=0;
        rect.right=getWidth()/2+getHeight()/2;
        rect.bottom=getHeight();
        //右邊黑半圓圓弧
        canvas.drawArc(rect, 270, 180, false, mPaintBlack);
        //左邊白半圓圓弧
        canvas.drawArc(rect,90,180,false,mPaintWhite);

        //上圓
        canvas.drawCircle(getWidth()/2,getHeight()/4,getHeight()/4,mPaintBlack);

        //下圓
        canvas.drawCircle(getWidth()/2,getHeight()*3/4,getHeight()/4,mPaintWhite);

        //上圓心文字
        canvas.drawText(mTopText,getWidth()/2,getHeight()/4,mPaintTextT);


        //下圓心文字
        canvas.drawText(mBottomText,getWidth()/2,getHeight()*3/4,mPaintTextB);

        //下圓
        canvas.drawCircle(getWidth()/2,getHeight()*3/4,5,mPaintBlack);
    }

xml中使用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.yufs.drawcircle.MainActivity">

    <com.yufs.drawcircle.CircleView
        android:layout_marginTop="120dp"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:background="#a9a1a0"/>
</RelativeLayout>

end