交流群 : 668524118
本群主要用于编程技术 ,及创意作品 ,思维架构的交流 ,欢迎喜欢创新 ,热爱生活的朋友加入 !
前言
flow layout, 流式布局, 这个概念在移动端或者前端开发中很常见,特别是在多标签的展示中, 往往起到了关键的作用。然而Android 官方, 并没有为开发者提供这样一个布局, 于是有很多开发者自己做了这样的工作,github上也出现了很多自定义FlowLayout。 接下来,我要介绍是鸿洋大神的FlowLayout,在这里做一下分享。
项目地址:/hongyangAndroid/FlowLayout
FlowLayout
Android流式布局,支持单选、多选等,适合用于产品标签等。
##特色
以setAdapter形式注入数据直接设置selector为background即可完成标签选则的切换,类似CheckBox支持控制选择的Tag数量,比如:单选、多选支持setOnTagClickListener,当点击某个Tag回调支持setOnSelectListener,当选择某个Tag后回调支持adapter.notifyDataChangedActivity重建(或者旋转)后,选择的状态自动保存
##效果图
用法
dependencies {compile 'com.hyman:flowlayout-lib:1.1.2'}
声明
布局文件中声明:
<com.zhy.view.flowlayout.TagFlowLayoutandroid:id="@+id/id_flowlayout"zhy:max_select="-1"android:layout_width="fill_parent"android:layout_height="wrap_content"android:padding="20dp"></com.zhy.view.flowlayout.TagFlowLayout>
支持属性:
max_select
:-1为不限制选择数量,>=1的数字为控制选择tag的数量
支持通过state=checked来控制选中和取消,也可以自己在Adapter 的onSelected和unSelected中分别处理显示。
###设置数据
mFlowLayout.setAdapter(new TagAdapter<String>(mVals){@Overridepublic View getView(FlowLayout parent, int position, String s){TextView tv = (TextView) mInflater.inflate(R.layout.tv,mFlowLayout, false);tv.setText(s);return tv;}});
getView中回调,类似ListView等用法。
对于选中状态
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="/apk/res/android"><item android:color="@color/tag_select_textcolor"android:drawable="@drawable/checked_bg"android:state_checked="true"></item><item android:drawable="@drawable/normal_bg"></item></selector>
设置个background,上面一个状态为android:state_checked,另一个为正常。写写布局文件我都嫌慢,怎么能写一堆代码控制效果,设置改个效果,岂不是没时间dota了。
也可以不依赖state_checked,在下面的回调中自行设置:
#Adapter@Overridepublic void onSelected(int position, View view) {super.onSelected(position, view);}@Overridepublic void unSelected(int position, View view) {super.unSelected(position, view);}
###事件
mFlowLayout.setOnTagClickListener(new TagFlowLayout.OnTagClickListener(){@Overridepublic boolean onTagClick(View view, int position, FlowLayout parent){Toast.makeText(getActivity(), mVals[position], Toast.LENGTH_SHORT).show();return true;}});
点击标签时的回调。
mFlowLayout.setOnSelectListener(new TagFlowLayout.OnSelectListener(){@Overridepublic void onSelected(Set<Integer> selectPosSet){getActivity().setTitle("choose:" + selectPosSet.toString());}});
选择多个标签时的回调。
##预先设置Item选中
//预先设置选中mAdapter.setSelectedList(1,3,5,7,8,9);//获得所有选中的pos集合flowLayout.getSelectedList();
相关源码示例
(1) TagAdapter
那么首先我们得有个Adapter,这里叫做TagAdapter
package com.zhy.view.flowlayout;import android.view.View;import java.util.ArrayList;import java.util.Arrays;import java.util.List;public abstract class TagAdapter<T>{private List<T> mTagDatas;private OnDataChangedListener mOnDataChangedListener;public TagAdapter(List<T> datas){mTagDatas = datas;}public TagAdapter(T[] datas){mTagDatas = new ArrayList<T>(Arrays.asList(datas));}static interface OnDataChangedListener{void onChanged();}void setOnDataChangedListener(OnDataChangedListener listener){mOnDataChangedListener = listener;}public int getCount(){return mTagDatas == null ? 0 : mTagDatas.size();}public void notifyDataChanged(){mOnDataChangedListener.onChanged();}public T getItem(int position){return mTagDatas.get(position);}public abstract View getView(FlowLayout parent, int position, T t);}
12345678910111213141516171819222324252627282930313233343536373839404142434445464748495051
(2)对于TagFlowLayout对Adapter的支持
那么最主要就是提供一个setAdapter的方法:
public void setAdapter(TagAdapter adapter){mTagAdapter = adapter;mTagAdapter.setOnDataChangedListener(this);changeAdapter();}private void changeAdapter(){removeAllViews();TagAdapter adapter = mTagAdapter;TagView tagViewContainer = null;for (int i = 0; i < adapter.getCount(); i++){View tagView = adapter.getView(this, i, adapter.getItem(i));tagView.setDuplicateParentStateEnabled(true);tagViewContainer.setLayoutParams(tagView.getLayoutParams());tagViewContainer.addView(tagView);addView(tagViewContainer);}}@Overridepublic void onChanged(){changeAdapter();}
123456789101112131415161718192223242526272829
源码下载地址:/hongyangAndroid/FlowLayout