Android 流式布局

时间 2019-11-16

原文原文链接

双十一到了，做为一个程序员除了买（bai）买(jia)买(duo)买(shou)以外，也不要忘了学习，今天咱们来看Android的流式布局。所谓流式布局指的是ViewGroup中同一行的宽度不足以容纳下一个子view时，进行换行处理，而不须要考虑子view的大小，每一行的高度以其中最高者为准。Talk is cheap, Show you the code。java

自定义ViewGroup的三种方式：

经过继承现有的ViewGroup(好比LinearLayout)重写 onMeasure() 来修改已有的 ViewGroup的尺寸,好比你须要一个正方形的LinearLayout，你就能够在onMeasure()中先调用super.onMeasure()测量出原始高度，而后经过getMesureHeight(),getMesuseWidth()得到原始宽高，将他们的宽高设为同样就行了，调用setMeasuredDimension()就能够了，这么样是否是很简（ma）单(fan)；
重写 onMeasure() 来全新定制自定义 View 的尺寸,一样也是onMeasure()中，这时你就能够根据本身须要是否调用super.onMeasure()，而后根据本身的算法，得出宽高，调用setMeasuredDimension()就能够了；
重写 onMeasure() 和 onLayout() 来全新定制自定义 ViewGroup 的内部布局，这种方式不仅仅须要测量自己本身的宽高，还要根据须要计算每一个子view的位置，稍微复杂一些，本次的流式布局就是经过这种方式实现的。

实现过程：

下面这张图是扔物线大神视频截图，这里直接拿来用，别顶，要脸！！android

简单讲解一下整个过程：git

大致上分为测量尺寸过程以及布局过程程序员

测量尺寸过程：ViewGroup 的mesure()方法被父View调用，进而调用到 onMeasure() ，在onMeasuse()中会调用全部子 View 的 measure() 让它们进行自我测量，并根据子 View 计算出的但愿的尺寸来计算出它们的实际尺寸和位置（注意是但愿的尺寸，不是最终尺寸，好比ViewGroup 的宽为100dp,有一个子View的宽度为200dp,显然子View最多也只能是100dp的宽度）而后保存。同时，它也会根据子 View 的尺寸和位置来计算出本身的尺寸而后保存，到这里咱们就肯定了ViewGroup自身的但愿尺寸，以及它的子View的但愿尺寸，那么，具体字View怎么摆放呢？这就到了下一个阶段，布局阶段。github

布局过程：VIewGrouplayout() 方法被父 View 调用，在 layout() 中它会取得父 View 传进来的本身的位置和尺寸，而且调用 onLayout() 来进行实际的内部布局ViewGroup 在 onLayout() 中会调用本身的全部子 View 的 layout() 方法，把它们的尺寸和位置传给它们，让子View完成布局。算法

光说不练假把式，Talk is cheap, Show you the code。

package com.example.administrator.xflowlayout;

/**
 * Created by SharksLee on 2016/07/19
 */

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

import java.util.HashMap;
import java.util.Map;

/**
 * @SharksLee lishaojie
 */
public class XFlowLayout extends ViewGroup {
    private int childHorizontalSpace;
    private int childVerticalSpace;
    private Map<Object, Location> mLocationMap;

