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

前言：我最大的梦想，就是有一天。等老了坐在摇椅上回望一生，有故事给孩子们讲……。

相关文章：

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

经过上篇的铺垫。这篇就開始正式開始FlowLayout的开发啦，还是先给大家上上效果：

从效果图中能够看到，底部container的布局方式应该是layout_width="match_parent",layout_height="wrap_content";
好了，废话不多说了，以下開始进入正规。

一、XML布局

从布局图中能够看到。FlowLayout中包括了非常多TextView.难度不大，布局代码例如以下：
先定义一个style,这是为FlowLayout中的TextView定义的:

<style name="text_flag_01">

    <item name="android:layout_width">wrap_content</item>

    <item name="android:layout_height">wrap_content</item>

    <item name="android:layout_margin">4dp</item>

    <item name="android:background">@drawable/flag_01</item>

    <item name="android:textColor">#ffffff</item>

</style>

注意，注意！！！我们这里定义了margin。还记得上篇中怎么样提取Margin值吗？重写generateLayoutParams（）函数。

以下看activity_main.xml的布局代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity">

    <com.example.harvic.myapplication.FlowLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="#ff00ff">

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_03"

            android:text="Welcome"

            android:textColor="#43BBE7" />

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_03"

            android:text="ITproject师"

            android:textColor="#43BBE7" />

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_03"

            android:text="我真是能够的"

            android:textColor="#43BBE7" />

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_03"

            android:text="你认为呢"

            android:textColor="#43BBE7" />

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_03"

            android:text="不要仅仅知道挣钱"

            android:textColor="#43BBE7" />

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_03"

            android:text="努力ing"

            android:textColor="#43BBE7" />

        <TextView

            style="@style/text_flag_01"

            android:background="@drawable/flag_03"

            android:text="I thick i can"

            android:textColor="#43BBE7" />

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

</LinearLayout>

这里注意两点。FlowLayout的android:layout_width设置为"match_parent"。android:layout_height设置为""wrap_content"；同一时候，我们为FlowLayout加入背景来明显看出我们计算出来的所占区域大小。

二、提取margin与onMeasure()重写

1、提取margin

上篇我们讲过要提取margin，就一定要重写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);

}

具体为什么我们就不再讲了。上篇已经讲的非常熟悉了，以下就看看怎样在onMeasure()中计算当前container所占的位置大小。

2、重写onMeasure()——计算当前FlowLayout所占的宽高

这里就要重写onMeasure()函数。在当中计算全部当前container所占的大小。
要做FlowLayout,首先涉及以下几个问题：
（1）何时换行
从效果图中能够看到。FlowLayout的布局是一行行的，假设当前行已经放不下下一个控件。那就把这个控件移到下一行显示。

所以我们要有个变量来计算当前行已经占领的宽度，以推断剩下的空间是否还能容得下下一个控件。

（2）、怎样得到FlowLayout的宽度
FlowLayout的宽度是全部行宽度的最大值。所以我们要记录下每一行的所占领的宽度值，进而找到全部值中的最大值。
（3）、怎样得到FlowLayout的高度
非常显然，FlowLayout的高度是每一行高度的总和，而每一行的高度则是取该行中全部控件高度的最大值。

原理到这里就讲完了，以下看看代码：

（1）首先，刚进来的时候是利用MeasureSpec获取系统建议的数值的模式

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);

    ………………

}

（2）然后，是计算FlowLayout所占用的空间大小
先申请几个变量：

int lineWidth = 0;//记录每一行的宽度

int lineHeight = 0;//记录每一行的高度

int height = 0;//记录整个FlowLayout所占高度

int width = 0;//记录整个FlowLayout所占宽度

然后開始计算：(先贴出代码，再细讲)

int count = getChildCount();

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

    View child = getChildAt(i);

    measureChild(child,widthMeasureSpec,heightMeasureSpec);

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

    int childWidth = child.getMeasuredWidth() + lp.leftMargin +lp.rightMargin;

    int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;

    if (lineWidth + childWidth > measureWidth){

        //须要换行

        width = Math.max(lineWidth,childWidth);

        height += lineHeight;

        //因为因为盛不下当前控件。而将此控件调到下一行，所以将此控件的高度和宽度初始化给lineHeight、lineWidth

        lineHeight = childHeight;

        lineWidth = childWidth;

    }else{

        // 否则累加值lineWidth,lineHeight取最大高度

        lineHeight = Math.max(lineHeight,childHeight);

        lineWidth += childWidth;

    }

    //最后一行是不会超出width范围的，所以要单独处理

    if (i == count -1){

        height += lineHeight;

        width = Math.max(width,lineWidth);

    }

}

