Android中FlowTagLayout流式布局的使用

何为FlowTagLayout

如果对Java的Swing比较熟悉的话一定不会陌生，就是控件根据ViewGroup的宽，自动的往右添加，如果当前行剩余空间不足，则自动添加到下一行。有点所有的控件都往左飘的感觉，第一行满了，往第二行~所以也叫流式布局。Android并没有提供流式布局，但是某些场合中，流式布局还是非常适合使用的，比如关键字标签，搜索热词列表等

FlowTagLayout

Android流式布局，支持点击、单选、多选等，适合用于产品标签等，用法采用Adapter模式，和ListView、GridView用法一样

特色：

1）填充数据和ListView、GridView用法一样使用Adapter，更新数据直接通过adapter.notifyDataChanged来更新

2）支持点击、单选、多选事件

3）三种模式：FLOW_TAG_CHECKED_NONE、FLOW_TAG_CHECKED_SINGLE、FLOW_TAG_CHECKED_MULTI

4）支持OnTagClickListener单点事件

5）支持OnTagSelectListener单选、多选事件

效果图如图所示：

主要代码如下：

点击事件

// 点击
		mColorTagAdapter = new TagAdapter<>(this);
		mColorFlowTagLayout.setAdapter(mColorTagAdapter);
		mColorFlowTagLayout.setOnTagClickListener(new OnTagClickListener() {
			@Override
			public void onItemClick(FlowTagLayout parent, View view,
					int position) {
				Toast.makeText(MainActivity.this, "单击了一下" + position,
						Toast.LENGTH_SHORT).show();
			}
		});

单选事件

// 单选
		mSizeTagAdapter = new TagAdapter<>(this);		
		mSizeTagAdapter.setSelected(-1);//设置-1是让其初始化适配数据的时候没有默认
		mSizeFlowTagLayout
				.setTagCheckedMode(FlowTagLayout.FLOW_TAG_CHECKED_SINGLE);
		mSizeFlowTagLayout.setAdapter(mSizeTagAdapter);
		mSizeFlowTagLayout.setOnTagSelectListener(new OnTagSelectListener() {

			@Override
			public void onItemSelect(FlowTagLayout parent, int position,
					List<Integer> selectedList) {
				if (selectedList != null && selectedList.size() > 0) {
					StringBuilder sb = new StringBuilder();
					for (int i : selectedList) {
						sb.append(parent.getAdapter().getItem(i));
						sb.append(":");
					}

					Toast.makeText(MainActivity.this, position + sb.toString(),
							Toast.LENGTH_SHORT).show();

				} else {

					Toast.makeText(MainActivity.this, "没有选择标签",
							Toast.LENGTH_SHORT).show();

				}
			}
		});

多选事件：

// 多选
		mMobileTagAdapter = new TagAdapter<>(this);
		mMobileTagAdapter.setSelected(-1);
		mMobileFlowTagLayout
				.setTagCheckedMode(FlowTagLayout.FLOW_TAG_CHECKED_MULTI);

		mMobileFlowTagLayout.setAdapter(mMobileTagAdapter);
		mMobileFlowTagLayout.setOnTagSelectListener(new OnTagSelectListener() {
			@Override
			public void onItemSelect(FlowTagLayout parent, int positon,
					List<Integer> selectedList) {
				if (selectedList != null && selectedList.size() > 0) {
					StringBuilder sb = new StringBuilder();

					for (int i : selectedList) {
						sb.append(parent.getAdapter().getItem(i));
						sb.append(":");
					}
					Toast.makeText(MainActivity.this, sb.toString(),
							Toast.LENGTH_SHORT).show();

				} else {
					Toast.makeText(MainActivity.this, "没有选择标签",
							Toast.LENGTH_SHORT).show();

				}
			}
		});

适配器的布局tag_item.xml如下所示

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
             >
    <TextView
        android:id="@+id/tv_tag"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:textColor="@drawable/ss"
        android:background="@drawable/round_rectangle_bg"
        android:paddingBottom="5dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="5dp"
        />

</LinearLayout>

资源文件ss.xml如图所示：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:color="#ff0000" />
    <item android:state_focused="true" android:color="#ff0000" />
    <item android:state_pressed="true" android:color="#ff0000" />
    <item android:color="#89683B" />

</selector>

资源文件round_rextangle_bg.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
     <item android:state_pressed="true"  >
        <shape android:shape="rectangle">
            
            <corners android:radius="10dp" />
            <stroke android:width="1dp" android:color="#ff0000"  />
        </shape>
    </item>
    <item android:state_selected="true"  >
        <shape android:shape="rectangle">
           
            <corners android:radius="10dp" />
            <stroke android:width="1dp" android:color="#ff0000"  />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#fff" />
            <corners android:radius="10dp" />
            <stroke android:width="1dp" android:color="#89683B"  />
        </shape>
    </item>

</selector>

FlowTagLayout在GitHub上有具体的Demo，地址为 http://www.open-open.com/lib/view/home/1445518079367

此篇文章的FlowTagLayout的Demo地址为（此demo是用Eclipse编写，studio不能直接运行）：http://download.youkuaiyun.com/detail/shihuiyun/9598749
有需要是可以下载下来看看