Toolbar+RecyclerView进阶使用（仿淘宝列表、网格布局之间的切换）

最新推荐文章于 2024-10-29 23:09:21 发布

原创最新推荐文章于 2024-10-29 23:09:21 发布 · 2.8k 阅读

7 ·

CC 4.0 BY-SA版权

本文介绍如何在Android应用中使用Toolbar进行菜单项操作并结合RecyclerView实现列表与网格模式的动态切换，包括Toolbar初始化、菜单监听及适配器布局重构等关键步骤。

ToolBar初始化

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar);
        toolbar.setTitle("");
        setSupportActionBar(toolbar);

        // 设置App Logo
        toolbar.setLogo(R.mipmap.dog);


        // 设置Menu
        toolbar.inflateMenu(R.menu.menu);

        /**
            要使用menu需重写onCreateOptionsMenu()方法
            要监听Menu需重写onOptionsItemSelected()方法
                                                        */

RecyclerView

第一次进入应用默认显示列表模式

        adapter = new MyAdapter(this,R.layout.list_item,models);

        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));

        mRecyclerView.setAdapter(adapter);

点击toobar的menu进行模式切换，在toobar监听菜单的方法里进行逻辑判断

        /** 定义一个保存当前状态的变量 */

        switch (item.getItemId()){
            case R.id.item:

                /** 定义了两个常量，意义分别是列表模式，网格模式 */
                if(currentMode == MODE_GRID){

                    /** 动态替换图标，并把当前模式更改 */
                    item.setIcon(R.mipmap.list);
                    currentMode = MODE_LIST;

                    /** 调用适配器里重构布局的方法，并重新设置适配器 */
                    adapter.reBuildLayout(R.layout.grid_item);
                    mRecyclerView.setLayoutManager(new GridLayoutManager(this,2));
                    mRecyclerView.setAdapter(adapter);

                }else if(currentMode == MODE_LIST){

                    item.setIcon(R.mipmap.grid0);
                    currentMode = MODE_GRID;

                    adapter.reBuildLayout(R.layout.list_item);
                    mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
                    mRecyclerView.setAdapter(adapter);

                }


                break;

        }

        return super.onOptionsItemSelected(item);

适配器里的重构布局方法

    public void reBuildLayout(int layoutId){

        this.mLayoutResId = layoutId;

        notifyDataSetChanged();

    }

效果图

这里写图片描述 ······

/**上面效果是优化过后的效果

            1.添加了分割线
            2.切换时保存当前的position

                                    */

源码

完整效果版代码