在整个For循环遍历每一个控件时，先计算每一个子控件的宽和高，代码例如以下：

View child = getChildAt(i);

measureChild(child,widthMeasureSpec,heightMeasureSpec);

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

int childWidth = child.getMeasuredWidth() + lp.leftMargin +lp.rightMargin;

int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;

注意我们在计算控件高度和宽度时，要加上上、下、左、右的margin值。
这里一定要注意的是：在调用child.getMeasuredWidth()、child.getMeasuredHeight()之前，一定要调用measureChild(child,widthMeasureSpec,heightMeasureSpec);！！！

。在上篇中我们讲过。在onMeasure()之后才干调用getMeasuredWidth（）获得值。相同。仅仅有调用onLayout()后，getWidth()才干获取值。

以下就是推断当前控件是否换行及计算出最大高度和宽度了：

if (lineWidth + childWidth > measureWidth){

     //须要换行

     width = Math.max(lineWidth,width);

     height += lineHeight;

     //因为因为盛不下当前控件。而将此控件调到下一行。所以将此控件的高度和宽度初始化给lineHeight、lineWidth

     lineHeight = childHeight;

     lineWidth = childWidth;

 }else{

     // 否则累加值lineWidth,lineHeight取最大高度

     lineHeight = Math.max(lineHeight,childHeight);

     lineWidth += childWidth;

 }

因为lineWidth是用来累加当前行的总宽度的，所以当lineWidth + childWidth > measureWidth时就表示已经容不下当前这个控件了。这个控件就须要转到下一行；我们先看else部分，即不换行时怎么办？
在不换行时。计算出当前行的最大高度。同一时候将当前子控件的宽度累加到lineWidth上：

lineHeight = Math.max(lineHeight,childHeight);

lineWidth += childWidth;

当须要换行时，首先将当前行宽lineWidth与眼下的最大行宽width比較计算出最新的最大行宽width，作为当前FlowLayout所占的宽度。还要将行高lineHeight累加到height变量上，以便计算出FlowLayout所占的总高度。

width = Math.max(lineWidth,width);

height += lineHeight;

以下就是又一次初始化lineWidth和lineHeight了。因为换行。那当前控件就是下一行控件的第一个控件，那么当前行的行高就是这个控件的高，当前行的行宽就是这个控件的宽度值了：

lineHeight = childHeight;

lineWidth = childWidth;

非常须要注意的是，当计算最后一行时，因为肯定是不会超过行宽的，而我们在for循环中，当不超过行宽中仅仅做了以下处理：

//上面if语句的else部分

 }else{

     // 否则累加值lineWidth,lineHeight取最大高度

     lineHeight = Math.max(lineHeight,childHeight);

     lineWidth += childWidth;

 }

在这里。我们仅仅计算了行宽和行高，但并没有将其width和height做计算，所以，当是最后一行的最后一个控件时，我们要单独运算width、height：

 //最后一行是不会超出width范围的。所以要单独处理

if (i == count -1){

    height += lineHeight;

    width = Math.max(width,lineWidth);

}

（3）最后，通过setMeasuredDimension（）设置到系统中：

setMeasuredDimension((measureWidthMode == MeasureSpec.EXACTLY) ? measureWidth

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

        : height);

完整的代码例如以下：

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 lineWidth = 0;

   int lineHeight = 0;

   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 childWidth = child.getMeasuredWidth() + lp.leftMargin +lp.rightMargin;

       int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;

       if (lineWidth + childWidth > measureWidth){

           //须要换行

           width = Math.max(lineWidth,width);

           height += lineHeight;

           //因为因为盛不下当前控件，而将此控件调到下一行，所以将此控件的高度和宽度初始化给lineHeight、lineWidth

           lineHeight = childHeight;

           lineWidth = childWidth;

       }else{

           // 否则累加值lineWidth,lineHeight取最大高度

           lineHeight = Math.max(lineHeight,childHeight);

           lineWidth += childWidth;

       }

       //最后一行是不会超出width范围的，所以要单独处理

       if (i == count -1){

           height += lineHeight;

           width = Math.max(width,lineWidth);

       }

   }

   //当属性是MeasureSpec.EXACTLY时，那么它的高度就是确定的，

   // 仅仅有当是wrap_content时。依据内部控件的大小来确定它的大小时。大小是不确定的，属性是AT_MOST,此时，就须要我们自己计算它的应当的大小，并设置进去

   setMeasuredDimension((measureWidthMode == MeasureSpec.EXACTLY) ?

measureWidth

           : width, (measureHeightMode == MeasureSpec.EXACTLY) ?

measureHeight

           : height);

}

3、重写onLayout()——布局全部子控件

