android 自定义控件--用viewGroup实现流式布局

java布局中有一个流式布局，但是android布局中并没有。手机上用到流式布局大概就是热门标签的添加吧。流式布局就是控件一个一个的自动往右添加，如果超出宽度，则自动到下一行。

步骤分析

1.对于本布局，我们需要能得到margin属性的LayoutParams，即MarginLayoutParams. 2.在onMeasure()方法中计算所有子view的高度和宽度，以便得到FlowLayout 的宽高（流式布局为warp_content模式）。 3.在onLayout()方法中放置所有子view的位置。

解决问题

1.得到MarginLayoutParams

只需要我们重写generateLayoutParams()方法

public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) { return new MarginLayoutParams(getContext(), attrs); }

2.onMeasure()计算宽高

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec,heightMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec); int widthMode = MeasureSpec.getMode(widthMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); //如果为warp_content模式下测量的宽高 int width = 0; int height = 0; //记录每一行的宽高 int lineW = 0; int lineH = 0; int childCount = getChildCount(); for (int i = 0; i < childCount; i++) { View child = getChildAt(i);//获取每一个子view measureChild(child,widthMeasureSpec,heightMeasureSpec);//测量子view MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams(); int childW = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;//得到子view的宽高 int childH = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin; //如果放入该view是超过父布局宽度，需要换行，那么高度累加，宽度取当前行与该子view最大的为父布局宽度 if (childW + lineW > widthSize - getPaddingLeft() - getPaddingRight()){ width = Math.max(lineW,childW); height +=lineH;//高度累加 //开启新行 lineW = childW; lineH = childH; }else {//如果不换行，则宽度累加，高度取最大值 lineW += childW; lineH = Math.max(lineH,childH); } if (i == childCount -1){//最后一个子view width = Math.max(width, lineW); height += lineH; } } Log.i("FLOW",width+" "+height); setMeasuredDimension((widthMode == MeasureSpec.EXACTLY) ? widthSize : width +getPaddingLeft()+getPaddingRight(), (heightMode == MeasureSpec.EXACTLY ? heightSize : height +getPaddingTop()+getPaddingBottom())); }

首先得到父布局的测量模式和宽高，然后遍历所有的子view，得到子view的宽高，计算父布局wrap_content模式下的宽高，最后根据模式设置父布局的宽高。但是在测量时应注意一点，在遍历到最后一个子view时，可能会换行，会走换行的if语句，但是并没有将在view的高度进行累加，所以要单独写一个判断进行累加。

3.onLayout()为子view布局

