自己定义控件三部曲视图篇（一）——測量与布局

前言：生命总是要有信仰，有梦想才干一直前行。哪怕走的再慢，也是在前行。

相关文章：

《Android自己定义控件三部曲文章索引》：http://blog.csdn.net/harvic880925/article/details/50995268

今天给大家讲讲有关自己定义布局控件的问题，大家来看这样一个需求，你须要设计一个container，实现内部控件自己主动换行。即里面的控件能够依据长度来推断当前行是否容得下它，进而决定是否转到下一行显示。效果图例如以下

在上图中，全部的紫色部分是FlowLayout控件，明显能够看出，内部的每一个TextView控件。能够依据大小自己主动排列。
效果图就是这样子了，第一篇先讲下预备知识。

一、ViewGroup绘制流程

注意，View及ViewGroup基本同样。仅仅是在ViewGroup中不仅要绘制自己还是绘制当中的子控件，而View则仅仅须要绘制自己就能够了。所以我们这里就以ViewGroup为例来讲述整个绘制流程。

绘制流程分为三步：測量、布局、绘制
分别相应：onMeasure()、onLayout()、onDraw()
当中，他们三个的作用分别例如以下：
onMeasure()：測量自己的大小。为正式布局提供建议。（注意。仅仅是建议，至于用不用，要看onLayout）;
onLayout():使用layout()函数对全部子控件布局；
onDraw():依据布局的位置画图；
有关画图的部分，大家能够參考我的系列博客《android Graphics（一）：概述及基本几何图形绘制》共同拥有四篇。讲述了有关android 画图的90%内容，大家能够參考。

这篇文章着重将内容放在分析onMeasure()和onLayout()上。

二、onMeasure与MeasureSpec

布局绘画涉及两个过程：測量过程和布局过程。測量过程通过measure方法实现。是View树自顶向下的遍历，每一个View在循环过程中将尺寸细节往下传递，当測量过程完毕之后。全部的View都存储了自己的尺寸。

第二个过程则是通过方法layout来实现的。也是自顶向下的。

在这个过程中，每一个父View负责通过计算好的尺寸放置它的子View。

前面讲过，onMeasure()是用来測量当前控件大小的。给onLayout（）提供数值參考，须要特别注意的是：測量完毕以后通过setMeasuredDimension(int,int)设置给系统。

1、onMeasure

首先，看一下onMeasure()的声明：

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

这里我们主要关注传进来的两个參数：int widthMeasureSpec, int heightMeasureSpec
与这两个參数有关的是两个问题：意义和组成。

即他们是怎么来的，表示什么意思；还有，他们是组成方式是如何的。
我们先说他们的意义：
他们是父类传递过来给当前view的一个建议值,即想把当前view的尺寸设置为宽widthMeasureSpec,高heightMeasureSpec
有关他们的组成。我们就直接转到MeasureSpec部分。

2、MeasureSpec

尽管表面上看起来他们是int类型的数字，事实上他们是由mode+size两部分组成的。
widthMeasureSpec和heightMeasureSpec转化成二进制数字表示，他们都是32位的。

前两位代表mode(測量模式)。后面30位才是他们的实际数值（size）。
（1）模式分类
它有三种模式：
①、UNSPECIFIED(未指定)，父元素部队自元素施加不论什么束缚，子元素能够得到随意想要的大小。
②、EXACTLY(全然)。父元素决定自元素的确切大小，子元素将被限定在给定的边界里而忽略它本身大小。
③、AT_MOST(至多)。子元素至多达到指定大小的值。
他们相应的二进制值各自是：
UNSPECIFIED=00000000000000000000000000000000
EXACTLY =01000000000000000000000000000000
AT_MOST =10000000000000000000000000000000
由于最前面两位代表模式，所以他们分别相应十进制的0。1，2；
（2）模式提取
如今我们知道了widthMeasureSpec和heightMeasureSpec是由模式和数值组成的。而且二进制的前两位代表模式，后28位代表数字。
我们先想想，假设我们自己来提取widthMeasureSpec和heightMeasureSpec中的模式和数值是怎么提取呢？
首先想到的肯定是通过MASK和与运算去掉不须要的部分而得到相应的模式或数值。

讲到这大家可能会迷茫。我们写段代码来提取模式部分吧：

//相应11000000000000000000000000000000;总共32位，前两位是1
int MODE_MASK  = 0xc0000000;

