流式布局FlowLayout
- 1.应用背景及说明
- 2.代码架构
- 3.代码分析
- （1）. FlowLayout.java
源码地址：案例源码
1.应用背景及说明
现在大部分商城类app都要用到流式布局，就是对不规则的子view进行布局排列。
自定义流式布局不外乎两点，重写onMeasure方法和onLayout方法。大部分代码我都写了注释，但还是有一些比较细节的地方，我还会抽取出来重点讲。
废话不多说，先上图。
2.代码架构
结构比较简单，几个类而已，就不写了，直接上图吧！
3.代码分析
（1）. FlowLayout.java
都写了详细注释，重点讲一下易错和需要注意的地方。
package com.example.flowlayout.widget;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;
public class FlowLayout extends ViewGroup {
private static final String TAG = "FlowLayout";
//统一设置间隔，比较方便
private int horizontalSpace = dip_2px(16);
private int verticalSpace = dip_2px(8);
private int dip_2px(int dpValue) {
float scale = getResources().getDisplayMetrics().density;
return (int) (scale * dpValue + 0.5f);
}
//每次添加整行的view，相当于一个二维表
List<List<View>> widList;
//每一行的行高
List<Integer> heiList = new ArrayList<>();
//一行的view
List<View> lineList;
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) {
int selWidth = MeasureSpec.getSize(widthMeasureSpec);
int selHeight = MeasureSpec.getSize(heightMeasureSpec);
//目前宽高
int curWidth = 0;
int curHeight = 0;
//如果他写在外面，就会多一倍的行数，因为onMeasure方法要执行两次，但应该是能解决这个测量优化问题
widList = new ArrayList<>();
//记录一行的view
lineList = new ArrayList<>();
int childCount = getChildCount();
//爸爸的padding
int PLeft = getPaddingLeft();
int PTop = getPaddingTop();
int PRight = getPaddingRight();
int PBottom = getPaddingBottom();
//儿子需要的最大长宽，当模式为AT_MOST时，就需要用到这个变量。
int childMostWidth = 0;
int childMostHeight = 0;
for (int i = 0; i < childCount; i++) {
View childView = getChildAt(i);
MarginLayoutParams lp = (MarginLayoutParams) childView.getLayoutParams();
//第二个参数：父View左右（上下）Padding+子View左右（上下）Margin, 源码也没说详细, 但是你能看系统布局的源码(LinearLayout)，
// 最好不设置padding。
//感觉不太好操作
int childWidMeasureSpec = getChildMeasureSpec(widthMeasureSpec, lp.leftMargin + lp.rightMargin
+ PLeft + PRight, lp.width);
int childHeiMeasureSpec = getChildMeasureSpec(heightMeasureSpec, lp.topMargin + lp.bottomMargin
+ PTop + PBottom, lp.width);
Log.d(TAG, "onMeasure: " + lp.leftMargin + "---" + PLeft);
childView.measure(childWidMeasureSpec, childHeiMeasureSpec);
//得到子view的长宽
int childWidth = childView.getMeasuredWidth();
int childHeight = childView.getMeasuredHeight() ;
//换行操作
if (curWidth + childWidth + horizontalSpace> selWidth) {
//添加这一行的view及行高
widList.add(lineList);
heiList.add(curHeight);
//记录最大的行宽及行高
childMostWidth = Math.max(childMostWidth, curWidth + horizontalSpace);
childMostHeight += curHeight + verticalSpace;
//清空，重新记录
lineList = new ArrayList<>();
curHeight = 0;
curWidth = 0;
Log.d(TAG, "onMeasure: " + 1);
}
//添加每个子view,这个需要放在第二个if的上方，
lineList.add(childView);
//当前行的宽度及高度
curWidth += childWidth + horizontalSpace;
curHeight = Math.max(curHeight, childHeight );
//最后一行执行的操作，因为他不可能执行第一个if语句
if (curWidth < selWidth && i == childCount - 1) {
widList.add(lineList);
heiList.add(curHeight);
Log.d(TAG, "onMeasure: " + 2);
childMostWidth = Math.max(childMostWidth, curWidth);
childMostHeight += curHeight + verticalSpace;
}
}
//模式
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
//模式，打个log就知道是爸爸的还是儿子的模式了
//onMeasure: 宽的mode：MeasureSpec.AT_MOST
Log.d(TAG, "onMeasure: 宽的mode：" + (MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.AT_MOST?
"MeasureSpec.AT_MOST": "MeasureSpec.UNSPECIFIED"));
int finallyWidth = (widthMode == MeasureSpec.EXACTLY ? selWidth : childMostWidth);
int finallyHeight = (heightMode == MeasureSpec.EXACTLY ? selHeight : childMostHeight);
setMeasuredDimension(finallyWidth, finallyHeight);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int curL = 0 ;
int curT = 0;
for (int i = 0; i < widList.size(); i++) {
List<View> lineView = widList.get(i);
Log.d(TAG, "onLayout: " + widList.size() + "---" + lineView.size());
for (int j = 0; j < lineView.size(); j++) {
View childView = lineView.get(j);
int left = curL ;
int top = curT ;
if (j == 0) {
left = curL + horizontalSpace;
}
int right = left + childView.getMeasuredWidth();
int bottom = top + childView.getMeasuredHeight();
//如是是把 widList = new ArrayList<>()写在onMeasure 外 ，会有4行
// 那么第一行和第三行的数据相同，所以相当于重新layout了， 所以第一行就为空了，就会出现这种情况
childView.layout(left, top, right, bottom);
curL = right + horizontalSpace;
}
curL = 0;
curT = curT + heiList.get(i) + verticalSpace;
lineView.clear();
}
//直接clear
widList.clear();
heiList.clear();
lineList.clear();
}
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(), attrs);
}
}
1.关于间隔的设置，建议统一设置间隔，比较方便。不要在xml中设置，可能会引起间隔不统一，就不好看了。
2.如果把这两个参数放外面，先看下面的图
//儿子需要的最大长宽，当模式为AT_MOST时，就需要用到这两个变量。
int childMostWidth = 0;
int childMostHeight = 0;
怎么解释呢?emmm…要结合第三点，即onMeasure方法的二次测量，如果放在里面，childMostHeight 每次onMeasure都会置0，也就是高度的问题，它只能观察两行。
但放在外面就不同。childMostHeight 一直在增加，重新onMeasure，并没有赋为0,他就能观察到四行。
3.关于onMeasure方法的二次测量的问题。就是说onMeasure方法会执行两次。但是这会造成一些问题。
比如：如果你把用来记录数据的变量放在onMeasure外面且在外面初始化，就会造成数据翻倍的问题。比如说这个变量： widList
//每次添加整行的view，相当于一个二维数组
List<List> widList;
解决方法：当然就是需要我们在onMeasure方法中进行成员变量的初始化。
尽管我们测量了多次，但每次测量前我们都将它初始化了
关于第二三点，如果childMostHeight 放在onMeasure方法外面，且 widList在onMeasure方法外面初始化，那么，就是这个图
4 . 当然，可能有人会有疑问，为什么是两空行，不应该是四行都有数据吗？
我们需要知道的是，1，3两行， 2，4两行数据是一样的。
在onLayout方法中，
在layout时，因为childView一样，同一个childView进行layout，你说会怎么办？总不可能一个childView layout在不同的地方吧！当然是第一行的数据会定位到第三行，第一行就会为空了。
以上几点都是易错点，并对有些现象，我对其做出了解答
