Android自定义控件练手——简单的时钟

    首先这应该是一个老生常谈的设计了，但是毕竟身为小白的自己都没动手做过，不动手怎么提高自己呢，所以在这梅林沉船闲暇之际，我就把我的设计流程与思路记录下来。首先来看看效果图吧：

    如上图就是一个简单并没有美化过的时钟，接下来我就来讲讲我的设计流程与思路。

一.首先继承view重写里面的onDraw方法。

    我们要搭建好了画布才能开始在里面画画，而onDraw方法中的canvas当然就是起到画布的作用。

 1 public class MyClockView extends View {
 2 
 3     public MyClockView(Context context) {
 4         super(context);
 5         init();//初始化的方法
 6     }
 7 
 8     public MyClockView(Context context, AttributeSet attrs) {
 9         super(context, attrs);
10         init();
11     }
12 
13     public MyClockView(Context context, AttributeSet attrs, int defStyleAttr) {
14         super(context, attrs, defStyleAttr);
15         init();
16     }
17 
18     public void init() {
19     
20     }
21 
22     @Override
23     protected void onDraw(Canvas canvas) {
24         super.onDraw(canvas);
25     }
26 
27 }

二.准备需要用到的工具。

    要画一个时钟当然首先得要有笔才行，第一步上面我们得到了画布，现在我们还需要一个paint的画笔。似乎绘图用的工具就这么多了，一张画布，一支笔，那么让我们想想还需要用到些什么变量，我就先把时钟结构拆分成了，时、分、秒针，一个圆圈框和时钟的刻度与数字，但是这些能代表些什么deep♂dark♂fantastic的呢，再让我们想想这里一般绘图当然要和坐标挂钩，那就都变成二维坐标吧，时分秒针都是直线，就是画线，圆框就是画圆要知道圆心与半径，刻度也是画线，数字就是写字，拆分为了，时分秒针两端的坐标，圆心与半径，刻度两端的坐标，数字绘制开始的坐标。

三.坐标绘制的算法分析。

    我们应该是都知道要想根据坐标绘制就要先知道它的原点在哪，一般默认情况下它的原点定在屏幕左上角，并且y轴下半部为正半轴，上半部为负半轴。如图：

 

   根据上面图的坐标系，我们现在要画一个圆形，里面再画刻度，再画时分秒针，首先我们要确定圆心在哪，我按照习惯以控件长宽最短的一边为直径来定圆心的坐标，我在刚才继承view之后重写onSizeChanged方法(这个方法是当宽高放生变化和第一次会执行)做获取半径长：

 1 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
 2         mWidth = w;//获得宽度
 3         mHeight = h;//获得高度
 4 
 5         //以最短的一边为所要绘制圆形的直径
 6         if (mWidth > mHeight) {
 7             arcRa = mHeight / 2;//以最短的一边算出半径
 8         } else {
 9             arcRa = mWidth / 2;//以最短的一边算出半径
10         }
11         super.onSizeChanged(w, h, oldw, oldh);
12     }

   这样在默认坐标系中，圆心坐标即为(arcRa,arcRa),这里我用arcRa代表半径。有了圆心和半径，那就可以顺利的用canvas.drawCircle画出一个圆。接下来我们要构思画刻度，刻度说白了就是把一个从圆心来等分，一个圆一圈是360度，也就是说把360度等分了，分多少呢，60秒等于1分钟，60分钟等于1小时，那就分60份咯，但是时钟有长短刻度，小刻度是分成60份了，那代表小时的长刻度怎么分，转一圈是12小时，那就分成12份。