基于RelativeLayout实现自动换行标签控件

在开发中，我们有时会遇到显示标签的功能。比如做社交app，用户有标签；做电商app，商品也同样有标签......显示标签时，我们需要一次展示出多个标签，但是单个标签的字数可能不同，当一行不足以容纳时，需要换行显示。系统自带控件无法实现该效果，所以我们需要自定义控件来解决。

实现效果如下：

关于自动换行，有多种实现方式，这里基于RelativeLayout来实现。

实现思路：

有了思路，下面进入代码实现环节。

首先，我们自定义TagLayout继承自RelativeLayout。

public class TagLayout extends RelativeLayout {
}
           

判断单行空间是否够用，需要用到TagLayout的宽度，我们在onSizeChanged()方法中获取。

private int mWidth;

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    mWidth = w;
}
           

在RelativeLayout中，动态设置child的位置，需要使用到它的addRule()方法。

/**
 * Adds a layout rule to be interpreted by the RelativeLayout. Use this for
 * verbs that take a target, such as a sibling (ALIGN_RIGHT) or a boolean
 * value (VISIBLE).
 *
 * @param verb One of the verbs defined by
 *        {@link android.widget.RelativeLayout RelativeLayout}, such as
 *         ALIGN_WITH_PARENT_LEFT.
 * @param anchor The id of another view to use as an anchor,
 *        or a boolean value (represented as {@link RelativeLayout#TRUE}
 *        for true or 0 for false).  For verbs that don't refer to another sibling
 *        (for example, ALIGN_WITH_PARENT_BOTTOM) just use -1.
 */
public void addRule(int verb, int anchor) {
    // ...
}
           

addRule()方法的使用示例：

layoutParams.addRule(RelativeLayout.BELOW, 1);表示将该子View添加到viewId==1的子View的下边。

layoutParams.addRule(RelativeLayout.ALIGN_TOP, 1);表示该子View与viewId==1的子View顶部对齐。

下面进入该控件的核心方法，将所有的标签逐个添加进来。代码中附带详细注释。

private void addTags() {
    removeAllViews();

    // 初始化各变量
    int total = getPaddingLeft() + getPaddingRight();// 计算单行的宽度
    int index = 1;// child的索引，同时也是child的viewId
    int bottomAnchor = 1;// 添加到底部的child的id
    int alignTopAnchor = 1;// 与之顶部对齐的child的id
    for (String data : mData) {
        // 初始化child视图
        View child = mInflater.inflate(R.layout.tag, null);
        // setId(index)这行代码很重要，将child的索引设为其id，在下面的代码中使用
        child.setId(index);
        TextView textView = (TextView) child.findViewById(R.id.text);
        textView.setText(data);

        // 测量child的宽度
        child.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
        int childWidth = child.getMeasuredWidth();

        // 为每一个child添加底部间距，这样就形成了行间距
        LayoutParams childParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT);
        childParams.bottomMargin = mChildBottomMargin;

        // 如果单行已有的所有child宽度 + 本次需要添加的child的宽度和左间距 > 整个TagLayout的宽度
        // 此时需要将child换行添加
        if (total + mChildLeftMargin + childWidth > mWidth) {
            // 设置LayoutParams：添加到viewId==bottomAnchor的child的底部
            childParams.addRule(RelativeLayout.BELOW, bottomAnchor);
            // total被重新初始化
            total = getPaddingLeft() + getPaddingRight();
            // 给bottomAnchor和alignTopAnchor赋值，后面会使用到
            bottomAnchor = index;
            alignTopAnchor = index;
        } else {// 此时在同一行添加child
            // 设置LayoutParams：与viewId==alignTopAnchor的child顶部对齐
            childParams.addRule(RelativeLayout.ALIGN_TOP, alignTopAnchor);
            // 如果该child不是本行的第一个
            if (index != alignTopAnchor) {
                // 设置LayoutParams：将child添加到前一个child的右侧
                childParams.addRule(RelativeLayout.RIGHT_OF, index - 1);
                // 设置LayoutParams：为child添加左边距，保持child之间的空隙
                childParams.leftMargin = mChildLeftMargin;
                // total累加child的左间距
                total += mChildLeftMargin;
            }
        }
        // 使用上面设置好的childParams，添加child
        addView(child, childParams);
        // total累加child的宽度
        total += childWidth;
        // index索引+1，进入下一轮循环
        index++;
    }
}
           

到这里，核心代码已经完成。再附上该控件的完整代码。

package net.csdn.blog.ruancoder;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.RelativeLayout;
import android.widget.TextView;

import java.util.List;

public class TagLayout extends RelativeLayout {
    private LayoutInflater mInflater;

    private boolean mInited = false;

    private int mWidth;
    private int mChildLeftMargin;
    private int mChildBottomMargin;

    private List<String> mData;

    public TagLayout(Context context) {
        super(context);
        init(context);
    }

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

    public TagLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        mChildLeftMargin = context.getResources().getDimensionPixelSize(R.dimen.tag_leftmargin);
        mChildBottomMargin = context.getResources().getDimensionPixelSize(R.dimen.tag_bottommargin);
        getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (!mInited) {
                    mInited = true;
                    addTags();
                }
            }
        });
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        mWidth = w;
    }

    public void setData(List<String> data) {
        this.mData = data;
        addTags();
    }

    private void addTags() {
        if (!mInited) {
            return;
        }

        if (mData == null || mData.isEmpty()) {
            return;
        }

        removeAllViews();

        int total = getPaddingLeft() + getPaddingRight();
        int index = 1;
        int bottomAnchor = 1;
        int alignTopAnchor = 1;
        for (String data : mData) {
            View child = mInflater.inflate(R.layout.tag, null);
            child.setId(index);
            TextView textView = (TextView) child.findViewById(R.id.text);
            textView.setText(data);

            child.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
            int childWidth = child.getMeasuredWidth();

            LayoutParams childParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
            childParams.bottomMargin = mChildBottomMargin;

            if (total + mChildLeftMargin + childWidth > mWidth) {
                childParams.addRule(RelativeLayout.BELOW, bottomAnchor);
                total = getPaddingLeft() + getPaddingRight();
                bottomAnchor = index;
                alignTopAnchor = index;
            } else {
                childParams.addRule(RelativeLayout.ALIGN_TOP, alignTopAnchor);
                if (index != alignTopAnchor) {
                    childParams.addRule(RelativeLayout.RIGHT_OF, index - 1);
                    childParams.leftMargin = mChildLeftMargin;
                    total += mChildLeftMargin;
                }
            }
            addView(child, childParams);
            total += childWidth;
            index++;
        }
    }
}
           

最后附上完整工程的代码下载链接：

http://download.csdn.net/detail/ruancoder/9594176