List<List<View>> allViews = new ArrayList<>(); List<Integer> lineH = new ArrayList<>(); @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { allViews.clear(); lineH.clear(); int width = getWidth();//父布局的宽度 int lineWidth = 0; int lineHeight = 0; //存放每一行的子view List<View> lineViews = new ArrayList<>(); int childCount = getChildCount(); for (int i = 0; i < childCount; i++) { View child = getChildAt(i);//得到view实例 MarginLayoutParams lp = (MarginLayoutParams) child .getLayoutParams(); //得到子view的宽高 int childWidth = child.getMeasuredWidth() + lp.leftMargin +lp.rightMargin; int childHeight = child.getMeasuredHeight() + lp.bottomMargin +lp.topMargin; if (lineWidth + childWidth > (width -getPaddingLeft() - getPaddingRight())){//如果需要换行 lineH.add(lineHeight);//保存这一行的view以及最大高度 allViews.add(lineViews); //重置宽高 lineWidth = 0; lineHeight = 0; lineViews = new ArrayList<>(); } //如果不换行，则行高等于最高的，行宽累加 lineWidth = lineWidth + childWidth; lineHeight = Math.max(lineHeight,childHeight); lineViews.add(child); } lineH.add(lineHeight); allViews.add(lineViews); int lineNums = allViews.size(); int left = getPaddingLeft(); int top = getPaddingTop(); for (int i =0; i < lineNums; i++) { lineViews = allViews.get(i); lineHeight = lineH.get(i); //遍历每一行的view for (int j = 0; j < lineViews.size(); j++) { View child = lineViews.get(j); if (child.getVisibility() == View.GONE){ continue; } MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams(); //计算子view的坐标 int lc = left +lp.leftMargin; int tc = top +lp.topMargin; int rc = lc + child.getMeasuredWidth(); int bc = tc + child.getMeasuredHeight(); child.layout(lc,tc,rc,bc); left += child.getMeasuredWidth() + lp.rightMargin + lp.leftMargin; } //重置left和top 为下一行的计算坐准备 left = getPaddingLeft(); top +=lineHeight; } }

代码分析： allViews 存放所有的子view，lineH 存放每一行的最大高度，lineView 存放每一行的view。 然后遍历所有子view，设置每一行的高度，和每一行的子view，最后遍历每一行的子view。设置每一个view的left,top,right,bottom.

测试

我用几个textView来测试，看一看效果 在res/values/styles.xml中：

<style name="text_flag_01"> <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:background">@drawable/flag_01</item> <item name="android:textColor">#ffffff</item> </style>

frag_01.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <solid android:color="#7690A5" > </solid> <corners android:radius="5dp"/> <padding android:bottom="2dp" android:left="10dp" android:right="10dp" android:top="2dp" /> </shape>

item_flow.xml

<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" style="@style/text_flag_01" android:layout_margin="5dp" android:layout_width="wrap_content" android:layout_height="wrap_content" > </TextView>

代码动态添加textview

FlowLayout flow; String[] str = new String[]{"hallo world1","text","FlowLayout Image3","hallo world1", "textView2","FlowLayout Image3","hallo world1", "textView2","FlowLayout Image3"}; LayoutInflater inflater = LayoutInflater.from(this); for (int i = 0; i < str.length; i++) { TextView tv = (TextView) inflater.inflate(R.layout.item_flow,flow,false); tv.setText(str[i]); flow.addView(tv); }

最后效果如图 到这里，流式布局基本上就实现了，如果想动态添加，可以自己定义一个接口实现单个添加标签。

优化

上面的方法实现了流式布局，但是我们可以看到，在onMeasure()和onLayout()方法中都计算了子view的宽高。如此，我们可不可以只计算一次呢，在onMeasure()中就将view的坐标计算好呢？ 要解决这个问题，就需要有一个数组或列表来保存每一个view的坐标。 比如定义一个类，记录坐标点

public class ViewPosition{ int left; int top; int right; int bottom; public ViewPosition(int left,int top,int right,int bottom){ this.left = left; this.top = top; this.right = right; this.bottom = bottom; } }

在onMeasure()中实现坐标计算

List<ViewPos> vPos = new ArrayList<>(); if (childW + lineW > widthSize - getPaddingLeft() - getPaddingRight()){//如果放入该view是超过父布局宽度，换行 width = Math.max(lineW,childW);//取最大行宽为父布局行宽 height +=lineH;//高度累加 //开启新行 lineW = childW; lineH = childH; vPos.add(new ViewPos(getPaddingLeft()+lp.leftMargin, getPaddingTop()+lp.topMargin+height, getPaddingLeft() + childW - lp.rightMargin, getPaddingTop() + height + childH - lp.bottomMargin)); }else {//如果不换行，则宽度累加，高度取最大值 vPos.add(new ViewPos(getPaddingLeft() + lineW + lp.leftMargin, getPaddingTop() + height + lp.topMargin, getPaddingLeft() + lineW + childW - lp.rightMargin, getPaddingTop() + height + childH - lp.bottomMargin)); lineW += childW; lineH = Math.max(lineH,childH); }

最后在onLayout()中就简单了

@Override protected void onLayout(boolean changed, int l, int t, int r, int b) { int count = getChildCount(); for (int i = 0; i < count; i++) { View child = getChildAt(i); ViewPos pos = vPos.get(i); //设置View的左边、上边、右边底边位置 child.layout(pos.left, pos.top, pos.right, pos.bottom); } }

参考博客：Android 自定义ViewGroup 实战篇 -> 实现FlowLayout