FlexboxLayout选中之——单选/多选
来源:互联网 发布:abb编程培训 编辑:程序博客网 时间:2024/06/15 23:42
FlexboxLayout是Google推出的Android可伸
缩布局(流式布局) 官方项目地址 https://github.com/google/flexbox-layout
FlexboxLayout是我开发中用得非常多的一个控件,特别是针对不固定宽高的item布局代替Recycleview很好地实现了我的很多需求,强烈推荐使用。
关于FlexboxLayout控件的使用以及排布方式浏览器一搜一大把文章,但是搜索结果很少看到关于选中事件(单选/多选)的描述。
按照以往惯例,先上效果图(红色框框部分即逻辑需求)
看完效果直接上代码干货:
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); }}
运行起来的效果是这样的
明显自适应程度不够灵活,我目前代码是字体数量一致,好奇的宝宝可以试试每个标签字体数量不一致显示出来也是参差不齐非常丑的,所以可以感受到流式布局的灵活和强大了。
源码地址: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混编)
- FlexboxLayout选中之——单选/多选
- JAVASCRIPT之单选按钮,双击取消选中
- FlexboxLayout
- FlexboxLayout
- FlexboxLayout
- FlexboxLayout
- FlexboxLayout
- Material Design整理(六)——SearchView及FlexboxLayout
- 单选按钮选中判断
- 取消单选按钮选中
- 单选按钮 默认选中
- jquery复选 单选 选中
- Jquery 获取单选、多选(radio、checkbox)选中值
- Android开发之玩转FlexboxLayout布局
- Android开发之玩转FlexboxLayout布局
- Android开发之玩转FlexboxLayout布局
- 百分比布局标签布局之FlexBoxLayout
- Android之FlexboxLayout弹性布局的介绍
- Django项目中创建前端Vue.js项目的步骤
- Java校招面试 Google面试官亲授
- 使用阿里ARouter路由实现模块化开发流程
- centos7服务安装_流媒体服务器_安装nginx
- C#串口上位机源代码
- FlexboxLayout选中之——单选/多选
- ubuntu16.04环境用pip3安装dlib
- struts2-hibernate 总结
- 171208之Oracle总结(二)
- 省选专练[HNOI2010]BOUNCE 弹飞绵羊
- Hello Createjs
- HDOJ1397 Goldbach's Conjecture(哥德巴赫猜想)
- Ruby元编程
- Web前端开发精品课HTML CSS JavaScript基础教程第二十三章课后编程题答案