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单选、多选事件

效果图如图所示:

Android中FlowTagLayout流式布局的使用_第1张图片

主要代码如下:

点击事件

// 点击
		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 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 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如下所示



    


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




    
    
    
    


资源文件round_rextangle_bg.xml如下:



     
        
            
            
            
        
    
    
        
           
            
            
        
    
    
        
            
            
            
        
    


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

此篇文章的FlowTagLayout的Demo地址为(此demo是用Eclipse编写,studio不能直接运行):http://download.csdn.net/detail/shihuiyun/9598749
有需要是可以下载下来看看



你可能感兴趣的:(Android中FlowTagLayout流式布局的使用)