先看效果图吧,
继上一篇《android自定义viewgroup实现等分格子布局》中实现的布局效果,这里稍微有些区别,每个格子的高度不规则,就是传说的瀑布流布局,一般实现这种效果,要么用第三方控件,如果不是加载图片还可以直接写在xml中实现,不过代码会很多的;
下面我重写了viewgroup,实现onMeasure,onLayout方法,动态设置每个布局的高度,这里有一个小的技巧,一般我们自定义的控件,嵌套在scrollview中显示不全,这个问题也纠结我一小会,不过当你打开scrollview的源码,你会发现有一个地方,同时可以理解scrollview中嵌套viewpager,gridview,listview时候会显示不全的问题
下面是自定义viewgroup的全部代码:
package com.allen.view; import com.allen.mygridlayout.R; import android.content.Context; import android.content.res.TypedArray; import android.util.AttributeSet; import android.view.View; import android.view.ViewGroup; import android.view.View.MeasureSpec; /** * @package:com.fumei.letao.views * @author:Allen * @email:[email protected] * @data:2013年11月26日 下午8:39:51 * @description:瀑布流视图 */ public class WaterfullLayout extends ViewGroup { final String tag = "balance"; // 列数 int columns = 2; // 行数 int rows = 0; // 边距 int margin = 10; // 子视图数量 int count = 0; private int mMaxChildWidth = 0; private int mMaxChildHeight = 0; public WaterfullLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); if (attrs != null) { TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.MyGridLayout); columns = a.getInteger(R.styleable.MyGridLayout_numColumns, 2); margin = (int) a.getInteger(R.styleable.MyGridLayout_itemMargin, 2); } } public WaterfullLayout(Context context, AttributeSet attrs) { super(context, attrs, 0); // TODO Auto-generated constructor stub } public WaterfullLayout(Context context) { super(context); // TODO Auto-generated constructor stub } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { mMaxChildWidth = 0; mMaxChildHeight = 0; count = getChildCount(); if (count == 0) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); return; } rows = count % columns == 0 ? count / columns : count / columns + 1;// 行数 int top[] = new int[columns]; for (int i = 0; i < rows; i++) {// 遍历行 for (int j = 0; j < columns; j++) {// 遍历每一行的元素 View child = this.getChildAt(i * columns + j); if (child == null) break; ViewGroup.LayoutParams lp = child.getLayoutParams(); if (child.getVisibility() == GONE) { continue; } child.measure(MeasureSpec.makeMeasureSpec( MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec( lp.height, MeasureSpec.AT_MOST)); top[j] += lp.height + margin; mMaxChildWidth = Math.max(mMaxChildWidth, child.getMeasuredWidth()); } } setMeasuredDimension(resolveSize(mMaxChildWidth, widthMeasureSpec), resolveSize(getMax(top) + margin, heightMeasureSpec)); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { // TODO Auto-generated method stub int height = b - t;// 布局区域高度 int width = r - l;// 布局区域宽度 if (count == 0) return; int gridW = (width - margin * (columns + 1)) / columns;// 格子宽度 int gridH = 0;// 格子高度 int left = 0; int top[] = new int[columns]; for (int i = 0; i < rows; i++) {// 遍历行 for (int j = 0; j < columns; j++) {// 遍历每一行的元素 View child = this.getChildAt(i * columns + j); if (child == null) return; ViewGroup.LayoutParams lp = child.getLayoutParams(); child.measure(MeasureSpec.makeMeasureSpec(gridW, MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec( lp.height, MeasureSpec.AT_MOST)); // 如果最后有一个对其的标志,为了底部对其 if (child.getTag() != null && child.getTag().equals(tag)) { child.measure(MeasureSpec.makeMeasureSpec(gridW, MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec( getMax(top) - top[j], MeasureSpec.EXACTLY)); gridH = getMax(top) - top[j]; left = j * gridW + margin * (j + 1); child.layout(left, top[j] + margin, left + gridW, top[j] + gridH); break; } gridH = lp.height; left = j * gridW + margin * (j + 1); top[j] += margin; child.layout(left, top[j], left + gridW, top[j] + gridH); top[j] += gridH; } } } /** 计算整体布局高度,为了在嵌套在scrollview中能显示出来 */ private int getMax(int array[]) { int max = array[0]; for (int i = 0; i < array.length; i++) { if (max < array[i]) max = array[i]; } return max; } }
所有demo工程点击这里下载:click me!!!