Android 热门标签 瀑布流实现

在有些app使用中，我们会在android 的app中看见 热门标签等自动换行的流式布局，

流式布局的特点以及应用场景

特点：当上面一行的空间不够容纳新的View控件时，

才开辟下一行的空间

　　原理图：

　　


直接上代码自定义 FlowLayout

public class FlowLayout extends ViewGroup {

public FlowLayout(Context context) {

//把super 改成this 在实例化时调取两个参数的构造方法

this(context,null);

}

public FlowLayout(Context context, AttributeSet attrs) {

this(context, attrs,0);

}

public FlowLayout(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);//测量值

int modeWidth = MeasureSpec.getMode(widthMeasureSpec);//测量模式

int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);

int modeHeight = MeasureSpec.getMode(heightMeasureSpec);

//wrap_content时 计算宽高值

int width = getPaddingLeft();

int height = getPaddingTop();

//记录 每一行的高度和宽度

int lineWidth = 0;

int lineHeight = 0;

//得到内部元素的个数

int cCount = getChildCount();

for (int i = 0; i < cCount; i++) {

View childView = getChildAt(i);

//测量子view的宽和高

measureChild(childView, widthMeasureSpec, heightMeasureSpec);

//得到子View的LayoutParmas

MarginLayoutParams mlp = (MarginLayoutParams) childView.getLayoutParams();

//子View占据的宽度

int childWidth = childView.getMeasuredWidth()+mlp.leftMargin+mlp.rightMargin;

//子View占据的高度

int childHeight = childView.getMeasuredHeight()+mlp.topMargin+mlp.bottomMargin;

if (lineWidth +childWidth>sizeWidth-getPaddingLeft()-getPaddingRight()) {

//换行 width要对比最大的宽度得到最大的宽度

width = Math.max(width, lineWidth);

//重置 lineWidth

lineWidth = childWidth;

//记录行高

height += lineHeight;

//重置下一行的行高

lineHeight = childHeight;

}else {

// 不换行 宽度叠加

lineWidth += childWidth;

//得到当前最大高度

lineHeight = Math.max(childHeight, lineHeight);

}

//最后一个控件

if (i==cCount-1) {

width = Math.max(lineWidth, width);

height +=lineHeight;

}

}

/* 自定义控件的三种测量模式

* EXACTLY 为精确值 比如 100dp和match_parent

* AT_MOST 为wrap_content

* UNSPECIFIED是控件 想要多大 就多大 不常有

*/

// if (modeWidth == MeasureSpec.AT_MOST) {

// setMeasuredDimension(width, height);

// }else {

// setMeasuredDimension(sizeWidth, sizeHeight);

// }

setMeasuredDimension(modeWidth == MeasureSpec.AT_MOST?width:sizeWidth+getPaddingLeft()+getPaddingRight(),

modeWidth == MeasureSpec.AT_MOST?height:sizeHeight+getPaddingTop()+getPaddingBottom());

Log.e("tag","sizeWidth="+sizeWidth);

Log.e("tag", "sizeHeight="+sizeHeight);

}

//用来存储所有View 以行为集合

private List<List<View>> mAllViews = new ArrayList<List<View>>();

//每一行的高度

private List<Integer> mLineHeights = new ArrayList<Integer>();

@Override

