为什么我们觉得自定义View是学习Android的一道坎？ 为什么那么多Android大神却认为自定义View又是如此的简单？ 为什么google随便定义一个View都是上千行的代码？ 以上这些问题，相信学Android的同学或多或少都有过这样的疑问。 那么，看完此文，希望对你们的疑惑有所帮助。
回到主题，自定义View ，需要掌握的几个点是什么呢？ 我们先把自定义View细分一下，分为两种 1） 自定义ViewGroup 2） 自定义View
其实ViewGroup最终还是继承之View，当然它内部做了许多操作；继承之ViewGroup的View我们一般称之为容器，而今天我们不讲这方面，后续有机会再讲。 来看看自定义View 需要掌握的几点，主要就是两点
一、重写 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {}方法。 二、重写 protected void onDraw(Canvas canvas) {}方法
空讲理论很难理解，我们还得用例子来说明，记得我前面来写了一篇 Android 微信6.1 tab栏图标和字体颜色渐变的实现 的博客，里面tab的每个item就是通过自定义View来实现的，那么接下来就通过此例子来说明问题。
我们可以把View理解为一张白纸，而自定义View就是在这张白纸上画上我们自己绘制的图案，可以在绘制任何图案，也可以在白纸的任何位置绘制，那么问题来了，白纸哪里来？图案哪里来？位置如何计算？
a）白纸好说，只要我们继承之View，在onDraw(Canvas canvas)中的canvas就是我们所说的白纸
/** * Created by moon.zhong on 2015/2/13. */{public CustomView(Context context) {super(context);}public CustomView(Context context, AttributeSet attrs) {super(context, attrs);}public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}(Canvas canvas) {// canvas 即为白纸super.onDraw(canvas);}}
b）图案呢？这里的图案就是有图片和文字组成，这个也好说，定义一个Bitmap 成员变量，和一个String的成员变量
private Bitmap mBitmap ;private String mName ;mName = “这里直接赋值”;mBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ic_launcher) ;
图片可以通过资源文件可以拿到。
c）计算位置 所以最核心的也是我们认为最麻烦的地方就是计算绘制的位置，计算位置就得先测量自身的大小，也就是我们必须掌握的两点中的第一点：需要重写 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {}方法 先来看一下google写的TextView的onMeasure（）方法是如何实现的
@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int widthMode = MeasureSpec.getMode(widthMeasureSpec);int heightMode = MeasureSpec.getMode(heightMeasureSpec);int widthSize = MeasureSpec.getSize(widthMeasureSpec);int heightSize = MeasureSpec.getSize(heightMeasureSpec);int width;int height;BoringLayout.Metrics boring = UNKNOWN_BORING;BoringLayout.Metrics hintBoring = UNKNOWN_BORING;if (mTextDir == null) {mTextDir = getTextDirectionHeuristic();}int des = -1;boolean fromexisting = false;if (widthMode == MeasureSpec.EXACTLY) {// Parent has told us how big to be. So be it.width = widthSize;} else {if (mLayout != null && mEllipsize == null) {des = desired(mLayout);}if (des < 0) {boring = BoringLayout.isBoring(mTransformed, mTextPaint, mTextDir, mBoring);if (boring != null) {mBoring = boring;}} else {fromexisting = true;}if (boring == null || boring == UNKNOWN_BORING) {if (des < 0) {des = (int) FloatMath.ceil(Layout.getDesiredWidth(mTransformed, mTextPaint));}width = des;} else {width = boring.width;}final Drawables dr = mDrawables;if (dr != null) {width = Math.max(width, dr.mDrawableWidthTop);width = Math.max(width, dr.mDrawableWidthBottom);}if (mHint != null) {int hintDes = -1;int hintWidth;if (mHintLayout != null && mEllipsize == null) {hintDes = desired(mHintLayout);}if (hintDes < 0) {hintBoring = BoringLayout.isBoring(mHint, mTextPaint, mTextDir, mHintBoring);if (hintBoring != null) {mHintBoring = hintBoring;}}if (hintBoring == null || hintBoring == UNKNOWN_BORING) {if (hintDes < 0) {hintDes = (int) FloatMath.ceil(Layout.getDesiredWidth(mHint, mTextPaint));}hintWidth = hintDes;} else {hintWidth = hintBoring.width;}if (hintWidth > width) {width = hintWidth;}}width += getCompoundPaddingLeft() + getCompoundPaddingRight();if (mMaxWidthMode == EMS) {width = Math.min(width, mMaxWidth * getLineHeight());} else {width = Math.min(width, mMaxWidth);}if (mMinWidthMode == EMS) {width = Math.max(width, mMinWidth * getLineHeight());} else {width = Math.max(width, mMinWidth);}// Check against our minimum widthwidth = Math.max(width, getSuggestedMinimumWidth());if (widthMode == MeasureSpec.AT_MOST) {width = Math.min(widthSize, width);}}int want = width – getCompoundPaddingLeft() – getCompoundPaddingRight();int unpaddedWidth = want;if (mHorizontallyScrolling) want = VERY_WIDE;int hintWant = want;int hintWidth = (mHintLayout == null) ? hintWant : mHintLayout.getWidth();if (mLayout == null) {makeNewLayout(want, hintWant, boring, hintBoring,width – getCompoundPaddingLeft() – getCompoundPaddingRight(), false);} else {final boolean layoutChanged = (mLayout.getWidth() != want) ||(hintWidth != hintWant) ||(mLayout.getEllipsizedWidth() !=width – getCompoundPaddingLeft() – getCompoundPaddingRight());final boolean widthChanged = (mHint == null) &&(mEllipsize == null) &&(want > mLayout.getWidth()) &&(mLayout instanceof BoringLayout || (fromexisting && des >= 0 && des <= want));final boolean maximumChanged = (mMaxMode != mOldMaxMode) || (mMaximum != mOldMaximum);if (layoutChanged || maximumChanged) {if (!maximumChanged && widthChanged) {mLayout.increaseWidthTo(want);} else {makeNewLayout(want, hintWant, boring, hintBoring,width – getCompoundPaddingLeft() – getCompoundPaddingRight(), false);}} else {// Nothing has changed}}if (heightMode == MeasureSpec.EXACTLY) {// Parent has told us how big to be. So be it.height = heightSize;mDesiredHeightAtMeasure = -1;} else {int desired = getDesiredHeight();height = desired;mDesiredHeightAtMeasure = desired;if (heightMode == MeasureSpec.AT_MOST) {height = Math.min(desired, heightSize);}}int unpaddedHeight = height – getCompoundPaddingTop() – getCompoundPaddingBottom();if (mMaxMode == LINES && mLayout.getLineCount() > mMaximum) {unpaddedHeight = Math.min(unpaddedHeight, mLayout.getLineTop(mMaximum));}/** We didn’t let makeNewLayout() register to bring the cursor into view,* so do it here if there is any possibility that it is needed.*/if (mMovement != null ||mLayout.getWidth() > unpaddedWidth ||mLayout.getHeight() > unpaddedHeight) {registerForPreDraw();} else {scrollTo(0, 0);}setMeasuredDimension(width, height);}哇！好长！而且方法中还嵌套方法，如果真要算下来，代码量不会低于^)在重写这个方法之前，得先了解一个类 MeasureSpec ，如果不了解，没关系，下面就一起来了解一下这个类。先把代码贴出来，膜拜一下public static class MeasureSpec {private static final int MODE_SHIFT = 30;private static final int MODE_MASK = 0x3 << MODE_SHIFT;public static final int UNSPECIFIED = 0 << MODE_SHIFT;public static final int EXACTLY= 1 << MODE_SHIFT;public static final int AT_MOST= 2 << MODE_SHIFT;public static int makeMeasureSpec(int size, int mode) {if (sUseBrokenMakeMeasureSpec) {return size + mode;} else {return (size & ~MODE_MASK) | (mode & MODE_MASK);}}public static int getMode(int measureSpec) {return (measureSpec & MODE_MASK);}public static int getSize(int measureSpec) {return (measureSpec & ~MODE_MASK);}}这里我把里面一些我认为没必要的代码都去掉了，只留了以上几行代码，这样看起来很清晰，也非常容易理解。我们先做个转化，把上面几个成员变量转化成二进制这个就不需要转化了，这里代表的只是一个移动的位置，也就是一个单纯的数字MODE_SHIFT = 30;0x3 就是 11 左移30位 ，就是补30个0；MODE_MASK = ;00 左移30位UNSPECIFIED = ;01 左移30位EXACTLY= ;10 左移30位AT_MOST= ;你就会问了，这样写有什么好处呢？ 细心的人看了上面这几个方法就明白了，每个方法中都有一个 & 的操作，，所以我们接下来看看这集几个方法的含义是什么，先从下往上看，先易后难 (int measureSpec) {return (measureSpec & ~MODE_MASK);} 顾名思义，通过measureSpec这个参数，获取size ，两个都是int类型，怎么通过一个int类型的数获取另一个int类型的数。我们在学习java的时候知道，一个int类型是32位，任何int类型的数都是有32位，比如一个int类型的数值3，它也是占有32位，只是高30位全部为0。google 也是利用这一点，让这个int类型的measureSpec数存了两个信息，一个就是size，保存在int类型的低30位，另一个就是mode，保存在int类型的高2位。前面我们看到了有几个成员变量，UNSPECIFIED，EXACTLY，AT_MOST 者就是mode的三种选择，目前也只有这三种选择，所以只需要2位就能实现。 (int measureSpec) {return (measureSpec & MODE_MASK);}` 这也好理解，获取模式，但这些模式有啥用处呢？ 1）、EXACTLY 模式： 准确的、精确的；这种模式，是最容易理解和处理的，可以理解为大小固定，比如在定义layout_width的时候，定义为固定大小 10dp，20dp，或者match_parent(此时父控件是固定的)这时候，获取出来的mode就是EXACTLY 2）、AT_MOST 模式： 最大的；这种模式稍微难处理些，不过也好理解，就是View的大小最大不能超过父控件，超过了，取父控件的大小，没有，则取自身大小，这种情况一般都是在layout_width设为warp_content时。 3）、UNSPECIFIED 模式：不指定大小，这种情况，我们几乎用不上，它是什么意思呢，就是View的大小想要多大，就给多大，不受父View的限制，几个例子就好理解了，ScrollView控件就是。 (int size, int mode) {if (sUseBrokenMakeMeasureSpec) {return size + mode;} else {return (size & ~MODE_MASK) | (mode & MODE_MASK);}}` 这个方法也好理解，封装measureSpec的值，在定义一个View的大小时，我们只是固定了大小，你下次想要获取mode的时候，肯定无法拿到，所以就得自己把模式添加进去，这个方法，在自定义View中，也基本不需要用到，他所使用的场所，是在设置子View的大小的时候需要用到，所以如果是自定义ViewGroup的话，就需要用到。 感觉讲了这么多，还是不知道怎么使用，接下来就来重写onMeasure（）方法，写完之后，你就明白了，这里把注解下载代码里头。 @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {//这里方法套路都是一样，不管三七 二十一，上来就先把mode 和 size 获取出来。int widthMode = MeasureSpec.getMode(widthMeasureSpec);int heightMode = MeasureSpec.getMode(heightMeasureSpec);int widthSize = MeasureSpec.getSize(widthMeasureSpec);int heightSize = MeasureSpec.getSize(heightMeasureSpec);//View 真正需要显示的大小int width = 0, height = 0;//这里是去测量字体大小measureText();//字体宽度加图片宽度取最大宽度，这里因为字体和图片是上下排列int contentWidth = Math.max(mBoundText.width(), mIconNormal.getWidth());// 我们渴望得到的宽度int desiredWidth = getPaddingLeft() + getPaddingRight() + contentWidth;//重点来了，判断模式，这个模式哪里来的呢，就是在编写xml的时候，设置的layout_widthswitch (widthMode) {//如果是AT_MOST，不能超过父View的宽度case MeasureSpec.AT_MOST:width = Math.min(widthSize, desiredWidth);break;//如果是精确的，好说，是多少，就给多少；case MeasureSpec.EXACTLY:width = widthSize;break;//这种情况，纯属在这里打酱油的，可以不考虑case MeasureSpec.UNSPECIFIED://我是路过的width = desiredWidth;break;}int contentHeight = mBoundText.height() + mIconNormal.getHeight();int desiredHeight = getPaddingTop() + getPaddingBottom() + contentHeight;switch (heightMode) {case MeasureSpec.AT_MOST:height = Math.min(heightSize, desiredHeight);break;case MeasureSpec.EXACTLY:height = heightSize;break;case MeasureSpec.UNSPECIFIED:height = contentHeight;break;}//最后不要忘记了，调用父类的测量方法setMeasuredDimension(width, height); } 到这里，就算View的大小就已经完成了，自定义View的计算过程和以上方法基本类似。接着就是计算需要显示的图标和字体的位置。这里希望图片和字体垂直排列，并居中显示在View当中，因为当前的View的宽高已经测量好了，接下来的计算也就非常简单了，这里就放在onDraw（）方法中计算d）绘制图标和字体绘制图标，可以用canvas.drawBitmap(Bitmap bitmap, int left, int top ,Paint paint)方法，bitmap 已经有了，如果不需要对图片作特殊处理 paint 可以传入null表示原图原样的绘制在白纸上，所以就差绘制的位置 left ，top前面已经分析过了，需要把图绘制在View的中间，当然这里还需包含字体，所以可以这样计算left 和top。去旅行不在于记忆，而在于当时的那份心情。
