安卓中使用流式布局实现标签

我们在开发的时候通常需要加标签，对于这个标签怎么说呢，反正也挺复杂的，最初开发这个标签的时候还是没有思路的，后来在github上面查找了一下资料，了解了通过流式布局来实现这个标签，我记得开始的时候我写标签的时候是三个TextView一个一个添加进去的，后来感觉还是不太好，所以咯就用了流式布局来实现。看一下我的思路。第一步我在github上面找流式布局实现标签功能，找到了一个工具类感觉灰常好用所以就用了，看一下他的工具类

package com.redsun.property.widgets;

import android.content.Context;
import android.content.res.TypedArray;
import android.database.DataSetObserver;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;

import com.redsun.property.R;

/**
 * <Pre>
 * 元素自动换行容器
 * </Pre>
 *
 * @author zhangy
 * @version 1.0
 *          <p>
 *          Create by 14/11/12 下午6:22
 */
public class TagCloudLayout extends ViewGroup {
    private int mLineSpacing;
    private int mTagSpacing;
    private BaseAdapter mAdapter;
    private TagItemClickListener mListener;
    private DataChangeObserver mObserver;

    public TagCloudLayout(Context context) {
        super(context);
        init(context, null, 0);
    }

    public TagCloudLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public TagCloudLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        TagCloudConfiguration config = new TagCloudConfiguration(context, attrs);
        mLineSpacing = config.getLineSpacing();
        mTagSpacing = config.getTagSpacing();
    }

    private void drawLayout() {
        if (mAdapter == null || mAdapter.getCount() == 0) {
            return;
        }

        this.removeAllViews();

        for (int i = 0; i < mAdapter.getCount(); i++) {
            View view = mAdapter.getView(i,null,null);
            final int position = i;
            view.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (mListener != null) {
                        mListener.itemClick(position);
                    }
                }
            });
            this.addView(view);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int wantHeight = 0;
        int wantWidth = resolveSize(0, widthMeasureSpec);
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();
        int childLeft = paddingLeft;
        int childTop = paddingTop;
        int lineHeight = 0;

        //TODO 固定列的数量所需要的代码
        for (int i = 0; i < getChildCount(); i++) {
            final View childView = getChildAt(i);
            LayoutParams params = childView.getLayoutParams();
            childView.measure(
                    getChildMeasureSpec(widthMeasureSpec, paddingLeft + paddingRight, params.width),
                    getChildMeasureSpec(heightMeasureSpec, paddingTop + paddingBottom, params.height)
            );
            int childHeight = childView.getMeasuredHeight();
            int childWidth = childView.getMeasuredWidth();
            lineHeight = Math.max(childHeight, lineHeight);

            if (childLeft + childWidth + paddingRight > wantWidth) {
                childLeft = paddingLeft;
                childTop += mLineSpacing + childHeight;
                lineHeight = childHeight;
            }

            childLeft += childWidth + mTagSpacing;
        }
        wantHeight += childTop + lineHeight + paddingBottom;
        setMeasuredDimension(wantWidth, resolveSize(wantHeight, heightMeasureSpec));
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //TODO 固定列的数量所需要的代码

        int width = r - l;
        int paddingLeft = getPaddingLeft();
        int paddingTop = getPaddingTop();
        int paddingRight = getPaddingRight();
        int childLeft = paddingLeft;
        int childTop = paddingTop;
        int lineHeight = 0;

        for (int i = 0; i < getChildCount(); i++) {
            final View childView = getChildAt(i);
            if (childView.getVisibility() == View.GONE) {
                continue;
            }
            int childWidth = childView.getMeasuredWidth();
            int childHeight = childView.getMeasuredHeight();
            lineHeight = Math.max(childHeight, lineHeight);

            if (childLeft + childWidth + paddingRight > width) {
                childLeft = paddingLeft;
                childTop += mLineSpacing + lineHeight;
                lineHeight = childHeight;
            }

            childView.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight);
            childLeft += childWidth + mTagSpacing;
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new LayoutParams(this.getContext(), attrs);
    }

    public void setAdapter(BaseAdapter adapter){
        if (mAdapter == null){
            mAdapter = adapter;
            if (mObserver == null){
                mObserver = new DataChangeObserver();
                mAdapter.registerDataSetObserver(mObserver);
            }
            drawLayout();
        }
    }

    public void setItemClickListener(TagItemClickListener mListener) {
        this.mListener = mListener;
    }

    public interface TagItemClickListener {
        void itemClick(int position);
    }

    class DataChangeObserver extends DataSetObserver {
        @Override
        public void onChanged() {
            TagCloudLayout.this.drawLayout();
        }

        @Override
        public void onInvalidated() {
            super.onInvalidated();
        }
    }
    public class TagCloudConfiguration {

        private static final int DEFAULT_LINE_SPACING = 5;
        private static final int DEFAULT_TAG_SPACING = 10;
        private static final int DEFAULT_FIXED_COLUMN_SIZE = 3; //默认列数

        private int lineSpacing;
        private int tagSpacing;
        private int columnSize;
        private boolean isFixed;

        public TagCloudConfiguration(Context context,AttributeSet attrs){
            TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TagCloudLayout);
            try {
                lineSpacing = a.getDimensionPixelSize(R.styleable.TagCloudLayout_lineSpacing, DEFAULT_LINE_SPACING);
                tagSpacing = a.getDimensionPixelSize(R.styleable.TagCloudLayout_tagSpacing, DEFAULT_TAG_SPACING);
                columnSize = a.getInteger(R.styleable.TagCloudLayout_columnSize, DEFAULT_FIXED_COLUMN_SIZE);
                isFixed = a.getBoolean(R.styleable.TagCloudLayout_isFixed,false);
            } finally {
                a.recycle();
            }
        }

        public int getLineSpacing() {
            return lineSpacing;
        }

        public void setLineSpacing(int lineSpacing) {
            this.lineSpacing = lineSpacing;
        }

        public int getTagSpacing() {
            return tagSpacing;
        }

        public void setTagSpacing(int tagSpacing) {
            this.tagSpacing = tagSpacing;
        }

        public int getColumnSize() {
            return columnSize;
        }

        public void setColumnSize(int columnSize) {
            this.columnSize = columnSize;
        }

        public boolean isFixed() {
            return isFixed;
        }

        public void setIsFixed(boolean isFixed) {
            this.isFixed = isFixed;
        }
    }
}

