流式标签

效果图

Java代码

public class FlowLayout extends ViewGroup {
    private float mWidthMargin;
    private float mHeightMargin;

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

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

    public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.FlowLayout);
        mWidthMargin = array.getDimension(R.styleable.FlowLayout_width_margin, AppUtils.dp2px(10, getResources().getDisplayMetrics()));
        mHeightMargin = array.getDimension(R.styleable.FlowLayout_height_margin, AppUtils.dp2px(10, getResources().getDisplayMetrics()));
        array.recycle();
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childCount = getChildCount();
        int horizontalWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
        int availableWidth = horizontalWidth;
        int childTop = getPaddingTop();
        int childLeft = getPaddingLeft();
        int maxLineHeight = 0;  //每一行最大高度

        for (int i = 0; i < childCount; i++) {
            View childAt = getChildAt(i);
            if (childAt != null && childAt.getVisibility() != View.GONE) {
                int childWidth = childAt.getMeasuredWidth();
                int childHeight = childAt.getMeasuredHeight();

                //不够放了
                if (availableWidth < childWidth) {
                    availableWidth = horizontalWidth;
                    childTop += maxLineHeight + mHeightMargin;
                    //重置每行的最大高度
                    maxLineHeight = 0;
                    //重置childLeft
                    childLeft = getPaddingLeft();
                }
                childAt.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight);
                childLeft += childWidth + mWidthMargin;
                availableWidth -= childWidth + mWidthMargin;
                maxLineHeight = Math.max(maxLineHeight, childHeight);
            }
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);

        if (widthMode != MeasureSpec.EXACTLY) {
            width = AppUtils.dp2px(200, getResources().getDisplayMetrics());
        }
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);
        }
        if (heightMode != MeasureSpec.EXACTLY) {
            setMeasuredDimension(width, getDesiredHeight(width));
        } else {
            setMeasuredDimension(width, height);
        }
    }

    private int getDesiredHeight(int width) {
        int horizontalWidth = width - getPaddingLeft() - getPaddingRight();
        int availableWidth = horizontalWidth;
        int totalHeight = getPaddingTop() + getPaddingBottom();
        int maxLineHeight = 0;
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            View childAt = getChildAt(i);
            if (childAt != null && childAt.getVisibility() != View.GONE) {
                int childWidth = childAt.getMeasuredWidth();
                int childHeight = childAt.getMeasuredHeight();
                if (availableWidth < childWidth) {
                    availableWidth = horizontalWidth;
                    totalHeight += maxLineHeight + mHeightMargin;
                    maxLineHeight = 0;
                }
                availableWidth -= childWidth + mWidthMargin;
                maxLineHeight = Math.max(maxLineHeight, childHeight);
                if (i == childCount - 1) {
                    totalHeight += maxLineHeight;
                }
            }
        }
        return totalHeight;
    }
}

style属性

   <declare-styleable name="FlowLayout">
        <attr name="width_margin" format="dimension" />
        <attr name="height_margin" format="dimension" />
    </declare-styleable>

使用方法

        <com.huli.hulitestapplication.views.FlowLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            app:width_margin="10dp">

            <TextView
                android:id="@+id/btn_web_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tv_flow_bg"
                android:text="WebView"
                android:textColor="@android:color/white" />

            <TextView
                android:id="@+id/btn_pointIndicator"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tv_flow_bg"
                android:text="pointIndicator"
                android:textColor="@android:color/white" />

            <TextView
                android:id="@+id/btn_error"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tv_flow_bg"
                android:text="热修复"
                android:textColor="@android:color/white" />

            <TextView
                android:id="@+id/btn_toast"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tv_flow_bg"
                android:text="toast"
                android:textColor="@android:color/white" />

            <TextView
                android:id="@+id/alert_dialog"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tv_flow_bg"
                android:text="alert_dialog"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tv_flow_bg"
                android:text="美图秀秀"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tv_flow_bg"
                android:text="捕鱼达人"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tv_flow_bg"
                android:text="WIFI万能钥匙"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tv_flow_bg"
                android:text="微信"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tv_flow_bg"
                android:text="你好1"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tv_flow_bg"
                android:text="hao上网导航"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tv_flow_bg"
                android:text="免费游戏"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tv_flow_bg"
                android:text="优酷视频"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tv_flow_bg"
                android:text="百度地图"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tv_flow_bg"
                android:text="天天动听"
                android:textColor="@android:color/white" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/tv_flow_bg"
                android:text="腾讯手机管家"
                android:textColor="@android:color/white" />

        </com.huli.hulitestapplication.views.FlowLayout>