仿太极图自定义view

前因

鉴于各种原因，一致认为一个优雅的程序猿是从开始写博客成长起来的，虽然我很菜，但我有自知之明啊~~~公司项目最近两天即将上线，所以最近有点时间去整理下最近几天的收货，今天写了一个自定义view，一个很简单很简单的view，而且是一个然并卵的view~~~~

Github: https://github.com/icuihai

微博 :   http://weibo.com/icuihai

邮箱：   icuihai@aliyun.com;

后果

1，自定义view呢一般分为三种，一是继承现有控件，可以增加其功能，二是组合控件，比如说我们可以让一个组合空间既能有textview的效果，又有togglebutton的效果，第三种则是用的比较多，稍微有点复杂的继承view或者viewgroup容器实现手绘控件的目的。好了，废话不多说，先看下今天我做的这个小Demo的效果吧~~

[java]  view plain  copy

1. <span style="font-size:14px;">public class Taiji extends View {  
2.     private Paint whitePaint;   //白色画笔  
3.     private Paint blackPaint;   //黑色画笔  
4.   
5.     public Taiji(Context context) {  
6.         this(context, null);  
7.     }  
8.   
9.     public Taiji(Context context, AttributeSet attrs) {  
10.         this(context, attrs, 0);  
11.     }  
12.   
13.     public Taiji(Context context, AttributeSet attrs, int defStyleAttr) {  
14.         super(context, attrs, defStyleAttr);  
15.         initPaints();  
16.     }  
17.   
18.     private void initPaints() {  
19.         whitePaint = new Paint();//初始化画笔对象  
20.         whitePaint.setAntiAlias(true);//优化  
21.         whitePaint.setColor(Color.WHITE);//白色画笔背景颜色  
22.   
23.         blackPaint = new Paint(whitePaint);  
24.         blackPaint.setColor(Color.BLACK);  
25.     }  
26.   
27.     @Override  
28.     protected void onDraw(Canvas canvas) {  
29.         super.onDraw(canvas);  
30.         int width = canvas.getWidth();//画布的宽度  
31.         int height = canvas.getHeight();//画布的高度  
32.   
33.         canvas.translate(width/2, height/2);    // 移动坐标原点到画布中心  
34.   
35.         canvas.drawColor(Color.RED);//绘制背景色  
36.         canvas.rotate(degrees);  
37.   
38.         int radius = Math.min(width, height) / 2 - 100;                //太极半径  
39.         RectF rect = new RectF(-radius, -radius, radius, radius);   //绘制区域  
40.         canvas.drawArc(rect, 90, 180, true, blackPaint);            //绘制黑色半圆  
41.         canvas.drawArc(rect, -90, 180, true, whitePaint);  
42.         //绘制两个小圆  
43.         int smallRadius = radius / 2;                                //小圆半径为大圆的一半  
44.         canvas.drawCircle(0, -smallRadius, smallRadius, blackPaint);  
45.         canvas.drawCircle(0, smallRadius, smallRadius, whitePaint);  
46.   
47.         //绘制鱼眼（两个更小的圆）  
48.         canvas.drawCircle(0, -smallRadius, smallRadius / 4, whitePaint);  
49.         canvas.drawCircle(0, smallRadius, smallRadius / 4, blackPaint);//绘制白色半圆  
50.     }  
51.   
52.     private float degrees = 0;                  //旋转角度  
53.   
54.     public void setRotate(float degrees) {  
55.         this.degrees = degrees;  
56.         invalidate();                           //重绘界面  
57.     }  
58. }</span>  

手绘控件重难点就是对坐标要做到精确，逻辑清楚，要知道控件上所有的点都是通过onDraw()方法画出来的

2,在布局文件中引用

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:tools="http://schemas.android.com/tools"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     tools:context="com.cuihai.customviewtaiji.MainActivity">  
7.   
8.     <com.cuihai.customviewtaiji.view.Taiji  
9.         android:id="@+id/custom"  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content" />  
12. </RelativeLayout>  

3，由于本次操作比较简单所以main函数里面基本无需改动，