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

来源：互联网发布：2016年e道商城网络传销编辑：程序博客网时间：2024/05/22 14:33

我们在开发的时候通常需要加标签，对于这个标签怎么说呢，反正也挺复杂的，最初开发这个标签的时候还是没有思路的，后来在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);

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

0 0