先看效果图,项目中要实现展示得效果,使用的谷歌,要使用1.0.0,高版本是用于AndroidX
官方解释:
Note that starting from 1.1.0, the library is expected to use with AndroidX. Please migrate to AndroidX if you use 1.1.0 or above.
Please use 1.0.0 if you haven’t migrated to AndroidX.
implementation 'com.google.android:flexbox:1.0.0'
主要代码
package com.zfg.test.weigt;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import com.google.android.flexbox.FlexboxLayout;
import com.zfg.test.R;
import com.zfg.test.adapter.TagAdapter;
/**
* author : zfg
* e-mail : [email protected]
* date : 2019/7/16
* desc : 标签
*/
public class TagFlowLayout extends FlexboxLayout {
/*是否展示选中效果*/
private boolean isShowHighlight = true;
/*默认和已选的背景*/
private int itemDefaultDrawable;
private int itemSelectDrawable;
/*默认和已选的文字颜色*/
private int itemDefaultTextColor;
private int itemSelectTextColor;
/*操作模式 0 - 多选 | 1 - 单选 | 2 - 纯展示*/
private int mode = MODE_MULTI_SELECT;
/*可选标签的最大数量*/
private int maxSelection;
public static final int MODE_MULTI_SELECT = 0;
public static final int MODE_SINGLE_SELECT = 1;
public static final int MODE_SHOW_SELECT = 2;
public TagFlowLayout(Context context) {
this(context, null);
}
public TagFlowLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public TagFlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TagFlowLayout);
isShowHighlight = ta.getBoolean(R.styleable.TagFlowLayout_tfl_showHighlight, true);
itemDefaultDrawable = ta.getResourceId(R.styleable.TagFlowLayout_tfl_defaultDrawable, 0);
itemSelectDrawable = ta.getResourceId(R.styleable.TagFlowLayout_tfl_selectDrawable, 0);
itemDefaultTextColor = ta.getColor(R.styleable.TagFlowLayout_tfl_defaultTextColor, 0);
itemSelectTextColor = ta.getColor(R.styleable.TagFlowLayout_tfl_selectTextColor, 0);
mode = ta.getInt(R.styleable.TagFlowLayout_tfl_mode, MODE_MULTI_SELECT);
maxSelection = ta.getInt(R.styleable.TagFlowLayout_tfl_maxSelectionCount, 0);
ta.recycle();
}
public void setAdapter(TagAdapter adapter) {
if (adapter == null) {
removeAllViews();
return;
}
adapter.bindView(this);
adapter.addTags();
}
public boolean isShowHighlight() {
return isShowHighlight;
}
public void setShowHighlight(boolean showHighlight) {
isShowHighlight = showHighlight;
}
public int getItemDefaultDrawable() {
return itemDefaultDrawable;
}
public void setItemDefaultDrawable(int itemDefaultDrawable) {
this.itemDefaultDrawable = itemDefaultDrawable;
}
public int getItemSelectDrawable() {
return itemSelectDrawable;
}
public void setItemSelectDrawable(int itemSelectDrawable) {
this.itemSelectDrawable = itemSelectDrawable;
}
public int getItemDefaultTextColor() {
return itemDefaultTextColor;
}
public void setItemDefaultTextColor(int itemDefaultTextColor) {
this.itemDefaultTextColor = itemDefaultTextColor;
}
public int getItemSelectTextColor() {
return itemSelectTextColor;
}
public void setItemSelectTextColor(int itemSelectTextColor) {
this.itemSelectTextColor = itemSelectTextColor;
}
public int getMode() {
return mode;
}
public void setMode(int mode) {
this.mode = mode;
}
public int getMaxSelection() {
return maxSelection;
}
public void setMaxSelection(int maxSelection) {
this.maxSelection = maxSelection;
}
}
布局
<?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=".activity.TagViewActivity">
<include layout="@layout/common_titlebar_layout"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="展示"/>
<com.zfg.test.weigt.TagFlowLayout
android:id="@+id/flow_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:alignContent="flex_start"
app:alignItems="center"
app:dividerDrawable="@drawable/bg_flow_divider"
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="flex_start"
app:showDivider="beginning|middle|end"
app:tfl_defaultDrawable="@drawable/bg_flow_unselect"
app:tfl_defaultTextColor="@color/gray_33"
app:tfl_mode="SHOW"
app:tfl_selectDrawable="@drawable/bg_flow_selected"
app:tfl_selectTextColor="@android:color/white"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="单选"/>
<com.zfg.test.weigt.TagFlowLayout
android:id="@+id/single_flow_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:alignContent="flex_start"
app:alignItems="center"
app:dividerDrawable="@drawable/bg_flow_divider"
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="flex_start"
app:showDivider="beginning|middle|end"
app:tfl_defaultDrawable="@drawable/bg_flow_unselect"
app:tfl_defaultTextColor="@color/gray_33"
app:tfl_mode="SINGLE"
app:tfl_selectDrawable="@drawable/bg_flow_selected"
app:tfl_selectTextColor="@android:color/white"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="多选"/>
<com.zfg.test.weigt.TagFlowLayout
android:id="@+id/mult_flow_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:alignContent="flex_start"
app:alignItems="center"
app:dividerDrawable="@drawable/bg_flow_divider"
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="flex_start"
app:showDivider="beginning|middle|end"
app:tfl_defaultDrawable="@drawable/bg_flow_unselect"
app:tfl_defaultTextColor="@color/gray_33"
app:tfl_mode="MULTI"
app:tfl_selectDrawable="@drawable/bg_flow_selected"
app:tfl_selectTextColor="@android:color/white"/>
<Button
android:id="@+id/count_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="已经选择"/>
</LinearLayout>
更详细代码可以看我得github,欢迎star和指出不足
https://github.com/fenggeZhang/zfgdemo/blob/master/app/src/main/java/com/zfg/test/activity/TagViewActivity.java