//提取模式
public static int getMode(int measureSpec) {
    return (measureSpec & MODE_MASK);
}
//提取数值
public static int getSize(int measureSpec) {
    return (measureSpec & ~MODE_MASK);
}

相信大家看了代码就应该清楚模式和数值提取的方法了吧，主要用到了MASK的与、非运算，难度不大，假设有问题。自行谷歌一下与、非运算方法吧。
（3）、MeasureSpec
上面我们自已实现了模式和数值的提取。但在强大的andorid面前。肯定有提供提取模式和数值的类。这个类就是MeasureSpec
以下两个函数就能够实现这个功能：

MeasureSpec.getMode(int spec) //获取MODE
MeasureSpec.getSize(int spec) //获取数值

另外MODE的取值为：

MeasureSpec.AT_MOST
MeasureSpec.EXACTLY
MeasureSpec.UNSPECIFIED

通过以下的代码就能够分别获取widthMeasureSpec和heightMeasureSpec的MODE和数值

int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);
int measureHeightMode = MeasureSpec.getMode(heightMeasureSpec);

事实上大家通过查看代码能够知道，我们的实现就是MeasureSpec.getSize（）和MeasureSpec.getMode（）的实现代码。
（4）、模式有什么用呢
我们知道这里有三个模式：EXACTLY、AT_MOST、UNSPECIFIED
须要注意的是widthMeasureSpec和heightMeasureSpec各自都有它相应的模式，模式的由来分别来自于XML定义：
简单来说。XML布局和模式有例如以下相应关系：

  • wrap_content-> MeasureSpec.AT_MOST
  • match_parent -> MeasureSpec.EXACTLY
  • 详细值 -> MeasureSpec.EXACTLY

比如。以下这个XML

<com.example.harvic.myapplication.FlowLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content">

</com.example.harvic.myapplication.FlowLayout>

那FlowLayout在onMeasure()中传值时widthMeasureSpec的模式就是 MeasureSpec.EXACTLY。即父窗体宽度值。

heightMeasureSpec的模式就是 MeasureSpec.AT_MOST，即不确定的。

一定要注意是，当模式是MeasureSpec.EXACTLY时，我们就不必要设定我们计算的大小了，由于这个大小是用户指定的，我们不应更改。

但当模式是MeasureSpec.AT_MOST时。也就是说用户将布局设置成了wrap_content，我们就须要将大小设定为我们计算的数值，由于用户根本没有设置详细值是多少，须要我们自己计算。

即。假如width和height是我们经过计算的控件所占的宽度和高度。那在onMeasure()中使用setMeasuredDimension（）最后设置时，代码应该是这种:

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
    int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
    int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);
    int measureHeightMode = MeasureSpec.getMode(heightMeasureSpec);

    //经过计算，控件所占的宽和高分别相应width和height
    //计算过程。我们会在下篇细讲
    …………

	setMeasuredDimension((measureWidthMode == MeasureSpec.EXACTLY) ? measureWidth: width, (measureHeightMode == MeasureSpec.EXACTLY) ? measureHeight: height);
}

三、onLayout()

1、概述

上面说了，onLayout()是实现全部子控件布局的函数。注意。是全部子控件！！

！

那它自己的布局怎么办？后面我们再讲，先讲讲在onLayout()中我们应该做什么。
我们先看看ViewGroup的onLayout()函数的默认行为是什么
在ViewGroup.java中

@Override
protected abstract void onLayout(boolean changed, int l, int t, int r, int b);

是一个抽象方法。说明凡是派生自ViewGroup的类都必须自己去实现这种方法。

像LinearLayout、RelativeLayout等布局，都是重写了这种方法，然后在内部依照各自的规则对子视图进行布局的。

2、实例

以下我们就举个样例来看一下有关onMeasure()和onLayout()的详细使用：
以下是效果图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

这个效果图主要有两点：
1、三个TextView竖直排列
2、背景的Layout宽度是match_parent，高度是wrap_content.
以下我们就看一下。代码上如何实现：
（1）、XML布局
首先我们看一下XML布局：（activity_main.xml）

<com.harvic.simplelayout.MyLinLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ff00ff"
    tools:context=".MainActivity">

    <TextView android:text="第一个VIEW"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView android:text="第二个VIEW"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView android:text="第三个VIEW"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</com.harvic.simplelayout.MyLinLayout>