    public XFlowLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray attrArray = context.obtainStyledAttributes(attrs, R.styleable.XLFlowLayout);
        mLocationMap = new HashMap<>();
        if (attrArray != null) {
            childHorizontalSpace = attrArray.getDimensionPixelSize(R.styleable.XLFlowLayout_childHorizontalSpace, 0);
            childVerticalSpace = attrArray.getDimensionPixelSize(R.styleable.XLFlowLayout_childVerticalSpace, 0);
            attrArray.recycle();
        }
    }

    @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 LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    }

    /**
     * 负责设置子控件的测量模式和大小 根据全部子控件设置本身的宽和高
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (mLocationMap != null && !mLocationMap.isEmpty()) {
            mLocationMap.clear();
        }
        // 得到它的父容器为它设置的测量模式和大小
        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 count = getChildCount();
        int left = getPaddingLeft();
        int top = getPaddingTop();
        // 遍历每一个子元素
        for (int i = 0; i < count; i++) {
            View child = getChildAt(i);
            if (child.getVisibility() == GONE)
                continue;
            // 测量每个child的宽和高
            measureChild(child, widthMeasureSpec, heightMeasureSpec);
            // 获得child的lp
            LayoutParams lp = child.getLayoutParams();
            // 当前子空间实际占据的宽度
            int childWidth = child.getMeasuredWidth() + childHorizontalSpace;
            // 当前子空间实际占据的高度
            int childHeight = child.getMeasuredHeight() + childVerticalSpace;

            if (lp != null && lp instanceof MarginLayoutParams) {
                MarginLayoutParams params = (MarginLayoutParams) lp;
                childWidth += params.leftMargin + params.rightMargin;
                childHeight += params.topMargin + params.bottomMargin;
            }

            /**
             * 若是加入当前child的宽度，超出了最大宽度，则的到目前最大宽度给width，累加height 而后开启新行
             */
            if (lineWidth + childWidth > sizeWidth - getPaddingLeft() - getPaddingRight()) {
                width = Math.max(lineWidth, childWidth);// 取最大的
                lineWidth = childWidth; // 从新开启新行，开始记录
                // 叠加当前高度，
                height += lineHeight;
                // 开启记录下一行的高度
                lineHeight = childHeight;
                mLocationMap.put(child, new Location(left, top + height, childWidth + left - childHorizontalSpace, height + 

child.getMeasuredHeight() + top));
            } else {// 不然累加值lineWidth,lineHeight取最大高度
                mLocationMap.put(child, new Location(lineWidth + left, top + height, lineWidth + childWidth - 

childHorizontalSpace + left, height + child.getMeasuredHeight() + top));
                lineWidth += childWidth;
                lineHeight = Math.max(lineHeight, childHeight);
            }
        }
        width = Math.max(width, lineWidth) + getPaddingLeft() + getPaddingRight();
        height += lineHeight;
        sizeHeight += getPaddingTop() + getPaddingBottom();
        height += getPaddingTop() + getPaddingBottom();
        setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth : width, (modeHeight == MeasureSpec.EXACTLY) ? 

sizeHeight : height);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int count = getChildCount();
        for (int i = 0; i < count; i++) {
            View child = getChildAt(i);
            if (child.getVisibility() == GONE)
                continue;
            Location location = mLocationMap.get(child);
            child.layout(location.left, location.top, location.right, location.bottom);
        }
    }

    /**
     * 记录子控件的坐标
     */
    public static class Location {
        public int left;
        public int top;
        public int right;
        public int bottom;

        Location(int left, int top, int right, int bottom) {
            this.left = left;
            this.top = top;
            this.right = right;
            this.bottom = bottom;
        }

    }
}

复制代码

简单讲解一下思路：bash

在onMeasure()方法中，经过遍历测量没一个字View的宽高，若是加入当前child宽度，超出了最大宽度，测获得目前最大宽度给width，width的做用是用来保存各行中最大宽度的，累加height 而后开启新行。最后ide

setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth : width, (modeHeight == MeasureSpec.EXACTLY) ? 
复制代码

注意一下modeWidth == MeasureSpec.EXACTLY表示宽度是在ViewGroup测量以前就已经肯定了的，好比布局中的layout_width="100dp"或者layout_width="match_parent",这种状况下直接布局

int sizeWidth = MeasureSpec.getSize(widthMeasureSpec)就能够获取到ViewGroup的宽度，不须要遍历子View计算。注意这里有个小技巧，我用mLocationMap在测量子View尺寸的时候就把它们位置信息保存起来，因此onLayout()方法很是简单。学习

运行结果如图：

今天双十一，媳妇电商公司通宵才有时间码代码，吹牛逼，有媳妇的人过了一个纯粹的光棍节，/心塞！但至少我是有媳妇的人，/得意脸。

最后祝愿你们节日快乐，码农早日脱单，有钱也有机会清空败家娘们的购物车/坏笑。

传送门：github.com/SharksLee/F…

喜欢的给个星吧！