FlexboxLayout是Google推出的Android可伸
缩布局(流式布局) 官方项目地址 https://github.com/google/flexbox-layout
FlexboxLayout是我开发中用得非常多的一个控件，特别是针对不固定宽高的item布局代替Recycleview很好地实现了我的很多需求，强烈推荐使用。
关于FlexboxLayout控件的使用以及排布方式浏览器一搜一大把文章，但是搜索结果很少看到关于选中事件（单选/多选）的描述。
按照以往惯例，先上效果图（红色框框部分即逻辑需求）
单选or多选.png
单选or多选.gif
看完效果直接上代码干货：
1.app中的build.gradle
apply plugin: 'com.android.application'
android {
compileSdkVersion 26
buildToolsVersion "26.0.2"
defaultConfig {
applicationId "com.lxlProject.www"
minSdkVersion 19
targetSdkVersion 26
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:26.+'
compile 'com.android.support.constraint:constraint-layout:1.0.2'
testCompile 'junit:junit:4.12'
compile 'com.android.support:recyclerview-v7:26.0.0-alpha1'
compile 'com.android.support:appcompat-v7:26.0.0-alpha1'
compile 'com.android.support:support-v4:26.0.0-alpha1'
compile 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.25'
compile 'com.google.android:flexbox:0.2.6'
compile 'com.blankj:utilcode:1.9.1'
}
2.activity_btn_java.xml
<?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.lxlProject.www.ui.BtnJavaActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="@color/colorLableBg"
android:text="单选：" />
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexboxLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexWrap="wrap" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="@color/colorLableBg"
android:text="多选：" />
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexboxLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexWrap="wrap" />
</LinearLayout>
3.BtnJavaActivity.java
public class BtnJavaActivity extends AppCompatActivity {
private FlexboxLayout flexboxLayout;
private List<EvaluateBean> mList = new ArrayList();//单选数据mList
//多选数据 为了防止单选多选数据冲突 此处多new一个mListMore 来使用 具体情况可灵活根据后台动态数据而定
private List<EvaluateBean> mListMore = new ArrayList();
private FlexboxLayout flexboxLayout1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_btn_java);
for (int i = 0; i < 10; i ++){
mList.add(new EvaluateBean("标签选择测试字数和适应度" + i));
mListMore.add(new EvaluateBean("标签选择测试字数和适应度" + i));
}
//服务评价 标签列表
flexboxLayout = (FlexboxLayout) findViewById(R.id.flexboxLayout);
flexboxLayout1 = (FlexboxLayout) findViewById(R.id.flexboxLayout1);
for (int i = 0; i < mList.size(); i++) {
addChildToFlexboxLayout(mList.get(i));
addChildToFlexboxLayout1(mListMore.get(i));
}
}
/**
* 添加孩子到布局中 单选
*/
private void addChildToFlexboxLayout(final EvaluateBean bean) {
View view = LayoutInflater.from(this).inflate(R.layout.item_evaluate, null);
TextView tv = view.findViewById(R.id.tv);
tv.setText(bean.name);
view.setTag(bean);
if (bean.checked) {
tv.setBackgroundResource(R.drawable.shape_evaluate_lable);
tv.setTextColor(VersionUtils.getColor(R.color.colorOrange));
} else {
tv.setBackgroundResource(R.drawable.shape_evaluate_item);
tv.setTextColor(VersionUtils.getColor(R.color.colorTextPrimaryMoreLight));
}
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
bean.checked = true;
for (EvaluateBean labelBean : mList) {
if (!labelBean.equals(bean)){
labelBean.checked = false;
}
}
checkLabeel();
}
});
flexboxLayout.addView(view);
}
private void checkLabeel() {
flexboxLayout.removeAllViews();
for (EvaluateBean labelBean : mList) {
addChildToFlexboxLayout(labelBean);
}
}
/**
* 添加孩子到布局中 多选
*/
private void addChildToFlexboxLayout1(final EvaluateBean bean) {
View view = LayoutInflater.from(this).inflate(R.layout.item_evaluate, null);
TextView tv = view.findViewById(R.id.tv);
tv.setText(bean.name);
view.setTag(bean);
if (bean.checked) {
tv.setBackgroundResource(R.drawable.shape_evaluate_lable);
tv.setTextColor(VersionUtils.getColor(R.color.colorOrange));
} else {
tv.setBackgroundResource(R.drawable.shape_evaluate_item);
tv.setTextColor(VersionUtils.getColor(R.color.colorTextPrimaryMoreLight));
}
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
bean.checked = !bean.checked;
checkLabeel1();
}
});
flexboxLayout1.addView(view);
}
private void checkLabeel1() {
flexboxLayout1.removeAllViews();
for (EvaluateBean labelBean : mListMore) {
addChildToFlexboxLayout1(labelBean);
}
}
}
4.最后说明一下针对上图需求使用Recycleview和FlexboxLayout对比的差异之处：
新建一个Recycleview的类叫BtnRecycleviewActivity.java
public class BtnRecycleviewActivity extends AppCompatActivity {
private RecyclerView mRecyclerView;
private List<EvaluateBean> mList = new ArrayList();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_btn_recycleview);
for (int i = 0; i < 10; i ++){
mList.add(new EvaluateBean("标签选择测试字数和适应度" + i));
}
mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
mRecyclerView.setLayoutManager(new GridLayoutManager(this, 3));
EvaluateAdapter mAdapter = new EvaluateAdapter();
mRecyclerView.setAdapter(mAdapter);
mAdapter.setNewData(mList);
}
}
activity_btn_recycleview.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="com.lxlProject.www.ui.BtnRecycleviewActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
EvaluateAdapter.java
public class EvaluateAdapter extends BaseQuickAdapter<EvaluateBean, BaseViewHolder> {
public EvaluateAdapter(){
super(R.layout.item_evaluate);
}
@Override
protected void convert(BaseViewHolder helper, EvaluateBean item) {
helper.setText(R.id.tv, item.name);
}
}
运行起来的效果是这样的
image.png
明显自适应程度不够灵活，我目前代码是字体数量一致，好奇的宝宝可以试试每个标签字体数量不一致显示出来也是参差不齐非常丑的，所以可以感受到流式布局的灵活和强大了。
源码地址：http://download.csdn.net/download/lxlyhm/10153471（纯java代码）
如果在用kotlin开发的小伙伴们可以看这
源码地址：http://download.csdn.net/download/lxlyhm/10151358（主要类都由kotlin实现）
http://download.csdn.net/download/lxlyhm/10151351（java和kotlin混编）
