android 仿快递步骤_【干货速递，建议收藏】Android 流式布局，一篇搞定

今天我们来看Android的流式布局。 所谓流式布局指的是ViewGroup中同一行的宽度不足以容纳下一个子view时，进行换行处理，而不需要考虑子view的大小，每一行的高度以其中最高者为准。

Talk is cheap, Show you the code。

自定义ViewGroup的三种方式：通过继承现有的ViewGroup(比如LinearLayout)重写 onMeasure() 来修改已有的 ViewGroup的尺寸,比如你需要一个正方形的LinearLayout，你就可以在onMeasure()中先调用super.onMeasure()测量出原始高度，然后通过getMesureHeight(),getMesuseWidth()获得原始宽高，将他们的宽高设为一样就好了，调用setMeasuredDimension()就可以了，这么样是不是很简(ma)单(fan)；

重写 onMeasure() 来全新定制自定义 View 的尺寸,同样也是onMeasure()中，这时你就可以根据自己需要是否调用super.onMeasure()，然后根据自己的算法，得出宽高，调用setMeasuredDimension()就可以了；

重写 onMeasure() 和 onLayout() 来全新定制自定义 ViewGroup 的内部布局，这种方式不单单需要测量本身自己的宽高，还要根据需要计算每个子view的位置，稍微复杂一些，本次的流式布局就是通过这种方式实现的。

实现过程：

下面这张图是扔物线大神视频截图，这里直接拿来用，别顶，要脸！！简单讲解一下整个过程：

大体上分为测量尺寸过程以及布局过程

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

布局过程：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 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;

}

}

}

简单讲解一下思路：

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

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()方法非常简单。

运行结果如图：搞定！