@ZeroGeek 2015-08-18T02:29:47.000000Z 字数 4173 阅读 601

从Zero开始自定义View （二 )

view android

参考：
http://blog.csdn.net/guolin_blog/article/details/17357967 郭霖的View系列文章（1~4）
http://www.codekk.com/open-source-project-analysis/detail/Android/lightSky/%E5%85%AC%E5%85%B1%E6%8A%80%E6%9C%AF%E7%82%B9%E4%B9%8B%20View%20%E7%BB%98%E5%88%B6%E6%B5%81%E7%A8%8B View绘制流程的源码解析

Android是如何绘制View的？（建议先看上述系列文章）

如果不能理解这个，很难自己定义出无Bug的View.
每一个视图的绘制过程都必须经历三个最主要的阶段，即onMeasure()、onLayout()和onDraw()。
测量，确定位置，绘制。

1.1 onMeasure()

其内部调用View的measure()方法。
measure()方法接收两个参数，widthMeasureSpec和heightMeasureSpec，这两个值分别用于确定视图的宽度和高度的规格和大小。
measure()这个方法是final的，因此我们无法在子类中去重写这个方法，说明Android是不允许我们改变View的measure框架的。
MeasureSpec的值由specSize和specMode共同组成的，其中specSize记录的是大小，specMode记录的是规格。
说明父视图会在一定程度上决定子视图的大小。
根视图总是会充满全屏的。
一个界面的展示可能会涉及到很多次的measure，因为一个布局中一般都会包含多个子视图，每个视图都需要经历一次measure过程。ViewGroup中定义了一个measureChildren()方法来去测量子视图的大小。
onMeasure()方法是可以重写的，也就是说，如果你不想使用系统默认的测量方式，可以按照自己的意愿进行定制，比如：

public class MyView extends View {  
    ......  
    @Override  
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
        setMeasuredDimension(200, 200);  
    }  
}

这样的话就把View默认的测量流程覆盖掉了，不管在布局文件中定义MyView这个视图的大小是多少，最终在界面上显示的大小都将会是200*200。
需要注意的是，在setMeasuredDimension()方法调用之后，我们才能使用getMeasuredWidth()和getMeasuredHeight()来获取视图测量出的宽高，以此之前调用这两个方法得到的值都会是0。
由此可见，视图大小的控制是由父视图、布局文件、以及视图本身共同完成的，父视图会提供给子视图参考的大小，而开发人员可以在XML文件中指定视图的大小，然后视图本身会对最终的大小进行拍板。

1.2 onLayout()

这个方法是用于给视图进行布局的，也就是确定视图的位置.
getWidth()方法和getMeasureWidth()方法到底有什么区别呢？首先getMeasureWidth()方法在measure()过程结束后就可以获取到了，而getWidth()方法要在layout()过程结束后才能获取到。另外，getMeasureWidth()方法中的值是通过setMeasuredDimension()方法来进行设置的，而getWidth()方法中的值则是通过视图右边的坐标减去左边的坐标计算出来的。

1.3 onDraw()

对视图进行绘制。
View是不会帮我们绘制内容部分的，因此需要每个视图根据想要展示的内容来自行绘制.
重写onDraw()，绘制的方式主要是借助Canvas这个类，它会作为参数传入到onDraw()方法中，供给每个视图使用。

注意

OnMeasure()比较容易理解，对于刚入门来说，先好好学习onDraw（），Canvas和Paint的一些用法，一般不会用到onLayout（）。

2. 一起来写个小demo

package com.zero.apptest;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;
/**
 * 简易点赞计数器
 * Created by zero on 15-8-18.
 */
public class ClickCountView extends View implements View.OnClickListener{
    private Paint mPaint;  //画笔
    private Rect mBounds;  //用来包裹文本的矩形，计算中心，居中显示
    private static int mCount = 0; //统计点击的次数
    private boolean isClicked;  //判断点赞或取消
    public ClickCountView(Context context) {
        super(context);
        initView();
    }
    public ClickCountView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }
    public ClickCountView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }
    private void initView() {
        isClicked = false;
        setOnClickListener(this);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint = new Paint();
        mBounds = new Rect();
        mPaint.setColor(Color.parseColor("#1ABC9C"));
        canvas.drawCircle(100, 100, 100, mPaint);   //绘制坐标为（100，100）,半径为100的圆（第三参数为半径）
        mPaint.setTextSize(100);
        String text = String.valueOf(mCount);
        mPaint.getTextBounds(text, 0, text.length(), mBounds);
        mPaint.setColor(Color.parseColor("#7F8C8D"));
        final float textWidth = mBounds.width();
        final float textHeight = mBounds.height();
        //绘制文本，居中显示
        canvas.drawText(Integer.toString(mCount), getWidth()/2 - textWidth/2, getHeight()/2 + textHeight/2, mPaint);
    }
    /**
     *限制大小，无论xml中如何设置，都为200*200
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(200,200);
    }
    @Override
    public void onClick(View v) {
        if (!isClicked) {
            mCount++;
            isClicked = true;
        } else {
            mCount--;
            isClicked = false;
        }
        //每次点击后，重绘视图
        invalidate();
    }
}

main.xml 代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <com.zero.apptest.ClickCountView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />
    <com.zero.apptest.ClickCountView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />
    <com.zero.apptest.ClickCountView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />
    <com.zero.apptest.ClickCountView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />
</LinearLayout>

尝试运行下吧，哈哈，看看是否如下：
效果图