很多时候，我们会遇见各种各样的需求，流式布局算是非常常见的一种。像各种菜单啊，展示之类的。其实这个很简单，可以自己手写一个，顺便练练自定义控件。先看看效果。
这里写图片描述
那么先来分析一下，满足这个需求，应该需要做哪些准备。
这里写图片描述
就像备注写的一样，
首先需要准备的条件：
一个List<List< View > > 来缓存多少行。
一个List<Integer> 来缓存每一行的高度。
一个List<View> 来缓存每一行的子控件View。
相对于每一行来说，需要一个变量缓存当前行的宽度，一个变量缓存当前行的最大高度。
换行的条件：
当前行的宽度加上下一个子控件的宽度，超过了当前控件允许的最大宽度。那就换行。
那么直接开始撸吧。
package com.example.administrator.flowlayout;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.List;
/**
* Created by ShuWen on 2017/6/1.
*/
public class FlowLayout extends ViewGroup {
//用于缓存的多少行
private List<List<View>> mLineViewsList = new ArrayList<>();
//用于缓存每一行最大的高度
private List<Integer> mLinesHieights = new ArrayList<>();
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);
}
//为了获取子控件的margin属性值
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(),attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//获取测量模式
int meaWidthMode = MeasureSpec.getMode(widthMeasureSpec);
int meaHeightMode = MeasureSpec.getMode(heightMeasureSpec);
//获得允许的宽高
int meaWidthSize = MeasureSpec.getSize(widthMeasureSpec);
int meaHeightSize = MeasureSpec.getSize(heightMeasureSpec);
//最后测量的宽高
int measuredWidth = 0;
int measuredHeight = 0;
if (meaHeightMode == MeasureSpec.EXACTLY && meaWidthMode == MeasureSpec.EXACTLY){
measuredHeight = meaHeightSize;
measuredWidth = meaWidthSize;
}else {
int iCurLineW = 0;
int iCurLineH = 0;
int childWidth = 0;
int childHeight = 0;
int childCount = getChildCount();
//用于缓存每一行的子控件
List<View> childsList = new ArrayList<>();
for (int i = 0; i < childCount; i++) {
View childView = getChildAt(i);
//测量子控件，获得子控件的宽高和margin值
measureChild(childView,widthMeasureSpec,heightMeasureSpec);
MarginLayoutParams params = (MarginLayoutParams) childView.getLayoutParams();
//自控件的宽高
childWidth = params.leftMargin + childView.getMeasuredWidth() + params.rightMargin;
childHeight = params.topMargin + childView.getMeasuredHeight() + params.bottomMargin;
//当前行的宽度，加上下一个控件的宽度大于允许值，则换行
if (childWidth + iCurLineW > meaWidthSize){
//换行操作，记录测量的父控件宽高
measuredWidth = Math.max(measuredWidth,iCurLineW);
measuredHeight += iCurLineH;
//保存该行的数据
mLineViewsList.add(childsList);
mLinesHieights.add(iCurLineH);
//重新记录新的一行
iCurLineH = childHeight;
iCurLineW = childWidth;
//开始缓存新一行数据
childsList = new ArrayList<>();
childsList.add(childView);
}else {
//未换行操作，记录该行宽高
iCurLineH = Math.max(iCurLineH,childHeight);
iCurLineW += childWidth;
//保存到该行集合
childsList.add(childView);
}
//当该行是最后一行并且需要换行时，进行换行数据处理
if (i == childCount - 1){
measuredHeight += iCurLineH;
measuredWidth = Math.max(measuredWidth,iCurLineW);
mLinesHieights.add(iCurLineH);
mLineViewsList.add(childsList);
}
}
}
setMeasuredDimension(measuredWidth,measuredHeight);
}
@Override
protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
int left,top,right,bottom;
int curLeft = 0;
int curTop = 0;
int linesCount = mLineViewsList.size();
for (int j = 0; j < linesCount; j++) {
List<View> childViews = mLineViewsList.get(j);
int childsCount = childViews.size();
for (int k = 0; k < childsCount; k++) {
View childView = childViews.get(k);
MarginLayoutParams params = (MarginLayoutParams) childView.getLayoutParams();
left = curLeft + params.leftMargin;
top = curTop + params.topMargin;
right = left + childView.getMeasuredWidth();
bottom = top + childView.getMeasuredHeight();
//为子控件布局
childView.layout(left,top,right,bottom);
curLeft += params.leftMargin + childView.getMeasuredWidth() + params.rightMargin;
}
curLeft = 0;
curTop += mLinesHieights.get(j);
}
mLinesHieights.clear();
mLineViewsList.clear();
}
public interface onItemClick{
void click(View view,int position);
}
public void setOnItemClickListener(final onItemClick onItemClick){
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
View childView = getChildAt(i);
final int finalI = i;
childView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
onItemClick.click(view, finalI);
}
});
}
}
}
其中用到的flag背景：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="10dp"/>
<padding android:bottom="2dp"
android:top="2dp"
android:right="10dp"
android:left="10dp"/>
<solid android:color="@color/colorPrimary"/>
</shape>
textView的样式.
<style name="text_flag">
<item name="android:background">@drawable/flag</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_margin">4dp</item>
<item name="android:textColor">#fff</item>
</style>
activity的布局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.administrator.flowlayout.MainActivity">
<com.example.administrator.flowlayout.FlowLayout
android:id="@+id/flowlayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
style="@style/text_flag"
android:text="阿萨德 "/>
<TextView
style="@style/text_flag"
android:text="我阿萨德阿萨德的"/>
<TextView
style="@style/text_flag"
android:textSize="16sp"
android:text="你阿萨德阿萨德的"/>
<TextView
style="@style/text_flag"
android:textSize="19sp"
android:text="阿萨德 阿萨德"/>
<TextView
style="@style/text_flag"
android:text="阿萨德阿萨德"/>
<TextView
style="@style/text_flag"
android:text="阿大声道"/>
<TextView
style="@style/text_flag"
android:text="阿大声道"/>
<TextView
style="@style/text_flag"
android:text="为全文完请二位"/>
<TextView
style="@style/text_flag"
android:text="谁是谁"/>
<TextView
style="@style/text_flag"
android:text="撒大声地"/>
<TextView
style="@style/text_flag"
android:text="阿大声道"/>
<TextView
style="@style/text_flag"
android:text="大法师"/>
<TextView
style="@style/text_flag"
android:text="12123"/>
<TextView
style="@style/text_flag"
android:text="sadsa"/>
</com.example.administrator.flowlayout.FlowLayout>
</LinearLayout>
就这么简单，自己撸一遍吧，总能学到一点的。
