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