用recyclerview实现FlowLayout效果

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

                 用recyclerview实现FlowLayout效果_第1张图片

     我们是本地搜索关键词,需要展示这种效果,第一反应就是网上搜索,果真还真有,就是大神的 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 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   ,如有问题,欢迎留言。

你可能感兴趣的:(工作记录)