先看效果图
GIF.gif
实现思路
作为一个容器，我们只需要重写measure方法确定自身和子view的宽高，重写onLayout()方法确定子view的位置。
1.确定自身的宽高
在measure的时候循环测量子view的宽度并累加，当累加值大于自身的宽度则换行。此时为下一行开始，重复上面步骤，最终得到所有行的宽度，和高度，取最大的行宽为自身的宽度，高度累加为自身的高度，
2.确定子view的位置：=
循环放置子view，每放置一个判断容器剩余宽度是否足够放下下一个子view，不够就换行。
具体实现
由于代码注释很详细，我就不过多的阐述。
package com.demo.nick.resumelxz.views;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.List;
/**
* Created by Nick on 2017/9/8.
*/
public class FlowLayout extends ViewGroup {
private static final String TAG = "FlowLayout";
//所有行的集合，里面是每一行的view的集合。
private List<List<View>> mAllViews = new ArrayList<>();
//每一行的高度的集合
private List<Integer> mLineHeights = new ArrayList<>();
public FlowLayout(Context context) {
this(context, null);
}
public FlowLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//模式
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
int width = 0;//子view的总宽
int height = 0;//子view的总高
//每一行的高度与宽度
int lineWidth = 0;
int lineHeight = 0;
int cCount = getChildCount(); //得到子view的个数
for (int i = 0; i < cCount; i++) {//循环测量子view 并得到Warp_Content下的自身的宽高
View child = getChildAt(i);
measureChild(child, widthMeasureSpec, heightMeasureSpec);
//得到layoutparams
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
//子 view的宽度
int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
//子VIEW的高度
int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
Log.e(TAG, "childHeight: "+childHeight );
if (lineWidth + childWidth > measureWidth - getPaddingLeft() - getPaddingLeft()) { //换行
//得到该行的总宽
width = Math.max(width, lineWidth);
//新行初始宽度为0，高度叠加
lineWidth = childWidth;
height += lineHeight;
lineHeight=childHeight;//换行后，此时的行高为当前的子view的行高，目前只有一个子view。-----开始没有注意这个问题，导致高度总是有点偏差。
} else { //不换行
lineWidth += childWidth;
lineHeight = Math.max(lineHeight, childHeight);
}
//到达最后一个
if (i == cCount-1) {
width = Math.max(lineWidth, childWidth);
height += lineHeight;
}
}
//设置自身宽高。如果是AT_MOST模式。则返回子view的总宽和总高，并且要加上padding
Log.e(TAG, "模式: "+heightMode);
//注意！！不能这么判断AT_MOST，这也是我疑问的地方，上面答应的值是0，也就是UNSPECIFIED模式，很不解。
// setMeasuredDimension(widthMode == MeasureSpec.AT_MOST ? width + getPaddingLeft() + getPaddingRight() : measureWidth,
// heightMode == MeasureSpec.AT_MOST ? height + getPaddingTop() + getPaddingBottom() : measureHeight);
//应该这样判断。
setMeasuredDimension(widthMode == MeasureSpec.EXACTLY ? measureWidth :width + getPaddingLeft() + getPaddingRight() ,
heightMode == MeasureSpec.EXACTLY ?measureHeight: height + getPaddingTop() + getPaddingBottom() );
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
mAllViews.clear();
mLineHeights.clear();
int width = getWidth() - getPaddingLeft() - getPaddingRight();//Group总宽度 注意要减去padding
int lineWidth = 0;//当前子view的行宽
int lineHeight = 0;//当前行子view的行高
List<View> lineView = new ArrayList<>();//每一行的子view的集合
int count = getChildCount();//子view的数量
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int childWidth = child.getMeasuredWidth();
int childHeight = child.getMeasuredHeight();
if (childWidth + lineWidth + lp.leftMargin + lp.rightMargin > width) {//当前宽度不够，换行
mLineHeights.add(lineHeight);//记录lineHeight
mAllViews.add(lineView);
//重置行宽和行高
lineWidth = 0;
lineHeight = childHeight + lp.topMargin + lp.bottomMargin;
lineView = new ArrayList<>();//这里为什么不用clear 因为lineview要被添加进mAllviews里面，如果清空了，则只有最后一行会显示
}
lineWidth += childWidth + lp.leftMargin + lp.rightMargin;
lineHeight = Math.max(lineHeight, childHeight + lp.topMargin + lp.bottomMargin);//取当前行最高的子view的高度为当前行高。
lineView.add(child);
}//for end
//上面的循环并没有添加进最后一行的子view,在这里添加
mLineHeights.add(lineHeight);
mAllViews.add(lineView);
//设置子view的位置 第一个从（0.0)开始 注意加上padding
int left = getPaddingLeft() + 0;
int top = getPaddingTop() + 0;
//行数
int lineNum = mAllViews.size();
for (int i = 0; i < lineNum; i++) {
lineView = mAllViews.get(i);
lineHeight = mLineHeights.get(i);
//当前行进行子view的布局
for (int j = 0; j < lineView.size(); j++) {
View child = lineView.get(j);
if (child.getVisibility() == GONE) { //gone就不用给它设置位置了
continue;
}
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
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.leftMargin + lp.rightMargin;
}
//换行，初始话坐标
left = getPaddingLeft();
top += lineHeight;
}
}
/**
* 与当前 ViewGroup对应的LayoutParams
*
* @param attrs
* @return
*/
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(), attrs);
}
}
注意
image.png
我们的容器肯定要支持margin的，这时候需要重写generateLayoutParams()方法，使其返回一个MarginLayoutParams。别的layoutparams是没有margin的属性的。
2.这里很重要，，，之前用的方式一，导致嵌套scrollview不能滑动，显示
image.png