可见里面有三个TextView,然后自己定义的MyLinLayout布局，宽度设为了match_parent,高度设为了wrap_content.
(2)、MyLinLayout实现：重写onMeasure()函数
我们前面讲过，onMeasure()的作用就是依据container内部的子控件计算自己的宽和高。最后通过setMeasuredDimension（int width,int height设置进去）；
以下看看onMeasure()的完整代码,然后再逐步解说：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
    int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
    int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);
    int measureHeightMode = MeasureSpec.getMode(heightMeasureSpec);

    int height = 0;
    int width = 0;
    int count = getChildCount();
    for (int i=0;i<count;i++) {
		//測量子控件
        View child = getChildAt(i);
        measureChild(child, widthMeasureSpec, heightMeasureSpec);
		//获得子控件的高度和宽度
        int childHeight = child.getMeasuredHeight();
        int childWidth = child.getMeasuredWidth();
		//得到最大宽度，而且累加高度
        height += childHeight;
        width = Math.max(childWidth, width);
    }

    setMeasuredDimension((measureWidthMode == MeasureSpec.EXACTLY) ? measureWidth: width, (measureHeightMode == MeasureSpec.EXACTLY) ?

measureHeight: height);
}

首先，是从父类传过来的建议宽度和高度值：widthMeasureSpec、heightMeasureSpec
从他们里面利用MeasureSpec提取宽高值和相应的模式：

    int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
    int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
    int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);
    int measureHeightMode = MeasureSpec.getMode(heightMeasureSpec);

接下来就是通过測量它全部的子控件来决定它所占位置的大小：

int height = 0;
int width = 0;
int count = getChildCount();
for (int i=0;i<count;i++) {
	//測量子控件
    View child = getChildAt(i);
    measureChild(child, widthMeasureSpec, heightMeasureSpec);
	//获得子控件的高度和宽度
    int childHeight = child.getMeasuredHeight();
    int childWidth = child.getMeasuredWidth();
	//得到最大宽度，而且累加高度
    height += childHeight;
    width = Math.max(childWidth, width);
}

我们这里要计算的是整个VIEW当被设置成layout_width="wrap_content",layout_height="wrap_content"所占用的大小。由于我们是垂直排列其内部全部的VIEW。所以container所占宽度应该是各个TextVIew中的最大宽度。所占高度应该是全部控件的高度和。
最后，依据当前用户的设置来推断是否将计算出来的值设置进onMeasure()中。用它来计算当前container所在位置。

setMeasuredDimension((measureWidthMode == MeasureSpec.EXACTLY) ?

measureWidth: width, (measureHeightMode == MeasureSpec.EXACTLY) ? measureHeight: height);

前面我们讲过，模式与XML布局的相应关系：
* wrap_content-> MeasureSpec.AT_MOST
* match_parent -> MeasureSpec.EXACTLY
* 详细值 -> MeasureSpec.EXACTLY
再看我们前面XML中针对MyLinLayout的设置：

<com.harvic.simplelayout.MyLinLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ff00ff"
    tools:context=".MainActivity">

所以这里的measureWidthMode应该是MeasureSpec.EXACTLY,measureHeightMode应该是MeasureSpec.AT_MOST。所以在最后利用setMeasuredDimension(width,height)来终于设置时，width使用的是从父类传过来的measureWidth，而高度则是我们自己计算的height.即实际的运算结果是这种：

setMeasuredDimension(measureWidth,height);

总体来讲，onMeasure()中计算出的width和height，就是当XML布局设置为layout_width="wrap_content"、layout_height="wrap_content"时所占的宽和高。即整个container所占的最小矩形

(3)、MyLinLayout实现：重写onLayout()函数

在这部分，就是依据自己的意愿把内部的各个控件排列起来。我们要完毕的是将全部的控件垂直排列。
先看完整的代码。然后再细讲：

protected void onLayout(boolean changed, int l, int t, int r, int b) {
    int top = 0;
    int count = getChildCount();
    for (int i=0;i<count;i++) {

        View child = getChildAt(i);

        int childHeight = child.getMeasuredHeight();
        int childWidth = child.getMeasuredWidth();

        child.layout(0, top, childWidth, top + childHeight);
        top += childHeight;
    }
}

最核心的代码，就是调用layout()函数设置子控件所在的位置：

