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的宽和高，单位都为像素，

 

 

 

 

<strong>//右边黑半圆圆弧
 canvas.drawArc(rect, 270, 180, false, mPaintBlack);</strong>

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)

绘制文字的方法就比较多了，当然知识点也就比较多了，这里只使用了这一种，确定要绘制的文本，绘制的起点坐标（很特殊，这里指的是文本的左下角坐标），画笔

 

 

<strong>//上圆心文字
 canvas.drawText(mTopText,getWidth()/2,getHeight()/4,mPaintTextT);</strong>

好了每一个都给了一个示例，下面是全部代码

 

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