商城项目实战 | 17.1 轻松实现商品列表 list 和 grid 模式切换

本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。

这篇文章是接着上篇文章《商城项目实战 | 16.1 TabLayout 实现商品排序功能》的，本文将着重介绍如何轻松商品列表 list 和 grid 模式切换，先看实现效果吧。

实现效果

大家一定很奇怪，为什么商品列表 list 和 grid 模式切换要特别写一篇文章来讲呢？因为小编我遇到坑了，不知道看到本文的各位是否有同样的经历啊，下面就详细说说怎么回事吧。

RecyclerView 的 notify 的坑

RecyclerView 是 ListView 和 GridView 的新的列表控件，意在代替 ListView 和 GridView，它有很多的优点，不必小编我来多说了，谁用谁知道啊，但是小编在使用 RecyclerView 的自带的 notifyItemRangeChanged(int positionStart, int itemCount) 和 notifyDataSetChanged() 想要来实现商品列表 list 和 grid 模式切换时，却不小心掉坑里了。

下面是我最开始实现商品列表 list 和 grid 模式切换的过程。

1. 设置list 和 grid 两种模式

既然需要切换两种模式，自然需要标志来标识两种模式。

public static final int ACTION_LIST=1;
public static final int ACTION_GIRD=2;

ACTION_LIST 是 list 列表模式，ACTION_GIRD 是 grid 模式。

2. Adapter 中添加刷新布局的方法

在商品列表的 Adapter 中添加布局刷新的方法，为之后的模式切换时调用。

public void  resetLayout(int layoutId){

        this.layoutResId  = layoutId;

        notifyItemRangeChanged(0,getDatas().size());

    }

layoutResId 为 item 项的布局 id，getDatas() 方法是用来获取列表所有的数据 list 的，简单来看，这个方法的作用就是重置布局 id，也就是重置布局，然后调用 notifyItemRangeChanged(int positionStart, int itemCount) 方法来刷新布局。

3. 添加模式切换方法

private void changeMode(View v){
       int action = (int) v.getTag();

        if(ACTION_LIST == action){

            mToolbar.setRightButtonIcon(R.drawable.icon_list_32);
            mToolbar.getRightButton().setTag(ACTION_GIRD);

            mWaresAdapter.resetLayout(R.layout.template_grid_wares);


           mRecyclerview_wares.setLayoutManager(new GridLayoutManager(this,2));

        }
        else if(ACTION_GIRD == action){


            mToolbar.setRightButtonIcon(R.drawable.icon_grid_32);
            mToolbar.getRightButton().setTag(ACTION_LIST);

            mWaresAdapter.resetLayout(R.layout.template_hot_wares);

            mRecyclerview_wares.setLayoutManager(new LinearLayoutManager(this));
        }
}

上面的代码也很好理解，根据当前的模式进行切换操作，比如说当前是 list 模式，则要修改 Toolbar 上面的图标为 list 的图标，然后修改当前模式为 ACTION_GIRD，调用前面在 Adapter 中写好的刷新布局的方法 resetLayout(int layoutId)，并且设置列表的 LayoutManager 为网格，也就是列表为网格模式，而当前是 grid 模式时同理。

4. 效果图

运行代码，获取效果图，初始的 list 模式没有任何的问题，但是随后进行 grid 网格模式切换时就出错了，效果如下。

error

这是在模拟器上面运行的情况，使用 notifyItemRangeChanged(int positionStart, int itemCount) 刷新布局看来是不行啊，随后改用 notifyDataSetChanged() 方法来刷新，发现还是这样，于是再多次尝试之后，选择了重置 Adapter。

轻松实现商品列表 list 和 grid 模式切换

在上面的方法失败后，我改用了其他的办法，最终选择了重置 Adapter，那就是每次都要重新 new 一下 Adapter，这个办法虽然不是很完美，但是实现的效果不错，如果有更好的方法的话，欢迎一起讨论。

1. 重置 Adapter

使用 RecyclerView 自带的 notifyItemRangeChanged(int positionStart, int itemCount) 刷新方法虽然简单，但是在实际的使用过程中在数据量较大时一般都会使用 View 重用来解决滑动卡顿的问题，所以即使刷新了，也还是会存在所谓的 View 缓冲，所以最好是重新 new 一下 Adapter 吧。

private void resetAdapter(List datas) {
        if (ACTION_GIRD == (int) toolbar.getRightButton().getTag()) {
            mWaresAdapter = new HWAdapter(this, datas, R.layout.grid_item_wares_layout);
            recyclerView.setLayoutManager(new GridLayoutManager(this, 2));
            recyclerView.setItemAnimator(new DefaultItemAnimator());
        } else if (ACTION_LIST == (int) toolbar.getRightButton().getTag()) {
            mWaresAdapter = new HWAdapter(this, datas, R.layout.recycler_item_wares_layout);
            recyclerView.setLayoutManager(new LinearLayoutManager(this));

            recyclerView.setItemAnimator(new DefaultItemAnimator());
        }

        if(mWaresAdapter == null){
            recyclerView.addItemDecoration(new WareItemDecoration(this, WareItemDecoration.VERTICAL_LIST));
        }
        recyclerView.setAdapter(mWaresAdapter);
    }

根据目前的模式状态，重新 new 适配器，同时重置布局和设置 RecyclerView 的布局排列方式。

2. 修改模式切换方法

修改之前的模式切换方法，在点击图标时，调用 resetAdapter(List datas) 来重置适配器。 Adapter。

private void changeMode(View v){
int action = (int) view.getTag();

        if (ACTION_LIST == action) {//列表模式下

            toolbar.setRightButtonIcon(R.mipmap.ic_list);
            toolbar.getRightButton().setTag(ACTION_GIRD);
            pager.refresh();
            recyclerView.scrollToPosition(0);

        } else if (ACTION_GIRD == action) {//网格模式下

            toolbar.setRightButtonIcon(R.mipmap.ic_grid);
            toolbar.getRightButton().setTag(ACTION_LIST);
            pager.refresh();
            recyclerView.scrollToPosition(0);
        }
}

根据不同的模式下，对商品列表进行 list 模式和 grid 模式的切换。

3. 效果图

修改代码之后，运行效果得到如下图所示。