用recyclerview实现FlowLayout效果

       最近一直很忙,稍微闲下来整理一下代码,记录一下知识。我们的app里也有flowlayout这种效果的需求,效果如下:

                 

     我们是本地搜索关键词,需要展示这种效果,第一反应就是网上搜索,果真还真有,就是大神的 https://blog.csdn.net/lmj623565791/article/details/38352503  ,直接copy过来,发现不能用(应该是自己没有处理好),没办法接着搜索,还真有另一个比较好用的,https://www.kymjs.com/code/2015/06/06/01/  这个确实比较好用,可以使用,不过后来还是出现问题了(出什么问题忘了),然后就想着自己写吧,就用recycleview实现了上面的效果。

        思路:

       recyclerview 可以实现gridview的效果,而我们需要的效果总觉得很其实和gridview很像,不过又不同,后来想想gridview效果就是我们将revyclerview的span设置为固定值2、3、4等等,然后如果有需要占用多个的时候我们会设置它占用的格数返回相应的值。同理,我们其实可以将网格的格数设置为无限多个,多少个呢?recyclerview的宽度,然后每个textview的宽度是多少,我们就让他占用多少格,这样不就可以实现上面的效果了吗!

    实现:关键代码如下

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRcSearchHistory;
    private Paint mSearchHistoryPaint;
    private int mPaddingSize;
    private SearchHistoryAdapter mSearchHistoryAdapter;
    private ArrayList<String> hotSearchTestList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        hotSearchTestList = new ArrayList<>();
        String str = "";
        for (int i = 0; i < 100; i++) {
            str = str + "家";
            hotSearchTestList.add(str);
        }

        mRcSearchHistory = (RecyclerView) findViewById(R.id.rc_list);
        mRcSearchHistory.setHasFixedSize(true);
        mSearchHistoryPaint = new Paint();//画笔用来计算文字的宽度
        //设置文字的大小,注意布局文件里写的是sp,这里需要进行转换成对应的px,我这里就不写了
        mSearchHistoryPaint.setTextSize(40);
        //textview的大小,包括文字大小和左右内边距,所以这个值表示内边距大小,同样注意转换
        mPaddingSize = 100;
        //获取屏幕的宽度,我这里rccyclerview正好是屏幕的宽度,否则应替换为rec的宽度
        final int width = getWindowManager().getDefaultDisplay().getWidth();
        //这里讲网格的数量设置为屏幕的宽度,网格无限小
        GridLayoutManager gridLayoutManager = new GridLayoutManager(this, width);
        //设置每个文字占据的网格数
        gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                //就是这里 需要测量文字的宽度,加上左右内边距
                int textWidth = (int) mSearchHistoryPaint.measureText(hotSearchTestList.get(position)) + mPaddingSize;
                //如果文字的宽度超过屏幕的宽度,那么我们就设置为屏幕宽度
                return textWidth > width ? width : textWidth;
            }
        });
        mRcSearchHistory.setLayoutManager(gridLayoutManager);
        mSearchHistoryAdapter = new SearchHistoryAdapter(hotSearchTestList);
        mRcSearchHistory.setAdapter(mSearchHistoryAdapter);
    }
}
       adaper就不粘贴出来了,就是加载一个textview。demo下载地址 https://download.csdn.net/download/zhq217217/10432807   ,如有问题,欢迎留言。
  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值