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