自定义 FlowLayout
自定义 FlowLayout
在这里什么是一个 FlowLayout ，就是我们在很多软件的搜索页面看到的一些搜索标签，先上一张图吧。
FlowLayout使用例子
就是根据子 View 的长度自动换行，当然 Android 9.0 也出了一个类似的控件，但是考虑到之前的版本，我这里自己撸一个，也顺便熟悉熟悉整个流程。
这里想写一个 FlowLayout 也就是重写一个 ViewGroup，我自己觉得写一个
ViewGroup 要比写一个 View 要麻烦，不仅要考虑适配 WRAP_CONTENT，同时还要处理自身的长度和子 View 的摆放，但是我们可以对 Android 的一些 ViewGroup 的实现有所了解。当然有时候可以曲线救国，有时候我觉得有些太底层的没必要去自己实现，而且自己写的肯定没有 Android 原生的考虑的周全，我就可以直接继承已有的 ViewGroup 比如 LinearLayout、RelativieLayout 之类的，曲线救国~~
自定义 FlowLayout 的基本步骤
- 重写OnMeasure
- 重写OnLayout
这里分别是 父ViewGroup 对我们 measure 和 layout 的方法的回调方法，我们在这里获取到我们测量的大小和位置，接着可以继续去测量我们的子 Item 的大小和位置。
重写OnMeasure
空的onMeasure如下所示
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
}
首先第一步要先获取测量模式和大小
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
这个上面的 widthMeasureSpec 和 heightMeasureSpec 变量是OnMeasure的回调参数，在这里我们获取到了宽度和高度的大小和分别的测量模式，测量模式分成三种，但是我们在这里只讨论常见的两种 EXACTLY 和 AT_MOST, 前者对应着指定宽度和 MATCH_PARENT，后者对应着 WRAP_CONTENT。我们在这个方法里最想确定自己在 MATCH_PARENT 和 WRAP_CONTENT 下长宽如何，这里还要注意一点就是如果你重写一个 ViewGroup，如果没有针对 WRAP_CONTENT 重写 ，那么你的长宽和 MATCH_PARENT 模式下没有区别。
我们在 onMeasure 主要是测量子 View 所有长度加起来的和，当然不是盲目的加，废话不多说先上代码。
int wrapWidth = 0;
int wrapHeight = 0;
int lineWidth = 0;
int lineHeight = 0;
int cCount = getChildCount();
for (int i = 0; i < cCount; i++) {
// 得到第 i 个 View
View child = getChildAt(i);
// 这里要十分注意，如果这里不先 measureChild 是无法得到 child 的宽度和高度
measureChild(child, widthMeasureSpec, heightMeasureSpec);
MarginLayoutParams lp = (MarginLayoutParams) child
.getLayoutParams();
// 获得子 View 所占的宽度和高度的时候要加上他自身的 margin
int childWidth = child.getMeasuredWidth() + lp.leftMargin
+ lp.rightMargin;
int childHeight = child.getMeasuredHeight() + lp.topMargin
+ lp.bottomMargin;
// 判断是否需要换行 要减去左右的 padding
if (lineWidth + childWidth > sizeWidth - getPaddingLeft() - getPaddingRight()) {
// 需要换行的时候
wrapWidth = Math.max(wrapWidth, lineWidth);
lineWidth = childWidth;
wrapHeight += lineHeight;
lineHeight = childHeight;
} else {
// 不需要换行的时候
lineWidth += childWidth;
lineHeight = Math.max(lineHeight, childHeight);
}
// 特殊考虑，要考虑到获得 wrapWidth 和 wrapHeight
if (i == cCount - 1) {
wrapWidth = Math.max(lineWidth, wrapWidth);
wrapHeight += lineHeight;
}
}
这上面有两个变量要关注下，wrapWidth 和 wrapHeight 记录着 WRAP_CONTENT 时的长和宽，原因也知道了，WRAP_CONTENT 的效果需要我们自己实现，要不然就和 MATCH_PARENT 一模一样。另一个需要注意的点就是上面调用了很重要的函数就是 measureChild 这是 ViewGroup 自带的函数，作用就是测量子 View 的长和宽，这个很好理解，我作为一个父 ViewGroup，在WRAP_CONTENT 的模式下，连自己的子 View 的长宽都不清楚，我怎么确定自己的长宽大小，最后还需要注意最后一个要另外记录 wrapWidth 和 wrapHeight ，其它的大家自己可以通过阅读代码理解。
最后我们当然要调用设置自己宽高的函数 setMeasuredDimension ，代码如下，包括不同的测量模式下，大小不一样。
setMeasuredDimension(modeWidth == MeasureSpec.EXACTLY ? sizeWidth : wrapWidth + getPaddingLeft() + getPaddingRight(), modeHeight == MeasureSpec.EXACTLY ? sizeHeight : wrapHeight + getPaddingTop() + getPaddingBottom());
重写 OnLayout
我们在这个函数里面通过调用子 View 的layout来确定子 View 的位置。这个方法的思路和上面的有相似的也有不同的，我们需要通过两个变量来储存每行有哪些 View 和每一行的高度，同时我们还得注意考虑一种情况，如果这个子 View 的状态是 GONE, 我们就需要跳过它，同时在计算间距的时候还别忘了加上 父 ViewGroup 的padding 和自身的 margin ，按照这个思路我们需要遍历两遍所有的子 View，其它的跟上面的也很类似，关键就是控制哪些 View 是一行的，以及什么时候换行，这都又自己想要达到的效果决定的。这里因为跟上面的类似，我这里就不一一讲述了，下面直接给出所有的代码。
所有代码
public class FlowLayout extends ViewGroup {
private static final String TAG = "FlowLayout";
public FlowLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public FlowLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public FlowLayout(Context context) {
this(context, null);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
Log.d(TAG, "" + sizeWidth);
// 如果是warp_content情况下，记录宽和高
int width = 0;
int height = 0;
// 记录每一行的宽度与高度
int lineWidth = 0;
int lineHeight = 0;
// 得到内部元素的个数
int count = getChildCount();
for (int i = 0; i < count; i++) {
// 通过索引拿到每一个子view
View child = getChildAt(i);
// 测量子View的宽和高,系统提供的measureChild
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;
// 换行 判断 当前的宽度大于 开辟新行
if (lineWidth + childWidth > sizeWidth - getPaddingLeft() - getPaddingRight()) {
// 对比得到最大的宽度
width = Math.max(width, lineWidth);
// 重置lineWidth
lineWidth = childWidth;
// 记录行高
height += lineHeight;
lineHeight = childHeight;
} else
// 未换行
{
// 叠加行宽
lineWidth += childWidth;
// 得到当前行最大的高度
lineHeight = Math.max(lineHeight, childHeight);
}
// 特殊情况,最后一个控件
if (i == count - 1) {
width = Math.max(lineWidth, width);
height += lineHeight;
}
}
setMeasuredDimension(
modeWidth == MeasureSpec.EXACTLY ? sizeWidth : width + getPaddingLeft() + getPaddingRight(),
modeHeight == MeasureSpec.EXACTLY ? sizeHeight : height + getPaddingTop() + getPaddingBottom()//
);
}
/**
* 存储所有的View
*/
private List<List<View>> allViews = new ArrayList<List<View>>();
/**
* 每一行的高度
*/
private List<Integer> mLineHeight = new ArrayList<Integer>();
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
allViews.clear();
mLineHeight.clear();
// 当前ViewGroup的宽度
int width = getWidth();
int lineWidth = 0;
int lineHeight = 0;
// 存放每一行的子view
List<View> lineViews = new ArrayList<>();
int count = getChildCount();
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 - getPaddingLeft() - getPaddingRight()) {
// 记录LineHeight
mLineHeight.add(lineHeight);
// 记录当前行的Views
allViews.add(lineViews);
// 重置我们的行宽和行高
lineWidth = 0;
lineHeight = childHeight + lp.topMargin + lp.bottomMargin;
// 重置我们的View集合
lineViews = new ArrayList<View>();
}
lineWidth += childWidth + lp.leftMargin + lp.rightMargin;
lineHeight = Math.max(lineHeight, childHeight + lp.topMargin
+ lp.bottomMargin);
lineViews.add(child);
}// for end
// 处理最后一行
mLineHeight.add(lineHeight);
allViews.add(lineViews);
// 设置子View的位置
int left = getPaddingLeft();
int top = getPaddingTop();
// 行数
int lineNum = allViews.size();
for (int i = 0; i < lineNum; i++) {
// 当前行的所有的View
lineViews = allViews.get(i);
lineHeight = mLineHeight.get(i);
for (int j = 0; j < lineViews.size(); j++) {
View child = lineViews.get(j);
// 判断child的状态
if (child.getVisibility() == View.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();
// 为子View进行布局
child.layout(lc, tc, rc, bc);
left += child.getMeasuredWidth() + lp.leftMargin
+ lp.rightMargin;
}
left = getPaddingLeft();
top += lineHeight;
}
}
/**
* 与当前ViewGroup对应的LayoutParams
*/
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(), attrs);
}
}
效果图如下
在布局里面如何使用
效果图
最后的总结
自定义一个 ViewGroup 最少需要重写这两个方法，当然也可以重写他自己的 onDraw方法，我们这里最需要注意的就是 onMeasure 里面的测量模式，而且要记住，要自己来控制 WRAP_CONTENT 下自身的大小。
