自定义标签多选更改背景图片

最近在做项目时候遇到了标签布局问题，当时我首选的是用流式布局TagFlowLayout的控件，可是发现不能满足我项目的需求，于是翻看了一下网页写了一个用配合ChekBox来实现多选标签的布局，在这写出来，希望对其他伙伴们有些帮助！
需取效果：

首先：我们需要一个实体类TagBean，确保有id，和name（显示的内容）

public class TagBean {    private String id;    private String name;    public void setId(String id) {        this.id = id;    }    public void setName(String name) {        this.name = name;    }    public String getId() {        return id;    }    public String getName() {        return name;    }    public TagBean(String id, String name) {        this.id = id;        this.name = name;    }}

然后就可以写我们的自定义布局了，重写ViewGroup，采用onDraw，onMeasure，onLayout等方法类似于流式布局，熟悉流式布局的小伙伴应该so easy，这里就不说太多了，直接上代码：

public class LabelLayout extends ViewGroup {    private int mMaxCheckCount = Integer.MAX_VALUE;    /**     * 竖直方向间距, default is 8.0dp.     */    private int horizontalSpacing;    /**     * 水平方向间距, default is 4.0dp.     */    private int verticalSpacing;    //whether or not to draw the divider between labels at horizon.    private boolean enableDivider = false; //是否允许显示分割线  默认不显示    private int dividerColor = 0xffECECEC;    private float dividerHeight;    private int checkboxLayoutId;    //nark checked labels.    private Map<String, Boolean> labelcheckMap;    //mark the first position in a row.    private Set<Integer> rowPositons = new HashSet<>();    //The paint to draw the divider.    Paint dividerPaint;    public LabelLayout(Context context) {        this(context, null);    }    public LabelLayout(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public LabelLayout(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        setWillNotDraw(false);        labelcheckMap = new HashMap<>();        final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.LabelLayout, defStyleAttr, R.style.LabelLayoutDefault);        try {            horizontalSpacing = (int) a.getDimension(R.styleable.LabelLayout_label_horizontalSpacing, dp2px(8.0f));            verticalSpacing = (int) a.getDimension(R.styleable.LabelLayout_label_verticalSpacing, dp2px(4.0f));            checkboxLayoutId = a.getResourceId(R.styleable.LabelLayout_label_checkboxLayout, R.layout.view_label_common);            enableDivider = a.getBoolean(R.styleable.LabelLayout_label_enableDivider, false);            dividerHeight = a.getDimension(R.styleable.LabelLayout_label_dividerHeight, dp2px(2));            dividerColor = a.getColor(R.styleable.LabelLayout_label_dividerColor, 0xffECECEC);        } finally {            a.recycle();        }    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        if (enableDivider) {            if (dividerPaint == null) {                dividerPaint = new Paint();                dividerPaint.setAntiAlias(true);                dividerPaint.setColor(dividerColor);                dividerPaint.setStyle(Paint.Style.FILL);            }            for (Integer top : rowPositons) {                if (top != 0) {                    //draw lines between labels.                    canvas.drawRect(0, top - dividerHeight / 2, getMeasuredWidth(), top + dividerHeight / 2, dividerPaint);                }            }        }    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        final int widthMode = MeasureSpec.getMode(widthMeasureSpec);        final int heightMode = MeasureSpec.getMode(heightMeasureSpec);        final int widthSize = MeasureSpec.getSize(widthMeasureSpec);        final int heightSize = MeasureSpec.getSize(heightMeasureSpec);        measureChildren(widthMeasureSpec, heightMeasureSpec);        int width = 0;        int height = 0;        int row = 0; // The row counter.        int rowWidth = 0; // Calc the current row width.        int rowMaxHeight = 0; // Calc the max tag height, in current row.        final int count = getChildCount();        for (int i = 0; i < count; i++) {            final View child = getChildAt(i);            final int childWidth = child.getMeasuredWidth();            final int childHeight = child.getMeasuredHeight();            if (child.getVisibility() != GONE) {                rowWidth += childWidth;                if (rowWidth > widthSize) { // Next line.                    rowWidth = childWidth; // The next row width.                    height += rowMaxHeight + verticalSpacing;                    rowMaxHeight = childHeight; // The next row max height.                    row++;                } else { // This line.                    rowMaxHeight = Math.max(rowMaxHeight, childHeight);                }                rowWidth += horizontalSpacing;            }//            System.out.println("measured height:" + height);            rowPositons.add(height - verticalSpacing / 2);        }        // Account for the last row height.        height += rowMaxHeight;        // Account for the padding too.        height += getPaddingTop() + getPaddingBottom();        // If the tags grouped in one row, set the width to wrap the tags.        if (row == 0) {            width = rowWidth;            width += getPaddingLeft() + getPaddingRight();        } else {// If the tags grouped exceed one line, set the width to match the parent.            width = widthSize;        }        setMeasuredDimension(widthMode == MeasureSpec.EXACTLY ? widthSize : width,                heightMode == MeasureSpec.EXACTLY ? heightSize : height);    }    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        final int parentLeft = getPaddingLeft();        final int parentRight = r - l - getPaddingRight();        final int parentTop = getPaddingTop();        final int parentBottom = b - t - getPaddingBottom();        int childLeft = parentLeft;        int childTop = parentTop;        int rowMaxHeight = 0;        final int count = getChildCount();        for (int i = 0; i < count; i++) {            final View child = getChildAt(i);            final int width = child.getMeasuredWidth();            final int height = child.getMeasuredHeight();            if (child.getVisibility() != GONE) {                if (childLeft + width > parentRight) { // Next line                    childLeft = parentLeft;                    childTop += rowMaxHeight + verticalSpacing;                    rowMaxHeight = height;                } else {                    rowMaxHeight = Math.max(rowMaxHeight, height);                }                child.layout(childLeft, childTop, childLeft + width, childTop + height);                childLeft += width + horizontalSpacing;            }        }    }    /**     * set the default labels that you wanna to add into       LabelLayout.     *     * @param labels A collection contains objects that implement ILabel interface.     */    public void setLabels(List<TagBean> labels) {        labelcheckMap.clear();        removeAllViews();        if (labels == null || labels.size() == 0) return;        for (final TagBean label : labels) {            final CheckBox tagView = (CheckBox) View.inflate(getContext(), checkboxLayoutId, null);            tagView.setText(label.getName());            addView(tagView);            tagView.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {                @Override                public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {                    if (isChecked) {//选中时添加到map                        if (labelcheckMap.size() > mMaxCheckCount - 1) {                            if (checkListener != null) {                                checkListener.onBeyondMaxCheckCount();                            }                            tagView.setChecked(false);                        } else {                            labelcheckMap.put(label.getId(), true);                            if (checkListener != null) {                                checkListener.onCheckChanged(label, true);                                Drawable drawable = getResources().getDrawable(R.mipmap.select_tag);                                tagView.setCompoundDrawablePadding(10);                                drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());  //设置选中头部图片                               tagView.setCompoundDrawables(drawable, null, null, null);                            }                        }                    } else {//否则及时清理map                        if (labelcheckMap.containsKey(label.getId())) {                            labelcheckMap.remove(label.getId());                            if (checkListener != null) {                                checkListener.onCheckChanged(label, false); //设置未选中头部图片                                tagView.setCompoundDrawables(null, null, null, null);                            }                        }                    }                }            });        }    }    /**     * set the maximum numbers of checked labels.     */    public void setMaxCheckCount(int count) {        mMaxCheckCount = count;    }    /**     * Get the current selected tag number.     */    public int getCheckedLabelsCount() {        int count = 0;        for (Map.Entry<String, Boolean> m : labelcheckMap.entrySet()) {            if (m.getValue()) {                count++;            }        }        return count;    }    public List<String> getCheckedLabelIds() {        List<String> chechedLabelIds = new ArrayList<>();        for (Map.Entry<String, Boolean> m : labelcheckMap.entrySet()) {            if (m.getValue()) {                chechedLabelIds.add(m.getKey());            }        }        return chechedLabelIds;    }    /**     * To serialize checked-label ids as json, make benefit for use.     *     * @return json string     */    public String getCheckedIdsAsJson() {        List<String> chechedId = new ArrayList<>();        for (Map.Entry<String, Boolean> m : labelcheckMap.entrySet()) {            if (m.getValue()) {                chechedId.add(m.getKey());            }        }        return new JSONArray(chechedId).toString();    }    private float dp2px(float dp) {        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp,                getResources().getDisplayMetrics());    } //监听方法    private OnCheckChangeListener checkListener;    public interface OnCheckChangeListener {        void onCheckChanged(TagBean label, boolean isChecked);        void onBeyondMaxCheckCount();    }    public void setOnCheckChangedListener(OnCheckChangeListener checkListener) {        this.checkListener = checkListener;    }

上面是布局类代码我全展示出来，
还有就是xml文件的代码：
ChekBox的：

<?xml version="1.0" encoding="utf-8"?><CheckBox xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="32dp"    android:layout_margin="10dp"    android:background="@drawable/label_selector"    android:button="@null"    android:paddingBottom="4dp"    android:paddingLeft="13dp"    android:paddingRight="13dp"    android:paddingTop="4dp"    android:text="hello"    android:textColor="@drawable/label_gray_selector"    android:textSize="16sp" />

背景选中效果代码：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_checked="true">        <shape android:shape="rectangle">            <corners android:radius="6dp" />            <solid android:color="#fff" />        </shape>    </item>    <item>        <shape android:shape="rectangle">            <corners android:radius="6dp" />            <stroke android:width="1dp" android:color="#fff" />        </shape>    </item></selector>

字体选中效果：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:color="#FF9400" android:state_checked="true" />    <item android:color="#434343" /></selector>

主布局 ：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.example.l.tag_label.MainActivity">   <com.example.l.tag_label.LabelLayout       android:id="@+id/label_me"       android:layout_width="match_parent"       android:layout_height="wrap_content"       android:layout_margin="16dp"       >   </com.example.l.tag_label.LabelLayout>   <Button       android:layout_width="match_parent"       android:layout_height="wrap_content"       android:onClick="bt"       android:text="点击"/></LinearLayout>

然后就是activity中的代码了，
首先添加数据：

  private ArrayList<TagBean> initList() {        ArrayList<TagBean> list = new ArrayList<>();        for (int i = 0; i < 8; i++) {            TagBean bean = new TagBean(i + "", "hello" + i);            list.add(bean);        }        return list;    }

然后再把数据传过去，

 tab.setLabels(list);//  设置数据        tab.setMaxCheckCount(4);//  设置最大选中数量        //  点击选中取消监听        tab.setOnCheckChangedListener(new LabelLayout.OnCheckChangeListener() {            @Override            public void onCheckChanged(TagBean label, boolean isChecked) {                String name = label.getName();                Toast.makeText(MainActivity.this, isChecked + "==" + name, Toast.LENGTH_SHORT).show();                Log.d("dd", name + "");                //  在这块可以自己写个集合储存一下                if (isChecked)                    name_liat.add(name);                else                    name_liat.remove(name);            }            @Override            public void onBeyondMaxCheckCount() {            }        });

最后执行自己的button按钮监听方法就可以把集合里面的东西拿出来了。

public void bt(View view) {        for (int i = 0; i <name_liat.size() ; i++) {            Log.d("ee", name_liat.get(i).toString() + "");        }    }

写的够详细，简单了！如果感觉有帮助，请点赞！！^_^
效果图：