在onLayout()中就是一个个布局子控件了，因为控件要后移和换行，所以我们要标记当前控件的left坐标和top坐标，所以我们要先申请以下几个变量：

protected void onLayout(boolean changed, int l, int t, int r, int b) {

    int count = getChildCount();

    int lineWidth = 0;//累加当前行的行宽

    int lineHeight = 0;//当前行的行高

    int top=0,left=0;//当前坐标的top坐标和left坐标

    ………………

}

然后就是计算每一个控件的top坐标和left坐标，然后调用layout（int left,int top,int right,int bottom）来布局每一个子控件，代码例如以下：(先列出来全部代码。然后再细讲)

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

    View child = getChildAt(i);

    MarginLayoutParams lp = (MarginLayoutParams) child

            .getLayoutParams();

    int childWidth = child.getMeasuredWidth()+lp.leftMargin+lp.rightMargin;

    int childHeight = child.getMeasuredHeight()+lp.topMargin+lp.bottomMargin;

    if (childWidth + lineWidth >getMeasuredWidth()){

        //假设换行

        top += lineHeight;

        left = 0;

        lineHeight = childHeight;

        lineWidth = childWidth;

    }else{

        lineHeight = Math.max(lineHeight,childHeight);

        lineWidth += childWidth;

    }

    //计算childView的left,top,right,bottom

    int lc = left + lp.leftMargin;

    int tc = top + lp.topMargin;

    int rc =lc + child.getMeasuredWidth();

    int bc = tc + child.getMeasuredHeight();

    child.layout(lc, tc, rc, bc);

    //将left置为下一子控件的起始点

    left+=childWidth;

}

（1）首先，与onMeasure()一样，先计算出当前孩子的宽和高：

View child = getChildAt(i);

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

int childWidth = child.getMeasuredWidth()+lp.leftMargin+lp.rightMargin;

int childHeight = child.getMeasuredHeight()+lp.topMargin+lp.bottomMargin;

（2）然后依据是否要换行来计算当行控件的top坐标和left坐标：

if (childWidth + lineWidth >getMeasuredWidth()){

    //假设换行,当前控件将跑到下一行。从最左边開始。所以left就是0，而top则须要加上上一行的行高。才是这个控件的top点;

    top += lineHeight;

    left = 0;

     //相同。又一次初始化lineHeight和lineWidth

    lineHeight = childHeight;

    lineWidth = childWidth;

}else{

    // 否则累加值lineWidth,lineHeight取最大高度

    lineHeight = Math.max(lineHeight,childHeight);

    lineWidth += childWidth;

}

在计算好left，top之后。然后分别计算出控件应该布局的上、下、左、右四个点坐标：
须要非常注意的是margin不是padding，margin的距离是不绘制的控件内部的，而是控件间的间隔！

int lc = left + lp.leftMargin;//左坐标+左边距是控件的開始位置

int tc = top + lp.topMargin;//相同，顶坐标加顶边距

int rc =lc + child.getMeasuredWidth();

int bc = tc + child.getMeasuredHeight();

child.layout(lc, tc, rc, bc);

最后。计算下一坐标的位置：因为在换行时才会变更top坐标。所以在一个控件绘制结束时，仅仅须要变更left坐标就可以：

//将left置为下一子控件的起始点

left+=childWidth;

到这里就结束了。onLayout的完整代码例如以下：

protected void onLayout(boolean changed, int l, int t, int r, int b) {

   int count = getChildCount();

   int lineWidth = 0;

   int lineHeight = 0;

   int top=0,left=0;

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

       View child = getChildAt(i);

       MarginLayoutParams lp = (MarginLayoutParams) child

               .getLayoutParams();

       int childWidth = child.getMeasuredWidth()+lp.leftMargin+lp.rightMargin;

       int childHeight = child.getMeasuredHeight()+lp.topMargin+lp.bottomMargin;

       if (childWidth + lineWidth >getMeasuredWidth()){

           //假设换行,当前控件将跑到下一行，从最左边開始，所以left就是0，而top则须要加上上一行的行高，才是这个控件的top点;

           top += lineHeight;

           left = 0;

           //相同。又一次初始化lineHeight和lineWidth

           lineHeight = childHeight;

           lineWidth = childWidth;

       }else{

           lineHeight = Math.max(lineHeight,childHeight);

           lineWidth += childWidth;

       }

       //计算childView的left,top,right,bottom

       int lc = left + lp.leftMargin;

       int tc = top + lp.topMargin;

       int rc =lc + child.getMeasuredWidth();

       int bc = tc + child.getMeasuredHeight();

       child.layout(lc, tc, rc, bc);

       //将left置为下一子控件的起始点

       left+=childWidth;

   }

}