int childHeight = child.getMeasuredHeight();
int childWidth = child.getMeasuredWidth();

child.layout(0, top, childWidth, top + childHeight);
top += childHeight;

在这里top指的是控件的顶点，那bottom的坐标就是top+childHeight,我们从最左边開始布局，那么right的坐标就肯定是子控件的宽度值了childWidth.

到这里，这个样例就讲完了。源代码会在文章底部给出，以下来讲一个非常easy混淆的问题。

(4)、getMeasuredWidth()与getWidth()
趁热打铁，就这个样例。我们讲一个非常easy出错的问题：getMeasuredWidth()与getWidth()的差别。

他们的值大部分时间都是同样的，但意义确是根本不一样的。我们就来简单分析一下。
差别主要体如今以下几点：
- 首先getMeasureWidth()方法在measure()过程结束后就能够获取到了，而getWidth()方法要在layout()过程结束后才干获取到。

- getMeasureWidth()方法中的值是通过setMeasuredDimension()方法来进行设置的，而getWidth()方法中的值则是通过layout(left,top,right,bottom)方法设置的。
还记得吗。我们前面讲过，setMeasuredDimension()提供的測量结果仅仅是为布局提供建议。终于的取用与否要看layout()函数。大家再看看我们上面重写的MyLinLayout，是不是我们自己使用child.layout(left,top,right,bottom)来定义了各个子控件所应在的位置：

int childHeight = child.getMeasuredHeight();
int childWidth = child.getMeasuredWidth();

child.layout(0, top, childWidth, top + childHeight);

从代码中能够看到。我们使用child.layout(0, top, childWidth, top + childHeight);来布局控件的位置，当中getWidth()的取值就是这里的右坐标减去左坐标的宽度；由于我们这里的宽度是直接使用的child.getMeasuredWidth()的值。当然会导致getMeasuredWidth()与getWidth()的值是一样的。假设我们在调用layout()的时候传进去的宽度值不与getMeasuredWidth()同样，那必定getMeasuredWidth()与getWidth()的值就不再一样了。

一定要注意的一点是：getMeasureWidth()方法在measure()过程结束后就能够获取到了，而getWidth()方法要在layout()过程结束后才干获取到。再重申一遍！！

！

！！

源代码在文章底部给出

3、疑问：container自己什么时候被布局

前面我们说了。在派生自ViewGroup的container中。比方我们上面的MyLinLayout。在onLayout()中布局它全部的子控件。

那它自己什么时候被布局呢？

它当然也有父控件，它的布局也是在父控件中由它的父控件完毕的。就这样一层一层地向上由各自的父控件完毕对自己的布局。

真到全部控件的最顶层结点，在全部的控件的最顶部有一个ViewRoot，它才是全部控件的终于祖先结点。

那让我们来看看它是怎么来做的吧。

在它布局里，会调用它自己的一个layout()函数(不能被重载。代码位于View.java)：

/* final 标识符 ， 不能被重载 ， 參数为每一个视图位于父视图的坐标轴
 * @param l Left position, relative to parent
 * @param t Top position, relative to parent
 * @param r Right position, relative to parent
 * @param b Bottom position, relative to parent
 */