protected void onLayout(boolean changed, int l, int r, int t, int b) {

mAllViews.clear();

mLineHeights.clear();

//当前ViewGroup的宽度

int width = getWidth();

int lineWidth = getPaddingLeft() ;

int lineHeight = getPaddingTop() ;

List<View> lineViews = new ArrayList<View>();

int cCount = getChildCount();

for (int i = 0; i < cCount; i++) {

View childView = getChildAt(i);

MarginLayoutParams lp = (MarginLayoutParams) childView.getLayoutParams();

int childWidth = childView.getMeasuredWidth();

int childheight = childView.getMeasuredHeight();

//如果需要换行

if (childWidth+lp.leftMargin+lp.rightMargin+lineWidth>width-getPaddingLeft()-getPaddingRight()) {

//记录每一行的行高

mLineHeights.add(childheight);

//记录所有的View

mAllViews.add(lineViews);

//重置行宽和行高

lineWidth = 0 ;

lineHeight = childheight+lp.topMargin+lp.bottomMargin;

//重置lineViews

lineViews = new ArrayList<View>();

}

lineWidth += childWidth+lp.leftMargin+lp.rightMargin;

lineHeight = Math.max(lineHeight,childheight+lp.bottomMargin+lp.topMargin);

lineViews.add(childView);

}

//for end 处理最后一行

mLineHeights.add(lineHeight);

mAllViews.add(lineViews);

//设置子View的位置

int top = getPaddingTop() ;

int left = getPaddingLeft() ;

//行数

int lineNum = mAllViews.size();

for (int i = 0; i < lineNum; i++) {

lineViews = mAllViews.get(i);

lineHeight = mLineHeights.get(i);

int lineViewCount = lineViews.size();

for (int j = 0; j < lineViewCount; j++) {

View childView = lineViews.get(j);

if (childView.getVisibility()==View.GONE) {

continue;

}

MarginLayoutParams lp = (MarginLayoutParams) getLayoutParams();

//上下左右边距 计算

int lc = left + lp.leftMargin;

int tc = top + lp.topMargin;

int rc = lc + childView.getMeasuredWidth();

int bc = tc + childView.getMeasuredHeight();

//为子View布局

childView.layout(lc, tc, rc, bc);

left += childView.getMeasuredWidth()+lp.leftMargin+lp.rightMargin;

}

left = getPaddingLeft();

top += lineHeight;

}

}

/**

* 得到当前的ViewGroup对应的LayoutParams MarginLayoutParams

*/

@Override

public LayoutParams generateLayoutParams(AttributeSet attrs) {

return new MarginLayoutParams(getContext(),attrs);

}

}

MainActivity的布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity" >

<com.example.waterfalldemo.FlowLayout

android:id="@+id/fl_main"

android:padding="10dp"

android:layout_width="match_parent"

android:layout_height="match_parent" >

</com.example.waterfalldemo.FlowLayout>

</RelativeLayout>

还需要设置子View的背景

新建drawable文件 设置背景text.xml文件

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

<solid android:color="#e7e7e7" />

<corners android:radius="30dp" />

<padding

android:bottom="2dp"

android:left="10dp"

android:right="10dp"

android:top="2dp" />

</shape>

TextView的布局文件 text.xml

<?xml version="1.0" encoding="utf-8"?>

<TextView xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="2dp"

android:layout_marginTop="10dp"

android:layout_marginBottom="5dp"

android:background="@drawable/text"

android:textSize="18sp"

android:text="helloworld" >

</TextView>

MainActivity 中FlowLayout添加TextView或者Button

public class MainActivity extends Activity {

private FlowLayout mainFl;

private String[] texts = new String[] { "hello", "Android", "findViewById",

"Activity", "void","extends", "Window", "Layout","void","void", "View","Bundle",

"super", "void", "String", "public", "class","onCreate", "View" };

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

mainFl = (FlowLayout) findViewById(R.id.fl_main);

initButtonDate();

// initTextViewDate();

}

private void initTextViewDate() {

// TODO Auto-generated method stub

LayoutInflater inflater = LayoutInflater.from(this);

for (int i = 0, length = texts.length; i < length; i++) {

TextView textView = (TextView) inflater.inflate(R.layout.text,mainFl, false);

textView.setText(texts[i]);

mainFl.addView(textView);

}

}

private void initButtonDate() {

// TODO Auto-generated method stub

for (int i = 0, length = texts.length; i < length; i++) {

Button button = new Button(this);

MarginLayoutParams lp = new MarginLayoutParams(

LayoutParams.WRAP_CONTENT,

LayoutParams.WRAP_CONTENT);

button.setBackgroundResource(R.drawable.text);

button.setText(texts[i]);

mainFl.addView(button, lp);

}

}

}

这样实现就实现了瀑布流效果了