分享一个比较好用的流式布局的label控件

Android流式布局，可配置是否将每一行的空白区域平均分配给子控件。
增加了将每一行的空白区域平均分配给子控件。

demo中分别演示了在xml使用方式和在java代码中动态添加

先介绍一下最常用的使用场景：一般是从网上获得一些标签(个数不确定),所以需要能在代码里面动态添加。

下面傻瓜式的详细说明使用步骤：

1、布局使用

<pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <com.toastmemo.ui.widget.BGAFlowLayout
        android:id="@+id/flowlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/intro"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="20dip"
        android:layout_marginRight="20dip"
        android:layout_marginTop="5dip"
        android:padding="5dp"
        app:fl_isDistributionWhiteSpacing="true" />

</RelativeLayout>

2、添加控件的属性声明

  <declare-styleable name="BGAFlowLayout">
        <!-- 标签之间的水平间距 -->
        <attr name="fl_horizontalChildGap" format="dimension" />
        <!-- 标签之间的垂直间距 -->
        <attr name="fl_verticalChildGap" format="dimension" />
        <!-- 是否平均分配每一行的剩余水平方向的空白区域给该行的标签 -->
        <attr name="fl_isDistributionWhiteSpacing" format="boolean" />
    </declare-styleable>

3、添加控件类

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

import com.toastmemo.R;

/**
 * 作者:王浩 邮件:bingoogolapple@gmail.com
 * 创建时间:15/6/24 11:21
 * 描述:流式布局
 */
public class BGAFlowLayout extends ViewGroup {
    private List<Row> mRows = new ArrayList<Row>();
    private int mHorizontalChildGap;
    private int mVerticalChildGap;
    private boolean mIsDistributionWhiteSpacing = true;

    public BGAFlowLayout(Context context) {
        this(context, null);
    }

