本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。
这篇文章是接着上篇文章《商城项目实战 | 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. 效果图
修改代码之后，运行效果得到如下图所示。
实现效果
捣鼓了一下，最终还是实现了商品列表 list 和 grid 模式切换，个人建议，Adapter 的 notify 方法还是需要一些完善的，所以在实际开发中还是尽量少通过这种来对布局刷新，对于实现商品列表 list 和 grid 模式切换，如果有更好的方法的话，请指教。
撸这个项目的一半，你就是大神 , 戳http://mp.weixin.qq.com/s/ZagocTlDfxZpC2IjUSFhHg
