Android FlowLayout流式布局打造热门标签（高仿抖音热搜）

 

需要先学习下面2个内容

1.已经基本给大家介绍了如何自定义ViewGroup，如果你还不了解

2.宽高的计算

 

一、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>

--------------------- 

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

 

首先得到其父容器传入的测量模式和宽高的计算值，然后遍历所有的childView，使用measureChild方法对所有的childView进行测量。然后根据所有childView的测量得出的宽和高得到该ViewGroup如果设置为wrap_content时的宽和高。最后根据模式，如果是MeasureSpec.EXACTLY则直接使用父ViewGroup传入的宽和高，否则设置为自己计算的宽和高

--------------------- 

要做FlowLayout,首先涉及下面几个问题：

（1）何时换行(计算所有控件的宽度和屏幕宽度比较，还有margin值)

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

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

（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所占宽度

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

--------------------- 

在整个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()才能获取值。

--------------------- 

注意我们在计算控件高度和宽度时，要加上上、下、左、右的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)

--------------------- 

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坐标

    ………………

}

 

参考博客：

https://blog.csdn.net/lmj623565791/article/details/38352503（张鸿翔）

https://blog.csdn.net/harvic880925/article/details/470354559（启舰）