public final void layout(int l, int t, int r, int b) {
    boolean changed = setFrame(l, t, r, b); //设置每一个视图位于父视图的坐标轴
    if (changed || (mPrivateFlags & LAYOUT_REQUIRED) == LAYOUT_REQUIRED) {
        if (ViewDebug.TRACE_HIERARCHY) {
            ViewDebug.trace(this, ViewDebug.HierarchyTraceType.ON_LAYOUT);
        }  

        onLayout(changed, l, t, r, b);//回调onLayout函数 。设置每一个子视图的布局
        mPrivateFlags &= ~LAYOUT_REQUIRED;
    }
    mPrivateFlags &= ~FORCE_LAYOUT;

在SetFrame(l,t,r,b)就是设置自己的位置，设置结束以后才会调用onLayout(changed, l, t, r, b)来设置内部全部子控件的位置。
OK啦。到这里有关onMeasure()和onLayout()的内容就讲完啦，想必大家应该也对整个布局流程有了一个清楚的认识了，以下我们再看一个紧要的问题：如何得到自己定义控件的左右间距margin值。

四、获取子控件Margin的方法

1、获取方法及演示样例

在这部分。大家先不必纠结这个样例为什么要这么写，我会先简单粗暴的教大家怎么先获取到margin值。然后再细讲为什么这样写，他们的原理是如何的。

假设要自己定义ViewGroup支持子控件的layout_margin參数，则自己定义的ViewGroup类必须重载generateLayoutParams()函数，而且在该函数中返回一个ViewGroup.MarginLayoutParams派生类对象，这样才干使用margin參数。
我们在上面MyLinLayout样例的基础上，加入上layout_margin參数；

(1)、首先，在XML中加入上layout_margin參数

<com.harvic.simplelayout.MyLinLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ff00ff"
    tools:context=".MainActivity">

    <TextView android:text="第一个VIEW"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="#ff0000"/>

    <TextView android:text="第二个VIEW"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="#00ff00"/>

    <TextView android:text="第三个VIEW"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:background="#0000ff"/>

</com.harvic.simplelayout.MyLinLayout>

我们在每一个TextView中都加入了一layout_marginTop參数，而且值各自是10dp,20dp,30dp。背景也都分别改为了红，绿，蓝；
如今我们执行一上，看看效果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

从图中能够看到。根本没作用！！！这是为什么呢？由于測量和布局都是我们自己实现的，我们在onLayout（）中没有依据Margin来布局，当然不会出现有关Margin的效果啦。须要特别注意的是。假设我们在onLayout()中依据margin来布局的话，那么我们在onMeasure()中计算container的大小时，也要加上margin，不然会导致container太小，而控件显示不全的问题。

费话不多说。我们直接看代码实现。

(2)、重写generateLayoutParams（）函数

重写代码例如以下：

@Override
protected LayoutParams generateLayoutParams(LayoutParams p) {
    return new MarginLayoutParams(p);
}

@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
    return new MarginLayoutParams(getContext(), attrs);
}

@Override
protected LayoutParams generateDefaultLayoutParams() {
    return new MarginLayoutParams(LayoutParams.MATCH_PARENT,
            LayoutParams.MATCH_PARENT);
}

在这里，我们重写了两个函数。一个是generateLayoutParams（）函数，一个是generateDefaultLayoutParams（）函数。直接返回相应的MarginLayoutParams（）的实例。至于为什么要这么写，我们后面再讲，这里先把Margin信息获取到再说。

(3)、重写onMeasure()

让我们先看一下重写好的onMeasure()函数代码：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
    int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
    int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);
    int measureHeightMode = MeasureSpec.getMode(heightMeasureSpec);

    int height = 0;
    int width = 0;
    int count = getChildCount();
    for (int i=0;i<count;i++) {

        View child = getChildAt(i);
        measureChild(child, widthMeasureSpec, heightMeasureSpec);

        MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
        int childHeight = child.getMeasuredHeight()+lp.topMargin+lp.bottomMargin;
        int childWidth = child.getMeasuredWidth()+lp.leftMargin+lp.rightMargin;

        height += childHeight;
        width = Math.max(childWidth, width);
    }

    setMeasuredDimension((measureWidthMode == MeasureSpec.EXACTLY) ? measureWidth: width, (measureHeightMode == MeasureSpec.EXACTLY) ? measureHeight: height);
}

最关键的地方是改了这句：

MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int childHeight = child.getMeasuredHeight()+lp.topMargin+lp.bottomMargin;
int childWidth = child.getMeasuredWidth()+lp.leftMargin+lp.rightMargin;

通过 child.getLayoutParams()获取child相应的LayoutParams实例。将其强转成MarginLayoutParams；
然后在计算childHeight时加入上顶部间距和底部间距。计算childWidth时加入上左边间距和右边间距。

也就是说，我们在计算宽度和高度时不仅考虑到子控件的本身的大小还要考虑到子控件间的间距问题。

(4)、重写onLayout()函数

同样，我们在布局时仍然将间距加到控件里就好了，完整代码例如以下：

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    int top = 0;
    int count = getChildCount();
    for (int i=0;i<count;i++) {

        View child = getChildAt(i);

        MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
        int childHeight = child.getMeasuredHeight()+lp.topMargin+lp.bottomMargin;
        int childWidth = child.getMeasuredWidth()+lp.leftMargin+lp.rightMargin;

        child.layout(0, top, childWidth, top + childHeight);
        top += childHeight;
    }
}

在这里同样在布局子控件时，加入上子控件间的间距，详细就不讲了，非常easy理解。

