美文网首页程序猿学习优秀案例Android
FlowLayout流式布局实现标签、类似热门搜索这种效果

FlowLayout流式布局实现标签、类似热门搜索这种效果

作者: 八怪不姓丑 | 来源:发表于2016-09-25 14:51 被阅读8368次

本文所使用的FlowLayout来自于鸿洋大神的框架。
正好现在在做项目需要用到。自己试着用了下,具体可以看效果图
鸿洋的github:https://github.com/hongyangAndroid/FlowLayout

gif.gif

android Studio中注入依赖:

compile 'com.zhy:flowlayout-lib:1.0.3'

布局文件:
zhy:max_select=设置可选中的tag数量。
zhy:max_select="-1" 不限制。
zhy:max_select="5"限制可选中5个标签。适合文章发布选择标签开发。
auto_select_effect="true | false"设置点击效果,默认显示


<com.zhy.view.flowlayout.TagFlowLayout
            android:layout_marginTop="@dimen/dp_15"
            android:id="@+id/search_page_flowlayout"
            zhy:max_select="-1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

标签TextView及风格的设置:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/flowlayout_tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:background="@drawable/flowlayout_shap"
    android:text="Helloworld"
    android:textColor="@color/black">
</TextView>

这里TextView用到了shap风格:
color 选中标签颜色
blackground | drawable 已选中背景。这里我引用了一个shape风格
state_checked 是否显示选中状态效果。
blackground | drawable 未选中背景。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/theme"
        android:drawable="@drawable/button_shape"
        android:state_checked="true"></item>
    <item android:drawable="@drawable/bg_black_shape"></item>
</selector>

数据源:

 final LayoutInflater mInflater = LayoutInflater.from(SearchPageActivity.this);
        search_page_flowlayout.setAdapter(new TagAdapter<String>(mVals)
        {
            @Override
            public View getView(FlowLayout parent, int position, String s)
            {
                TextView tv = (TextView) mInflater.inflate(R.layout.search_page_flowlayout_tv,
                        search_page_flowlayout, false);
                tv.setText(s);
                return tv;
            }
        });

监听标签点击事件:

  search_page_flowlayout.setOnTagClickListener(new TagFlowLayout.OnTagClickListener()
        {
            @Override
            public boolean onTagClick(View view, int position, FlowLayout parent)
            {
                Toast.makeText(SearchPageActivity.this, mVals[position], Toast.LENGTH_SHORT).show();
                //view.setVisibility(View.GONE);
                return true;
            }
        });

设置监听事件的回调:

search_page_flowlayout.setOnSelectListener(new TagFlowLayout.OnSelectListener()
        {
            @Override
            public void onSelected(Set<Integer> selectPosSet)
            {
                SearchPageActivity.this.setTitle("choose:" + selectPosSet.toString());
            }
        });

新手上路!欢迎指导!
以后经常会在简书,csdn更新自己开发过程中遇到的问题,和一些好用的框架。
包括一些互联网的经验分享,欢迎同行交流
源码:https://github.com/wapchief/android-CollectionDemo

相关文章

网友评论

  • d3163db4c2ea:你好 请问下怎么设置item之间的间隔呢 左右价格和上下间隔
  • 抬头仰望放肆的微笑v:请问大佬我把textview替换成了CheckBox,之后setOnTagClickListener和setOnSelectListener就监听不到了,这该怎么解决呢
    八怪不姓丑:跟CheckBox焦点冲突吧,CheckBox本来就包括选中和未选中的点击事件。如果你tag用CheckBox,那用这个标签选择控件的意义又在哪里?
  • 7c6541ec3337:你这个怎么设置他为横向排列的,我这边是竖着的。。。。大佬
    7c6541ec3337:@八怪不姓丑 mFlowlyout.setAdapter(new TagAdapter<String>(mVals) {
    @Override
    public View getView(FlowLayout parent, int position, String s) {
    L.e("tsh123",s);
    TextView tv = (TextView) mInflater.inflate(R.layout.tsh_liushi_layout,
    parent, false);
    tv.setText(s);
    return tv;
    }

    });
    7c6541ec3337:@八怪不姓丑 使用了
    八怪不姓丑:@anroom 使用TagAdapter了吗
  • 7c6541ec3337:你这个怎么设置他为横向排列的,我这边是竖着的。。。。大佬
  • AndYMJ:我将 流式布局 ,作为一个recycleview item中的布局。如何刷新 流式布局的数据啦?
    AndYMJ:@八怪不姓丑 解决了,我多加了一个判断。导致数据没有清空。:joy:
    八怪不姓丑:@YMJAndroid 或者你也可以尝试调用flowview.onChanged
    八怪不姓丑:@YMJAndroid 直接更新recycleview item不行吗
  • AndYMJ:请问如何刷新数据啦 ?
  • a042550132c1:您好,您的这个图片的效果是怎么实现的,有开源项目吗?就是这个带热词和搜索历史的
    a042550132c1:@八怪不姓丑 谢谢
    八怪不姓丑:@八怪不姓丑 搜索历史是使用GreenDao数据库
    八怪不姓丑:@A兔子兔子 https://github.com/wapchief/android-CollectionDemo里面有
  • 烂吹笙:怎么设置默认选中第一个
    八怪不姓丑:@DawsonKing tagAdapter.setSelectList(0)
  • a50cf46914d2:支持单选吗
    八怪不姓丑: @筱内涵丶 支持
  • a50cf46914d2:支持单选吗?
  • 明风桦:我昨天写这个有错,也是用大神的,今天看了你的才知道自己一个地方写错了,哈哈,太感谢你了
  • a042550132c1:你好,我这边 search_page_flowlayout.setAdapter 这个 setAdapter 怎么打出来的? 还有监听的方法,我也打不出来,我增加依赖后,只有布局像你一样创建出来了, 那么 适配器怎么创建?还是不用创建
    a042550132c1:这个适配器也不用我们自己写是吗?
    八怪不姓丑:或者参考我最近写的:http://www.jianshu.com/p/4593f963d0fe
    八怪不姓丑:不用创建,没有监听方法是不是实例化有问题?
  • 南城十年:字体变色怎搞
    a042550132c1:具体的设置怎么弄到啊?我 声明控件id后 ,再帮定,但是那些 setAdapter 不出来啊
    南城十年:@八怪不姓丑 谢了
    八怪不姓丑:自定义shape,设置选中和未选中的颜色
  • d4018202d33d:有源码吗
    八怪不姓丑:@傻雪燃 https://github.com/wapchief/android-CollectionDemo
    下雨了It:@八怪不姓丑 358031923@qq.com
    八怪不姓丑:@d4018202d33d 有,你可以留个邮箱我发给你
  • 爱在蔓延中:赞一个
    d3163db4c2ea:你好 请问下怎么设置item之间的间隔呢 左右价格和上下间隔
    八怪不姓丑:@爱在蔓延中 多谢支持!

本文标题:FlowLayout流式布局实现标签、类似热门搜索这种效果

本文链接:https://www.haomeiwen.com/subject/ophfyttx.html