@linux1s1s 2015-05-20T17:49:03.000000Z 字数 5494 阅读 2231

Android 自定义FlowLayout

AndroidView

在展开这个话题前说一下啥是FlowLayout，如果对Java的Swing比较熟悉的话一定不会陌生，就是控件根据ViewGroup的宽，自动的往右添加，如果当前行剩余空间不足，则自动添加到下一行。有点所有的控件都往左飘的感觉，第一行满了，往第二行飘~所以也叫流式布局。Android并没有提供流式布局，但是某些场合中，流式布局还是非常适合使用的，比如关键字标签，搜索热词列表等。

关于这个FlowLayout控件GitHub上有比较不错的源码可以使用，但是会用和会开发这类控件完全是两个层次上的东西，所以有必要看看如何实现FlowLayout。

Case

新建类FlowLayout继承自ViewGroup

重写`generateLayoutParams`方法

重写父类的该方法，返回MarginLayoutParams的实例，这样就为我们的ViewGroup指定了其LayoutParams为MarginLayoutParams。

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

重写`onMeasure`方法(protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec))

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
    /**
     * 负责设置子控件的测量模式和大小 根据所有子控件设置自己的宽和高
     */
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    // 获得它的父容器为它设置的测量模式和大小
    int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
    int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
    int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
    int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
    // 如果是warp_content情况下，记录宽和高
    int width = 0;
    int height = 0;
    /**
     * 记录每一行的宽度，width不断取最大宽度
     */
    int lineWidth = 0;
    /**
     * 每一行的高度，累加至height
     */
    int lineHeight = 0;
    int cCount = getChildCount();
    // 遍历每个子元素
    for (int i = 0; i < cCount; i++)
    {
        View child = getChildAt(i);
        // 测量每一个child的宽和高
        measureChild(child, widthMeasureSpec, heightMeasureSpec);
        // 得到child的lp
        MarginLayoutParams lp = (MarginLayoutParams) child
                .getLayoutParams();
        // 当前子空间实际占据的宽度
        int childWidth = child.getMeasuredWidth() + lp.leftMargin
                         + lp.rightMargin;
        // 当前子空间实际占据的高度
        int childHeight = child.getMeasuredHeight() + lp.topMargin
                          + lp.bottomMargin;
        /**
         * 如果加入当前child，则超出最大宽度，则的到目前最大宽度给width，类加height 然后开启新行
         */
        if (lineWidth + childWidth > sizeWidth)
        {
            width = Math.max(lineWidth, childWidth);// 取最大的
            lineWidth = childWidth; // 重新开启新行，开始记录
            // 叠加当前高度，
            height += lineHeight;
            // 开启记录下一行的高度
            lineHeight = childHeight;
        }
        else
        // 否则累加值lineWidth,lineHeight取最大高度
        {
            lineWidth += childWidth;
            lineHeight = Math.max(lineHeight, childHeight);
        }
        // 如果是最后一个，则将当前记录的最大宽度和当前lineWidth做比较
        if (i == cCount - 1)
        {
            width = Math.max(width, lineWidth);
            height += lineHeight;
        }
    }
    setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth
            : width, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight
            : height);
}

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

重写`onLayout`方法(protected void onLayout(boolean changed, int l, int t, int r, int b))

onLayout中完成对所有childView的位置以及大小的指定

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b)
{
    mAllViews.clear();
    mLineHeight.clear();
    int width = getWidth();
    int lineWidth = 0;
    int lineHeight = 0;
    // 存储每一行所有的childView
    List<View> lineViews = new ArrayList<>();
    int cCount = getChildCount();
    // 遍历所有的孩子
    for (int i = 0; i < cCount; i++)
    {
        View child = getChildAt(i);
        MarginLayoutParams lp = (MarginLayoutParams) child
                .getLayoutParams();
        int childWidth = child.getMeasuredWidth();
        int childHeight = child.getMeasuredHeight();
        // 如果已经需要换行
        if (childWidth + lp.leftMargin + lp.rightMargin + lineWidth > width)
        {
            // 记录这一行所有的View以及最大高度
            mLineHeight.add(lineHeight);
            // 将当前行的childView保存，然后开启新的ArrayList保存下一行的childView
            mAllViews.add(lineViews);
            lineWidth = 0;// 重置行宽
            lineViews = new ArrayList<>();
        }
        /**
         * 如果不需要换行，则累加
         */
        lineWidth += childWidth + lp.leftMargin + lp.rightMargin;
        lineHeight = Math.max(lineHeight, childHeight + lp.topMargin
                                          + lp.bottomMargin);
        lineViews.add(child);
    }
    // 记录最后一行
    mLineHeight.add(lineHeight);
    mAllViews.add(lineViews);
    int left = 0;
    int top = 0;
    // 得到总行数
    int lineNums = mAllViews.size();
    for (int i = 0; i < lineNums; i++)
    {
        // 每一行的所有的views
        lineViews = mAllViews.get(i);
        // 当前行的最大高度
        lineHeight = mLineHeight.get(i);
        // 遍历当前行所有的View
        for (int j = 0; j < lineViews.size(); j++)
        {
            View child = lineViews.get(j);
            if (child.getVisibility() == View.GONE)
            {
                continue;
            }
            MarginLayoutParams lp = (MarginLayoutParams) child
                    .getLayoutParams();
            //计算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 += child.getMeasuredWidth() + lp.rightMargin
                    + lp.leftMargin;
        }
        left = 0;
        top += lineHeight;
    }
}

注意上面代码性能上有问题，在L12 会抛出一个警告：Avoid object allocations during draw/layout operations (preallocate and reuse instead) 关于这个问题读者可以自行解决，这里不再展开来说。

CaseTest

先写个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>

flag_01.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#7690A5" >
    </solid>
    <corners android:radius="5dp"/>
    <padding
        android:bottom="2dp"
        android:left="10dp"
        android:right="10dp"
        android:top="2dp" />
</shape>

UI布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#E1E6F6"
android:orientation="vertical" >
<com.test.FlowLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >
    <TextView
        style="@style/text_flag_01"
        android:text="Welcome" />
    <TextView
        style="@style/text_flag_01"
        android:text="IT工程师" />
    <TextView
        style="@style/text_flag_01"
        android:text="学习ing" />
    <TextView
        style="@style/text_flag_01"
        android:text="恋爱ing" />
    <TextView
        style="@style/text_flag_01"
        android:text="挣钱ing" />
    <TextView
        style="@style/text_flag_01"
        android:text="努力ing" />
    <TextView
        style="@style/text_flag_01"
        android:text="I thick i can" />
</com.test.FlowLayout>
</LinearLayout>

此处输入图片的描述

另外对于文字比较枯燥的话可以看该大牛博主的视频教程：

此篇博客转载自CSDN-HongYang的博客，在此向该大牛致敬

Android 自定义FlowLayout

Case

重写generateLayoutParams方法

重写onMeasure方法(protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec))

重写onLayout方法(protected void onLayout(boolean changed, int l, int t, int r, int b))

CaseTest

内容目录

重写`generateLayoutParams`方法

重写`onMeasure`方法(protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec))

重写`onLayout`方法(protected void onLayout(boolean changed, int l, int t, int r, int b))