终于的效果图例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

从效果图中能够明显的看到每一个ITEM都加入上了间距了。

源代码在文章底部给出

2、原理

上面我们看了要重写generateDefaultLayoutParams（）函数才干获取控件的margin间距。那为什么要重写呢？以下这句就为什么非要强转呢？

MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();

以下我们来看看这么做的原因。
首先，在container在初始化子控件时。会调用LayoutParams generateLayoutParams(LayoutParams p)来为子控件生成相应的布局属性。但默认仅仅是生成layout_width和layout_height所以相应的布局參数。即在正常情况下的generateLayoutParams（）函数生成的LayoutParams实例是不能够取到margin值的。即：

/**
*从指定的XML中获取相应的layout_width和layout_height值
*/
public LayoutParams generateLayoutParams(AttributeSet attrs) {
    return new LayoutParams(getContext(), attrs);
}
/*
*假设要使用默认的构造方法，就生成layout_width="wrap_content"、layout_height="wrap_content"相应的參数
*/
protected LayoutParams generateDefaultLayoutParams() {
     return new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
}

所以。假设我们还须要margin相关的參数就仅仅能重写generateLayoutParams（）函数了：

public LayoutParams generateLayoutParams(AttributeSet attrs) {
    return new MarginLayoutParams(getContext(), attrs);
}

由于generateLayoutParams()的返回值是LayoutParams实例。而MarginLayoutParams是派生自LayoutParam的。所以依据类的多态的特性，能够直接将此时的LayoutParams实例直接强转成MarginLayoutParams实例；
所以以下这句在这里是不会报错的：

MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();

大家也能够为了安全起见利用instanceOf来做下推断，例如以下：

MarginLayoutParams lp = null
if (child.getLayoutParams() instanceof  MarginLayoutParams) {
    lp = (MarginLayoutParams) child.getLayoutParams();
    …………
}

所以总体来讲，就是利用了类的多态特性！以下来看看MarginLayoutParams和generateLayoutParams（）都做了什么。

3、MarginLayoutParams与generateLayoutParams()的实现

写在前面：本部分涉及自己定义控件属性的内容。假设对于TypedArray和自己定义控件属性不明确的同学请先移动<PullScrollView详细解释（一）——自己定义控件属性>

（1）generateLayoutParams（）实现

首先，我们看看generateLayoutPararms（）都做了什么吧，它是怎么得到布局值的：

//位于ViewGrop.java中
public LayoutParams generateLayoutParams(AttributeSet attrs) {
    return new LayoutParams(getContext(), attrs);
}
public LayoutParams(Context c, AttributeSet attrs) {
    TypedArray a = c.obtainStyledAttributes(attrs, R.styleable.ViewGroup_Layout);
    setBaseAttributes(a,
            R.styleable.ViewGroup_Layout_layout_width,
            R.styleable.ViewGroup_Layout_layout_height);
    a.recycle();
}
protected void setBaseAttributes(TypedArray a, int widthAttr, int heightAttr) {
    width = a.getLayoutDimension(widthAttr, "layout_width");
    height = a.getLayoutDimension(heightAttr, "layout_height");
}

从上面的代码中明显能够看出，generateLayoutParams（）调用LayoutParams（）产生布局信息。而LayoutParams（）终于调用setBaseAttributes（）来获得相应的宽，高属性。

这里是通过TypedArray对自己定义的XML进行值提取的过程，难度不大。不再细讲。

从这里也能够看到，generateLayoutParams生成的LayoutParams属性仅仅有layout_width和layout_height的属性值。

2、MarginLayoutParams实现

以下再来看看MarginLayoutParams的详细实现。事实上通过上面的过程。大家也应该想到。它也是通过TypeArray来解析自己定义属性来获得用户的定义值的(大家看到长代码不要害怕，先列出完整代码，以下会分段讲)：

