自定义ViewGroup实现流式布局

要实现的就是这样的效果

自定义ViewGroup

重写OnMeasure方法

指定每个孩子测量规则

实例化内部类【行】，进行逻辑处理（行宽够用，则加入孩子；行宽不够用，则换行）

重写Onlayout方法

for循环遍历行集合（拿到每行，调用行类的layout方法分配行内孩子位置，纵坐标t不断加上行宽和间隔）

FlowLayout.java

public class FlowLayout extends ViewGroup {

private int horizontolSpacing=UIutil.dip2px(13);//横向控件间隔
private int verticalSpacing=UIutil.dip2px(13);//纵向行间隔

private Line currentline;// 当前的行
private int useWidth=0;// 当前行使用的宽度，即当前行拥有的控件孩子所占用的宽度
private List<Line> mLines=new ArrayList<>();//保存行的行集合
private int width;//FlowLayout宽度

public FlowLayout(Context context) {
super(context);
}

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

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

// 测量 当前控件Flowlayout
// 父类是有义务测量每个孩子的
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

/**初始化【行】对象相关的变量*/
mLines.clear();//清空行集合
currentline=null;
useWidth=0;

/**重新指定每个孩子测量规则*/
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
width = widthSize-getPaddingLeft()-getPaddingRight();
int height = heightSize-getPaddingBottom()-getPaddingTop(); // 获取到父控件FlowLayout宽和高
int childeWidthMode;
int childeHeightMode;
//  为了测量每个孩子 需要指定每个孩子测量规则
childeWidthMode = widthMode == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : widthMode;
childeHeightMode = heightMode == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : heightMode;
int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(width,childeWidthMode);
int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(height,childeHeightMode);

/**开始【行】操作*/
currentline=new Line();// 创建了第一行
/**遍历FlowLayout中的孩子，分配每行拥有的控件*/
for (int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i);//拿到FlowLayout的孩子
System.out.println("孩子的数量:"+getChildCount());
child.measure(childWidthMeasureSpec,childHeightMeasureSpec);//测量每个孩子

int measuredWidth = child.getMeasuredWidth();//孩子控件宽度即所占FlowLayout的宽度
useWidth += measuredWidth;// 让当前行加上使用的长度
if(useWidth <= width){//控件孩子们占用的宽度小于当前行宽（行宽=FlowLayout的宽）
currentline.addChild(child);//这时候证明当前的孩子是可以放进当前的行里,放进去
useWidth += horizontolSpacing;//加上孩子之间的间隔
if(useWidth>width){//使用宽度大于行宽
//换行
newLine();
}
}else{

if(currentline.getChildCount() < 1){
currentline.addChild(child);// 保证当前行里面最少有一个孩子
}
newLine();//换行
}

}
if(!mLines.contains(currentline)){
mLines.add(currentline);// 添加当前行
}
int totalHeight = 0;//总高度，使用的高度
for(Line line : mLines){
totalHeight += line.getHeight();//等于所有控件的高度和
}
totalHeight += verticalSpacing*(mLines.size() - 1) + getPaddingTop() + getPaddingBottom();//加上所有行与行之间的间隔，paddingtop，paddingbottom。
System.out.println(totalHeight);
/**设置父视图FlowLayout的尺寸*/     setMeasuredDimension(width+getPaddingLeft()+getPaddingRight(),resolveSize(totalHeight, heightMeasureSpec));//resolveSize方法是通过比较当前的高度判定规则与父视图的规则以及totalHeight与父视图尺寸的大小，选取适当高度尺寸；看源码很容易理解

}
/**换行*/
private void newLine() {
mLines.add(currentline);// 记录之前的行
currentline=new Line(); // 创建新的一行
useWidth=0;//新的一行重置使用宽度
}

// 分配每个孩子的位置
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
l+=getPaddingLeft();
t+=getPaddingTop();//改变起点
for (int i = 0; i < mLines.size(); i++) {
Line line = mLines.get(i);
line.layout(l,t);//交给每一行去分配
t+= line.getHeight() + verticalSpacing;//改变高度t+=行高、行与行间隔之和
}
}