    public BGAFlowLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public BGAFlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initDefaultAttrs(context);
        initCustomAttrs(context, attrs);
    }

    private void initDefaultAttrs(Context context) {
        mHorizontalChildGap = dp2px(context, 10);
        mVerticalChildGap = dp2px(context, 10);
    }

    private void initCustomAttrs(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BGAFlowLayout);
        final int N = typedArray.getIndexCount();
        for (int i = 0; i < N; i++) {
            initCustomAttr(typedArray.getIndex(i), typedArray);
        }
        typedArray.recycle();
    }

    private void initCustomAttr(int attr, TypedArray typedArray) {
        if (attr == R.styleable.BGAFlowLayout_fl_horizontalChildGap) {
            /**
             * getDimension和getDimensionPixelOffset的功能差不多,都是获取某个dimen的值,如果是dp或sp的单位,将其乘以density,如果是px,则不乘;两个函数的区别是一个返回float,一个返回int. getDimensionPixelSize则不管写的是dp还是sp还是px,都会乘以denstiy.
             */
            mHorizontalChildGap = typedArray.getDimensionPixelOffset(attr, mHorizontalChildGap);
        } else if (attr == R.styleable.BGAFlowLayout_fl_verticalChildGap) {
            mVerticalChildGap = typedArray.getDimensionPixelOffset(attr, mVerticalChildGap);
        } else if (attr == R.styleable.BGAFlowLayout_fl_isDistributionWhiteSpacing) {
            mIsDistributionWhiteSpacing = typedArray.getBoolean(attr, mIsDistributionWhiteSpacing);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
        int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
        /**
         * 1.EXACTLY:100dp,match_parent
         * 2.AT_MOST:wrap_content
         * 3.UNSPCIFIED:子控件想要多大就多大，很少见（ScrollView）
         */
        int modeHeight = MeasureSpec.getMode(heightMeasureSpec);

        mRows.clear();
        Row row = new Row(sizeWidth);

        View child;
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            child = getChildAt(i);
            measureChild(child, widthMeasureSpec, heightMeasureSpec);
            if (!row.addChild(child)) {
                mRows.add(row);
                row = new Row(sizeWidth);
                row.addChild(child);
            }
        }

        // 添加最后一行
        if (!mRows.contains(row)) {
            mRows.add(row);
        }

        int height = 0;
        int rowCount = mRows.size();
        for (int i = 0; i < rowCount; i++) {
            height += mRows.get(i).mHeight;
            if (i != rowCount - 1) {
                height += mVerticalChildGap;
            }
        }
        setMeasuredDimension(sizeWidth, modeHeight == MeasureSpec.EXACTLY ? sizeHeight : height + getPaddingTop() + getPaddingBottom());
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int rowCount = mRows.size();
        int top = getPaddingTop();
        Row row;
        for (int i = 0; i < rowCount; i++) {
            row = mRows.get(i);
            if (mIsDistributionWhiteSpacing && i != rowCount - 1) {
                row.layout(true, top);
            } else {
                row.layout(false, top);
            }
            top += row.mHeight + mVerticalChildGap;
        }
    }

    private class Row {
        private List<View> mViews = new ArrayList<View>();
        private int mWidth;
        private int mNewWidth;
        private int mHeight;
        private int mMaxWidth;

        public Row(int sizeWidth) {
            mMaxWidth = sizeWidth - getPaddingLeft() - getPaddingRight();
        }

        public boolean addChild(View child) {
            if (isOutOfMaxWidth(child.getMeasuredWidth())) {
                return false;
            } else {
                mViews.add(child);
                mWidth = mNewWidth;

                int childHeight = child.getMeasuredHeight();
                mHeight = mHeight < childHeight ? childHeight : mHeight;
                return true;
            }
        }

        private boolean isOutOfMaxWidth(int childWidth) {
            if (mViews.size() == 0) {
                mNewWidth = mWidth + childWidth;
            } else {
                mNewWidth = mWidth + mHorizontalChildGap + childWidth;
            }
            return mNewWidth > mMaxWidth;
        }

        /**
         * @param isNeedSplit 是否需要平均分配空白区域给每一个子孩子
         * @param top
         */
        public void layout(boolean isNeedSplit, int top) {
            if (mViews.size() == 0) {
                return;
            }

            int left = getPaddingLeft();
            int count = mViews.size();
            int splitWidth = (mMaxWidth - mWidth) / count;
            View view;
            for (int i = 0; i < count; i++) {
                view = mViews.get(i);
                int childWidth = view.getMeasuredWidth();
                int childHeight = view.getMeasuredHeight();
                if (isNeedSplit) {
                    childWidth = childWidth + splitWidth;
                    view.getLayoutParams().width = childWidth;
                    if (splitWidth > 0) {
                        /**
                         * 1.EXACTLY:100dp,match_parent
                         * 2.AT_MOST:wrap_content
                         * 3.UNSPCIFIED:子控件想要多大就多大，很少见（ScrollView）
                         */
                        int widthMeasureSpec = MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.EXACTLY);
                        int heightMeasureSpec = MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.EXACTLY);
                        view.measure(widthMeasureSpec, heightMeasureSpec);
                    }
                }

                int topOffset = (int) ((mHeight - childHeight) / 2.0 + 0.5);
                view.layout(left, top + topOffset, left + childWidth, top + topOffset + childHeight);

                left += childWidth + mHorizontalChildGap;
            }
        }
    }

    public static int dp2px(Context context, float dpValue) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, context.getResources().getDisplayMetrics());
    }
}

4、MainActivity中使用

使用方法主要代码：

//设置标签内容样式

private TextView getLabel(String text) {
		TextView label = new TextView(this);
		label.setTextColor(Color.parseColor("#f2f2f2"));
		label.setBackgroundResource(R.drawable.shape_label_bg);
		label.setGravity(Gravity.CENTER);
		label.setSingleLine(true);
		label.setEllipsize(TextUtils.TruncateAt.END);
		int paddingTop = BGAFlowLayout.dp2px(this, 5);
		int paddingLeft = BGAFlowLayout.dp2px(this, 10);
		label.setPadding(paddingLeft, paddingTop, paddingLeft, paddingTop);
		label.setText(text);
		return label;
	}

//添加标签，其中labels是从网络上取到的字符数组。

	private labels[] = {"萌妹子","漂亮","很有个性"}
	private void addLabel() {
		for (String label : labels) {
			System.out.println(label);
			if (!TextUtils.isEmpty(label)) {
				mFlowLayout.addView(getLabel(label), new ViewGroup.MarginLayoutParams(ViewGroup.MarginLayoutParams.WRAP_CONTENT, ViewGroup.MarginLayoutParams.WRAP_CONTENT));
			}
		}
	}

就这样，一个流式布局的例子就好了。