他的方法已经封装好了 所以我就直接用了，因为有时候开发就是知道怎么用网上的demo，咱们保证可以run起来就可以了，在微调微调。

<com.redsun.property.widgets.TagCloudLayout
    android:id="@+id/area_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="@dimen/spacing_small"
    android:layout_marginRight="@dimen/spacing_small"
    >


</com.redsun.property.widgets.TagCloudLayout>

这么用它的这个工具类，

holder.areaLayout.removeAllViews();
if (butlerEntity.getArealist() != null && butlerEntity.getArealist().size() > 0) {
    for (ButlerEntity.Area area : butlerEntity.getArealist()) {
        TextView text = new TextView(mct);
        ViewGroup.MarginLayoutParams lp = new ViewGroup.MarginLayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        text.setTextColor(mct.getResources().getColor(R.color.butler_area_textcolor));
        text.setBackground(mct.getResources().getDrawable(R.drawable.bg_bulter_text));
        text.setText(area.getAreaname());
        lp.setMargins(140, 20, 140, 20);
        holder.areaLayout.addView(text, lp);
    }
} else {
    TextView text = new TextView(mct);
    ViewGroup.MarginLayoutParams lp = new ViewGroup.MarginLayoutParams(
            ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    text.setText("暂无片区");
    holder.areaLayout.addView(text, lp);
}

return convertView;

之后就这样实现了它的功能这里需要注意一下

        ViewGroup.MarginLayoutParams lp = new ViewGroup.MarginLayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

这个方法比不可少，否则就会报类型转换异常改工嗯呢该就实现了

 TextView text = new TextView(mct);
        ViewGroup.MarginLayoutParams lp = new ViewGroup.MarginLayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        text.setTextColor(mct.getResources().getColor(R.color.butler_area_textcolor));
        text.setBackground(mct.getResources().getDrawable(R.drawable.bg_bulter_text));
        text.setText(area.getAreaname());
        lp.setMargins(140, 20, 140, 20);
        holder.areaLayout.addView(text, lp);

这几句就是调用它的核心代码