public MarginLayoutParams(Context c, AttributeSet attrs) {
    super();

    TypedArray a = c.obtainStyledAttributes(attrs, R.styleable.ViewGroup_MarginLayout);
    int margin = a.getDimensionPixelSize(
            com.android.internal.R.styleable.ViewGroup_MarginLayout_layout_margin, -1);
    if (margin >= 0) {
        leftMargin = margin;
        topMargin = margin;
        rightMargin= margin;
        bottomMargin = margin;
    } else {
       leftMargin = a.getDimensionPixelSize(
               R.styleable.ViewGroup_MarginLayout_layout_marginLeft,
               UNDEFINED_MARGIN);
       rightMargin = a.getDimensionPixelSize(
               R.styleable.ViewGroup_MarginLayout_layout_marginRight,
               UNDEFINED_MARGIN);

       topMargin = a.getDimensionPixelSize(
               R.styleable.ViewGroup_MarginLayout_layout_marginTop,
               DEFAULT_MARGIN_RESOLVED);

       startMargin = a.getDimensionPixelSize(
               R.styleable.ViewGroup_MarginLayout_layout_marginStart,
               DEFAULT_MARGIN_RELATIVE);
       endMargin = a.getDimensionPixelSize(
               R.styleable.ViewGroup_MarginLayout_layout_marginEnd,
               DEFAULT_MARGIN_RELATIVE);
    }
    a.recycle();
}

这段代码分为两部分：
第一部分：提取layout_margin的值并设置

TypedArray a = c.obtainStyledAttributes(attrs, R.styleable.ViewGroup_MarginLayout);
int margin = a.getDimensionPixelSize(
        com.android.internal.R.styleable.ViewGroup_MarginLayout_layout_margin, -1);
if (margin >= 0) {
    leftMargin = margin;
    topMargin = margin;
    rightMargin= margin;
    bottomMargin = margin;
} else {
  …………
}

在这段代码中就是通过提取layout_margin的值来设置上，下，左。右边距的。
第二部分：假设用户没有设置layout_margin，而是单个设置的，那么就一个个提取，代码例如以下：

leftMargin = a.getDimensionPixelSize(
        R.styleable.ViewGroup_MarginLayout_layout_marginLeft,
        UNDEFINED_MARGIN);
rightMargin = a.getDimensionPixelSize(
        R.styleable.ViewGroup_MarginLayout_layout_marginRight,
        UNDEFINED_MARGIN);

topMargin = a.getDimensionPixelSize(
        R.styleable.ViewGroup_MarginLayout_layout_marginTop,
        DEFAULT_MARGIN_RESOLVED);

startMargin = a.getDimensionPixelSize(
        R.styleable.ViewGroup_MarginLayout_layout_marginStart,
        DEFAULT_MARGIN_RELATIVE);
endMargin = a.getDimensionPixelSize(
        R.styleable.ViewGroup_MarginLayout_layout_marginEnd,
        DEFAULT_MARGIN_RELATIVE);

这里就是对layout_marginLeft、layout_marginRight、layout_marginTop、layout_marginBottom的值一个个提取的过程。

难度不大。也没什么好讲的了。

从这里大家也能够看到为什么非要重写generateLayoutParams（）函数了，就是由于默认的generateLayoutParams（）函数仅仅会提取layout_width、layout_height的值，仅仅有MarginLayoutParams（）才具有提取margin间距的功能！！。。

好啦，这篇就到这啦。下篇咱们就開始实现FlowLayout了。

源代码内容：

1、《SimpleLayout》：第三部分相应源代码：MyLinLayout的初步实现

2、《SimpleLayoutAdvance》：第四部分相应源代码：加入上margin值的获取方法

假设本文有帮到你。记得加关注哦

源代码下载地址：http://download.csdn.net/detail/harvic880925/8928283

请大家尊重原创者版权。转载请标明出处：http://blog.csdn.net/harvic880925/article/details/47029169 谢谢

时间： 2024-10-12 22:06:43

自己定义控件三部曲视图篇（一）——測量与布局的相关文章

自己定义控件三部曲视图篇（二）——FlowLayout自适应容器实现

前言:我最大的梦想,就是有一天.等老了坐在摇椅上回望一生,有故事给孩子们讲--. 相关文章: <Android自己定义控件三部曲文章索引>:http://blog.csdn.net/harvic880925/article/details/50995268 经过上篇的铺垫.这篇就開始正式開始FlowLayout的开发啦,还是先给大家上上效果: 从效果图中能够看到,底部container的布局方式应该是layout_width="match_parent",layout_he

自定义控件三部曲视图篇（三）——瀑布流容器WaterFallLayout实现

