Android流式布局FlowLayout，一款针对Tag的布局

交流群 : 668524118本群主要用于编程技术 ,及创意作品 ,思维架构的交流 ,欢迎喜欢创新 ,热爱生活的朋友加入 !前言flow layout，流式布局，这个概念在移动端或者前端开发中很常见，特别是在多标签的展示中，往往起到了关键的作用。然而Android 官方，并没有为开发者提供这样一个布局，于是有很多开发者自己做了这样的工作，github上也出现了很多

裴泓博

26549人浏览 · 2017-12-13 14:15:18

裴泓博 · 2017-12-13 14:15:18 发布

交流群 : 668524118
本群主要用于编程技术 ,及创意作品 ,思维架构的交流 ,欢迎喜欢创新 ,热爱生活的朋友加入 !

前言

flow layout，流式布局，这个概念在移动端或者前端开发中很常见，特别是在多标签的展示中，往往起到了关键的作用。然而Android 官方，并没有为开发者提供这样一个布局，于是有很多开发者自己做了这样的工作，github上也出现了很多自定义FlowLayout。接下来，我要介绍是鸿洋大神的FlowLayout，在这里做一下分享。

项目地址：https://github.com/hongyangAndroid/FlowLayout

FlowLayout

Android流式布局，支持单选、多选等，适合用于产品标签等。

##特色

以setAdapter形式注入数据
直接设置selector为background即可完成标签选则的切换，类似CheckBox
支持控制选择的Tag数量，比如：单选、多选
支持setOnTagClickListener，当点击某个Tag回调
支持setOnSelectListener，当选择某个Tag后回调
支持adapter.notifyDataChanged
Activity重建（或者旋转）后，选择的状态自动保存

##效果图

用法

dependencies {
 compile 'com.hyman:flowlayout-lib:1.1.2'
}

声明

布局文件中声明：

 <com.zhy.view.flowlayout.TagFlowLayout
        android: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)
   {
       @Override
       public 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="http://schemas.android.com/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
@Override
public void onSelected(int position, View view) {
    super.onSelected(position, view);
}

@Override
public void unSelected(int position, View view) {
    super.unSelected(position, view);
}

###事件

mFlowLayout.setOnTagClickListener(new TagFlowLayout.OnTagClickListener()
{
  @Override
  public boolean onTagClick(View view, int position, FlowLayout parent)
  {
      Toast.makeText(getActivity(), mVals[position], Toast.LENGTH_SHORT).show();
      return true;
  }
});

点击标签时的回调。

mFlowLayout.setOnSelectListener(new TagFlowLayout.OnSelectListener()
{
  @Override
  public 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);

}
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
(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);
   }

}
@Override
public void onChanged()
{
   changeAdapter();
}
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29