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);
}
}
}

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