自定义控件之视图篇（二）—— FlowLayout自适应容器实现

前言

• 自定义控件之视图篇（一）—— 测量与布局

• 自定义控件之视图篇（二）—— FlowLayout自适应容器实现

经过上篇的铺垫，这篇就开始正式开始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="IT工程师"              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()重写

提取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所占的位置大小。

重写onMeasure()

这里就要重写onMeasure()函数，在其中计算所有当前Container所占的大小。要做FlowLayout，首先涉及下面几个问题：

• 何时换行

从效果图中可以看到，FlowLayout的布局是一行行的，如果当前行已经放不下下一个控件，那就把这个控件移到下一行显示。所以我们要有个变量来计算当前行已经占据的宽度，以判断剩下的空间是否还能容得下下一个控件。

• 如何得到FlowLayout的宽度

FlowLayout的宽度是所有行宽度的最大值，所以我们要记录下每一行的所占据的宽度值，进而找到所有值中的最大值。

• 如何得到FlowLayout的高度

很显然，FlowLayout的高度是每一行高度的总和，而每一行的高度则是取该行中所有控件高度的最大值。

原理到这里就讲完了，下面看看代码。

首先，刚进来的时候是利用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);      ………………  }  

然后，是计算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;  

注意我们在计算控件高度和宽度时，要加上marginTop、marginBottom、marginLeft和marginRight的值。

这里一定要注意的是：在调用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);  }  

最后，通过setMeasuredDimension(int, int)设置到系统中：

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

重写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;  } 

首先，与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;

然后根据是否要换行来计算当行控件的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;    }}

好啦，有关FlowLayout的系列文章到这里就结束了，这里主要涉及到ViewGroup的绘制流程的相关知识，希望大家能掌握。

原文链接：点击这里