FlowLayout，自适应内容的Layout，当内容到达右端时会自动换行，先看效果。
1608741472944[1].gif
使用：
1.给FlowLayout动态加入View
for (int i = 0; i < 9; i++) {
ViewGroup.MarginLayoutParams marginLayoutParams = new ViewGroup.MarginLayoutParams(190, ViewGroup.LayoutParams.WRAP_CONTENT);
if (i == 2) {
marginLayoutParams.height = 200;
} else {
marginLayoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT;
}
Button button = new Button(getContext());
button.setBackgroundResource(R.drawable.shape_button);
button.setText("item: " + i);
mBinding.flowLayout.addView(button, marginLayoutParams);
}
2.也可以直接在xml文件中写死
<com.snowice.xui_lib.widget.flowlayout.FlowLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:horizontalGravity="left">
<Button
android:id="@+id/btn_setting_gravity_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginHorizontal="5dp"
android:text="left" />
...
</com.snowice.xui_lib.widget.flowlayout.FlowLayout>
实现过程：
1.自定义属性，只有两个，水平和竖直方向的Gravity
<declare-styleable name="FlowLayout">
<attr name="horizontalGravity" format="enum">
<enum name="left" value="1" />
<enum name="right" value="2" />
<enum name="center" value="3" />
<enum name="both" value="4" /><!--左右两端对齐，中间间隔相同 [0 0 0 0]-->
<enum name="gap" value="5" /><!--间隔相同 [ 0 0 0 0 ]-->
<enum name="margin" value="6" /><!--view平分空间，[ 0 0 0 0 ]-->
</attr>
<attr name="verticalGravity" format="enum">
<enum name="top" value="1" />
<enum name="center" value="2" />
<enum name="bottom" value="3" />
</attr>
</declare-styleable>
2.代码
package com.snowice.xui_lib.widget.flowlayout;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import com.snowice.xui_lib.R;
import java.util.ArrayList;
public class FlowLayout extends ViewGroup {
//水平方向的Gravity
public static final int GRAVITY_H_LEFT = 1;
public static final int GRAVITY_H_RIGHT = 2;
public static final int GRAVITY_H_CENTER = 3;
public static final int GRAVITY_H_BOTH = 4;
public static final int GRAVITY_H_GAP = 5;
public static final int GRAVITY_H_MARGIN = 6;
//竖直方向的Gravity
public static final int GRAVITY_V_TOP = 1;
public static final int GRAVITY_V_CENTER = 2;
public static final int GRAVITY_V_BOTTOM = 3;
private int mHorGravity;
private int mVerGravity;
public FlowLayout(Context context) {
this(context, null);
}
public FlowLayout(Context context, AttributeSet attrs) {
this(context, attrs, R.attr.FlowLayoutStyle);
}
public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
this(context, attrs, defStyleAttr, 0);
}
/**
* @param context 上下文
* @param attrs xml定义的属性集合，包含（key-value）
* @param defStyleAttr 系统当前Theme下默认的属性集合（包含key-value）
* @param defStyleRes 备用的style（包含key-value）
*/
public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(context, attrs);
}
private void init(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.FlowLayout);
mHorGravity = typedArray.getInt(R.styleable.FlowLayout_horizontalGravity, GRAVITY_H_LEFT);
mVerGravity = typedArray.getInt(R.styleable.FlowLayout_verticalGravity, GRAVITY_V_TOP);
typedArray.recycle();
}
@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);
Log.e("onMeasure", "sizeWidth: " + sizeWidth + ", sizeHeight: " + sizeHeight);
//最终的宽高
int finalWidth = 0;
int finalHeight = 0;
int lineWidth = 0;
int lineHeight = 0;
for (int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i);
measureChild(child, widthMeasureSpec, heightMeasureSpec);
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int childRealWidth = lp.leftMargin + lp.rightMargin + child.getMeasuredWidth();
int childRealHeight = lp.topMargin + lp.bottomMargin + child.getMeasuredHeight();
if (childRealWidth + lineWidth <= sizeWidth - getPaddingLeft() - getPaddingRight()) {
//不换行
lineWidth += childRealWidth;
lineHeight = Math.max(lineHeight, childRealHeight);
} else {
//换行时，会获得上一行的宽高
//宽度取最大值
finalWidth = Math.max(finalWidth, lineWidth);
//高度累加
finalHeight += lineHeight;
//重置行宽和行高
lineWidth = childRealWidth;
lineHeight = childRealHeight;
}
//如果只有一行或循环到了末尾一行，则该行高度得不到统计，需要另外计算
if (i == getChildCount() - 1) {
finalHeight += lineHeight;
}
}
Log.e("onMeasure", "finalWidth: " + finalWidth + ", finalHeight: " + finalHeight);
setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY ? sizeWidth : finalWidth + getPaddingLeft() + getPaddingRight()),
(modeHeight == MeasureSpec.EXACTLY ? sizeHeight : finalHeight + getPaddingTop() + getPaddingBottom())
);
}
//每一行的views，临时存储使用
private ArrayList<View> lineViewsList;
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
Log.e("onLayout", "width: " + (r - l));
Log.e("onLayout", "height: " + (b - t));
int width = r - l - getPaddingLeft() - getPaddingRight();
// int height = getHeight() - getPaddingTop() - getPaddingBottom();
int childCount = getChildCount();
int countLineHeight = getPaddingTop();//对高度累加
int lineWidth = 0;
int lineHeight = 0;
if (lineViewsList == null) {
lineViewsList = new ArrayList<>();
} else {
lineViewsList.clear();
}
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int childRealWidth = lp.leftMargin + lp.rightMargin + child.getMeasuredWidth();
int childRealHeight = lp.topMargin + lp.bottomMargin + child.getMeasuredHeight();
if (childRealWidth + lineWidth <= width) {
// 不换行
// 将同一行的View添加到容器中
lineViewsList.add(child);
// 行宽累加，行高取最大的值
lineWidth += childRealWidth;
lineHeight = Math.max(lineHeight, childRealHeight);
} else {
// 换行
// 计算上一行所有View的位置
layoutChildren(width, countLineHeight, getPaddingLeft(), lineWidth, lineHeight, lineViewsList);
lineViewsList.clear();
lineViewsList.add(child);
//累加高度
countLineHeight += lineHeight;
child.layout(lp.leftMargin,
countLineHeight + lp.topMargin,
child.getMeasuredWidth() + lp.leftMargin,
countLineHeight + lp.topMargin + child.getMeasuredHeight());
//重置行宽和行高
lineWidth = childRealWidth;
lineHeight = childRealHeight;
}
//如果只有一行或循环到了末尾一行，则该行高度得不到统计，需要另外计算
if (i == childCount - 1) {
layoutChildren(width, countLineHeight, getPaddingLeft(), lineWidth, lineHeight, lineViewsList);
lineViewsList.clear();
}
}
}
/**
* 为一行内所有的View执行layout方法
*
* @param totalWidth 一行可用的总宽度，已经减去了paddingLeft和paddingRight
* @param top 这一行的最顶部位置
* @param offset 偏移位置，即据左端的距离，为paddingLeft
* @param lineWidth 所有View宽度相加（包含marginLeft和marginRight）
* @param lineHeight 这一行所有View的高度最大值，该值作为该行的行高
* @param viewsList 所有View的集合
*/
private void layoutChildren(int totalWidth, int top, int offset, int lineWidth, int lineHeight, ArrayList<View> viewsList) {
/*
gravity的意思大致如下图所示：
left: [0000 ]
right: [ 0000]
center: [ 0000 ]
both: [0 0 0 0]
gap: [ 0 0 0 0 ]
margin: [ 0 0 0 0 ]
*/
//只要确定第一个View的位置，以及View之间的间隔，就能确定每一个View的位置
//start：第一个View的起始位置
//gap：View之间的间隔
int start = 0;
int gap = 0;
if (mHorGravity == GRAVITY_H_LEFT) {
start = 0;
gap = 0;
} else if (mHorGravity == GRAVITY_H_RIGHT) {
start = totalWidth - lineWidth;
gap = 0;
} else if (mHorGravity == GRAVITY_H_CENTER) {
start = (totalWidth - lineWidth) / 2;
gap = 0;
} else if (mHorGravity == GRAVITY_H_BOTH) {
start = 0;
if (viewsList.size() == 1) {
//只有一个View时，和GRAVITY_LEFT一样
gap = 0;
} else {
gap = (totalWidth - lineWidth) / (viewsList.size() - 1);
}
} else if (mHorGravity == GRAVITY_H_GAP) {
int i = (totalWidth - lineWidth) / (viewsList.size() + 1);
start = i;
gap = i;
} else if (mHorGravity == GRAVITY_H_MARGIN) {
int i = (totalWidth - lineWidth) / viewsList.size();
start = i / 2;
gap = i;
}
start += offset;
//startX：这一行每一个View的水平方向的起始位置
int startX = start;
for (int i = 0; i < viewsList.size(); i++) {
View child = viewsList.get(i);
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int realHeight = lp.topMargin + lp.bottomMargin + child.getMeasuredHeight();
//竖直方向上不同Gravity对应的起始位置不同
int layoutTop = 0;
if (mVerGravity == GRAVITY_V_TOP) {
layoutTop = top + lp.topMargin;
} else if (mVerGravity == GRAVITY_V_CENTER) {
layoutTop = top + lp.topMargin + (lineHeight - realHeight) / 2;
} else if (mVerGravity == GRAVITY_V_BOTTOM) {
layoutTop = top + lp.topMargin + (lineHeight - realHeight);
}
child.layout(startX + lp.leftMargin,
layoutTop,
startX + lp.leftMargin + child.getMeasuredWidth(),
layoutTop + child.getMeasuredHeight());
//计算下一个View的起始位置
startX += lp.leftMargin + lp.rightMargin + child.getMeasuredWidth() + gap;
}
}
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(), attrs);
}
public int getHorGravity() {
return mHorGravity;
}
public void setHorGravity(int horGravity) {
if (this.mHorGravity != horGravity) {
this.mHorGravity = horGravity;
requestLayout();
}
}
public int getVerGravity() {
return mVerGravity;
}
public void setVerGravity(int verGravity) {
if (this.mVerGravity != verGravity) {
this.mVerGravity = verGravity;
requestLayout();
}
}
}
其中的注释比较详细，不难理解。
难点1：在于测量和布局时，需要循环遍历所有子View，累加子View的宽度，再和控件的宽度做比较，当控件宽度不足时，需要换行，换行时又需要将高度累加。
难点2：布局时，针对不同的Gravity，不论是水平方向还是竖直方向，都需要分别计算其开始位置，不通的布局策略影响布局时子View的位置。