前言:只要在前行,梦想就不再遥远 系列文章: Android自定义控件三部曲文章索引:http://blog.csdn.net/harvic880925/article/details/50995268 前面两节讲解了有关ViewGroup的onMeasure.onLayout的知识,这节我们深入性地探讨一下,如何实现经常见到的瀑布流容器,本节将实现的效果图如下: 从效果图中可以看出这里要完成的几个功能: 1.图片随机添加 2.在添加图片时,总是将新图片插入到当前最短的列中 3.每个Item后,

翻翻git之---实现QQ空间点赞部分实现的自己定义控件 EasyLikeArea

转载请注明出处:王亟亟的大牛之路 昨天在家里弄鱼的事没上班,也就没写东西.决定今天早上补一篇,正好看到了 Easy like area in the circle of friends or QQ qzone (?>﹏<?) 这个标题,就下了下代码研习一下.认为不错就分享给大家. 效果图:(这熟悉的icon,大家一目了然,干妹子的作者那位,名字叫啥我还真叫不出抱歉哈.) 作者git:https://github.com/CaMnter 效果非常明显,假设你想在自己的项目中要相似的效果,Easy

Android自己定义控件：进度条的四种实现方式

前三种实现方式代码出自: http://stormzhang.com/openandroid/2013/11/15/android-custom-loading/ (源代码下载)http://download.csdn.net/detail/chaoyu168/9616035 近期一直在学习自己定义控件,搜了很多大牛们Blog里分享的小教程.也上GitHub找了一些类似的控件进行学习.发现读起来都不太好懂,就想写这么一篇东西作为学习笔记吧. 一.控件介绍: 进度条在App中非经常见,比例如以下载

Android自己定义控件之轮播图控件

背景 近期要做一个轮播图的效果.网上看了几篇文章.基本上都能找到实现,效果还挺不错,可是在写的时候感觉每次都要单独去又一次在Activity里写一堆代码.于是自己封装了一下.这里仅仅是做了下封装成一个控件,不必每次反复写代码了. 效果图 实现分析 轮播图的功能就是实现左右滑动的广告.图片信息展示,那我们就用ViewPager来实现,由于考虑到用户体验,我们还须要在以下加一个指示器来标示滑动到了第几张轮播图.指示器我们能够用一个线性布局来依据要展示的轮播图设置显示的View,我们要做这种一个控件没

从源码中浅析Android中如何利用attrs和styles定义控件

一直有个问题就是,Android中是如何通过布局文件,就能实现控件效果的不同呢?比如在布局文件中,我设置了一个TextView,给它设置了textColor,它就能够改变这个TextView的文本的颜色.这是如何做到的呢?我们分3个部分来看这个问题1.attrs.xml  2.styles.xml  3.看组件的源码. 1.attrs.xml: 我们知道Android的源码中有attrs.xml这个文件,这个文件实际上定义了所有的控件的属性,就是我们在布局文件中设置的各类属性 你可以找到attr

android 自己定义控件属性（TypedArray以及attrs解释）

近期在捣鼓android 自己定义控件属性,学到了TypedArray以及attrs.在这当中看了一篇大神博客Android 深入理解Android中的自己定义属性.我就更加深入学习力一番.我就沿着这个学习,讲一下流程吧,兴许一篇还有应用. 1.attrs文件编写 <?xml version="1.0" encoding="utf-8"?> <resources> <attr name="titleText" for

Android 自己定义控件开发入门（二）

上一次我们讲了一堆实现自己定义控件的理论基础.列举了View类一些能够重写的方法,我们对这些方法的重写是我们继承View类来派生自己定义控件的关键 我通过一个最简单的样例给大家展示了这一个过程,不管是多么复杂的自己定义控件.思路总是这样子的,可是由于我们只重写了onDraw方法使得大家认为怪怪的.作为一个控件,我们竟然还要为了他的实现为其添加麻烦的监听,这就不能叫做控件了. 以下再给大家介绍一个常常重写的方法法:publicboolean onTouchEvent (MotionEvent ev

Android自己定义控件而且使其能够在xml中自己定义属性

为什么要自己定义View android开发中自己定义View的优点是显而易见的.比方说以下的这个顶部导航,它被设计出如今应用的每一个界面,但每次的内容却不尽同样.我们不能在每一个layout资源中都配置一组同样的View吧?假设使用<include layou="@layout/xxx"/>标签,尽管攻克了布局文件的重用性,可是相关View的初始化设置还是没可以重用(集中),须要每次都採用view.findViewById(id)来初始化他们. 有了对"可重用性