自定义流式布局（应用：热门标签，照片）

流式布局（应用：热门标签，照片）

自定义ViewGroup

1.onMeasure:测量子View的宽和高，设置自己的宽和高

onMeasure根据子View的布局文件，为子View设置测量模式和测量值。

测量：包括测量模式和测量值

测量模式包裹以下三种模式：

1.EXACTLY:是指显示指定大小时，例如：100dp,match_parent

2.AT_MOST:wrap_content

3.UNSPCIFIED:子View想要多大就给他多大，一般出现在ScroolView中，很少见

2.onLayout:设置子View的位置

ViewGroup会对应一个LayoutParams

子View.getLayoutParams()获得的是父控件的LayoutParameters

这里我们只需要知道子空间之间的间距，所以我们只需要指定我们LayoutParams为MarginLayoutParameters即可，

当然在实际开发中我们应该根据需要来选择LayoutParams，也可以自定义LayoutParams。

效果：



代码如下：

package com.example.liaoli.customflowlayout.view;

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

import java.util.ArrayList;
import java.util.List;

/**
* Created by liaoli on 2015/11/16.
*/
public class FlawLayout extends ViewGroup {
public FlawLayout(Context context) {
super(context);
}

public FlawLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}

public FlawLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}

/**
* 測量子類的寬和高，以便確定自己的寬和高
* @param widthMeasureSpec
* @param heightMeasureSpec
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);

int mWidth = MeasureSpec.getSize(widthMeasureSpec);
int widthMeasureMode = MeasureSpec.getMode(widthMeasureSpec);

int mHeight = MeasureSpec.getSize(heightMeasureSpec);
int heightMeasureMode = MeasureSpec.getMode(heightMeasureSpec);

int childCount = getChildCount();

//記錄wrap_content時候FlawLayout的寬和高
int wrapContentWidth = 0;
int wrapContentHeight= 0;

//記錄每一行的寬度和高度
int lineWidth = 0;
int lineHeight = 0;
for(int i = 0;i < childCount;i++){
View child = getChildAt(i);

//測量每一個子View的寬和高
measureChild(child, widthMeasureSpec, heightMeasureSpec);

MarginLayoutParams layoutParams = (MarginLayoutParams) child.getLayoutParams();

//得到計算子View佔據的寬度和高度

int childWidthInParent = child.getMeasuredWidth() + layoutParams.leftMargin + layoutParams.rightMargin;
int childHeightInParent = child.getMeasuredHeight() + layoutParams.topMargin + layoutParams.bottomMargin;

if (lineWidth + childWidthInParent > mWidth - getPaddingLeft() - getPaddingRight()) {

//此時要換行,行的高度增加
wrapContentHeight += lineHeight;

//此時一行的寬度已經可以確定，如果行寬比原來的最大行寬大，則寬度變為大的
wrapContentWidth = Math.max(lineWidth,wrapContentWidth);

//換行后充值行寬和行高
lineHeight = childHeightInParent;
lineWidth = childWidthInParent;

}else {

//不換行，本行寬度增加
lineWidth += childWidthInParent;
//不換行，本行高度有可能變化
lineHeight = Math.max(lineHeight,childHeightInParent);
}

if(i == childCount -1){
//如果是最後一個Child,要將此次View所在的行高加上
wrapContentHeight += lineHeight;
//比較最後一行與之前的最大寬度進行比較，去打的作為wrap_content的寬度
wrapContentWidth = Math.max(lineWidth,wrapContentWidth);
}

}

setMeasuredDimension(widthMeasureMode == MeasureSpec.EXACTLY ? mWidth:wrapContentWidth+getPaddingLeft()+getPaddingRight(),
heightMeasureMode == MeasureSpec.EXACTLY ? mHeight:wrapContentHeight+getPaddingTop() + getPaddingBottom());

}

List<List<View>> allchildViews =  new ArrayList<>();
List<Integer> lineHeights = new ArrayList<>();

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {

allchildViews.clear();
lineHeights.clear();

int mwidth = getWidth();

//記錄每一行的寬度和高度
int lineWidth = 0;
int lineHeight = 0;

List<View> lineViews = new ArrayList<>();
int childCount = getChildCount();

for(int i = 0 ; i < childCount ; i++){

View child = getChildAt(i);

MarginLayoutParams layoutParams = (MarginLayoutParams) child.getLayoutParams();

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

int childHeight = child.getMeasuredHeight()+ layoutParams.topMargin + layoutParams.bottomMargin;;

if(lineWidth + childWidth > mwidth -getPaddingLeft() - getPaddingRight()){

//换行
lineHeights.add(lineHeight);

lineWidth = 0;
lineHeight = childHeight;
allchildViews.add(lineViews);

lineViews = new ArrayList<>();

}

//不换行
lineWidth += childWidth;
lineHeight = Math.max(childHeight,lineHeight);
lineViews.add(child);

if(i == childCount -1){
//要將此次View所在的行高加上最后一行的行高
lineHeights.add(lineHeight);
//左后一行的view
allchildViews.add(lineViews);
}

}

int left = getPaddingLeft();
int top = getPaddingTop();

int lineNumbers = lineHeights.size();

for(int i = 0 ; i < lineNumbers ; i++){

lineViews = allchildViews.get(i);
lineHeight = lineHeights.get(i);

for(int j = 0 ; j < lineViews.size() ; j++){
View child = lineViews.get(j);

if(child.getVisibility() == View.GONE){
continue;
}

MarginLayoutParams layoutParams = (MarginLayoutParams) child.getLayoutParams();

int childTopInparent = top + layoutParams.topMargin;

int childBottomInparent = top + layoutParams.topMargin +child.getMeasuredHeight();

int childLeftInparent = left + layoutParams.leftMargin;

int childRightInparent = left + layoutParams.leftMargin + child.getMeasuredWidth() ;

child.layout(childLeftInparent,childTopInparent,childRightInparent,childBottomInparent);

//下一个View的left其实点
left += layoutParams.leftMargin + child.getMeasuredWidth()+ layoutParams.rightMargin;
}

//每一行完毕后，left又回到最左边，二top则增加了一行
left = getPaddingLeft();
top += lineHeight;
}
}

/**
* 指定我們自己想要的LayoutParams，如果現有的LayoutParams不能滿足需求，我們科以自定義
*/
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(),attrs);
}
}

源码：http://pan.baidu.com/s/1jG1yrvo