/**内部类行*/
private class Line {
int height = 0; //当前行的高度
int lineWidth = 0;//行宽
private List<View> children = new ArrayList<View>();//控件集合

/**
* 添加一个孩子
*
* @param child
*/
public void addChild(View child) {
children.add(child);
if (child.getMeasuredHeight() > height) {
height = child.getMeasuredHeight();//行高等于当前行最大孩子的高
}
lineWidth += child.getMeasuredWidth();
}
/**当前行高*/
public int getHeight() {
return height;
}

/**
* 返回孩子的数量
*
* @return
*/
public int getChildCount() {
return children.size();
}
/**在一行内分配各孩子位置*/
public void layout(int l, int t) {
lineWidth += horizontolSpacing*(children.size()-1);//行宽+=当前行所有孩子之间的水平间隔
int surplusChild = 0;//将剩余宽度平均分配给每个孩子的宽度
int surplus = width - lineWidth;//当前行分配孩子后剩余的宽度
if(surplus > 0 && children.size() > 0){

System.out.println("children:" + children.size());
surplusChild = surplus / children.size();//算出将剩余宽度平均分配给每个孩子的宽度

}

for (int i = 0; i < children.size(); i++) {
View child = children.get(i);
child.layout(l,t,l+child.getMeasuredWidth()+surplusChild,t+child.getMeasuredHeight());//确定当前控件的位置，绘出控件
l+=child.getMeasuredWidth()+ surplusChild+ horizontolSpacing ;//计算下一个孩子的横坐标（加上当前控件宽度，控件间隔，分给每个控件的剩余宽度）
}
}
}
}

自定义ViewGroup的OnMeasure（）：

指定控件孩子的判定规则

根据父视图的规则模式确定控件孩子的规则模式



测量每个孩子

设定父视图尺寸

在Activity中应用自定义布局

创建并实例化一些文本控件显示文本，将文本控件填充到FlowLayout中。

private List<String> datas;
public void onCreate(){
ScrollView scrollView = new ScrollView(getContext());//最上层布局ScrollView
scrollView.setBackgroundResource(R.drawable.grid_item_bg_normal);

FlowLayout layout= new FlowLayout(getContext());//实例化FlowLayout
int padding=UIutil.dip2px(13);
layout.setPadding(padding, padding, padding, padding);

int backColor = 0xffcecece;//背景色，用于创建Drawable的背景色
Drawable pressedDrawable = DrawableUtil.createShape(backColor);//创建点击后的显示的Drawable
/**根据文本数据的数量确定文本控件*/
for (int i = 0; i < datas.size(); i++) {
TextView textView = new TextView(getContext());
final String s = datas.get(i);
textView.setText(s);

Random random=new Random();   //创建随机对象
int red = random.nextInt(255)+1;
int green = random.nextInt(255)+1;
int blue = random.nextInt(255)+1;//创建随机色
int color = Color.rgb(red, green, blue);//范围 0-255 随机色
GradientDrawable createShape = DrawableUtil.createShape(color);// 默认显示的图片
StateListDrawable selectorDrawable = DrawableUtil.createSelectorDrawable(pressedDrawable, createShape);//Drawable选择器

/**设置文本控件参数和点击事件*/            textView.setBackground(selectorDrawable);//将选择器设成背景
textView.setTextColor(Color.WHITE);
textView.setTextSize(18);
textView.setGravity(Gravity.CENTER);
int textPaddingV = UIutil.dip2px(4);
int textPaddingH = UIutil.dip2px(7);
textView.setPadding(textPaddingH,textPaddingV,textPaddingH,textPaddingV);
textView.setClickable(true);
textView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getContext(),s,Toast.LENGTH_SHORT).show();
}
});
/**FlowLayout添加孩子*/
layout.addView(textView,new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,-2));// -2 包裹内容

}
/**scrollView添加FlowLayout为孩子*/
scrollView.addView(layout);

setContentView(scrollView);
}