Android仿淘寶切換商品列表效果
效果圖：
可以看到商品展示的形式都是以列表的方式來(lái)展現(xiàn)，我用的是RecyclerView，這種列表并不復(fù)雜，配合Adapter數(shù)據(jù)適配器就實(shí)現(xiàn)了。
提出這個(gè)需求時(shí)，問(wèn)了朋友，他說(shuō)使用了兩個(gè)Adapter、兩個(gè)布局實(shí)現(xiàn)了這個(gè)效果。當(dāng)時(shí)聽(tīng)了，我的內(nèi)心是崩潰的。這樣的設(shè)計(jì)方案在實(shí)際的App開(kāi)發(fā)中是絕對(duì)不行的。如果單純的為 了實(shí)現(xiàn)這個(gè)功能，那么可以理解。但是實(shí)際應(yīng)用當(dāng)中，數(shù)據(jù)都來(lái)自服務(wù)器，那么我們?yōu)榱诉@么一個(gè)切換功能，還要去多請(qǐng)求一次服務(wù)器嗎，多存儲(chǔ)一些不必要的字段嗎？顯然這種設(shè)計(jì)方案是不行的。
RecyclerView強(qiáng)大的功能也支持了可以在不同布局之間的切換功能（LinearLayout，GridLyout，Stragged等等）。說(shuō)到這，相信大家都想到了RecyclerView的布局管理器：LayoutManager。沒(méi)錯(cuò)！就是它了
第一步：在adapter中重寫(xiě)getItemViewType()方法；添加setType(int type)方法
/*** 點(diǎn)擊切換布局的時(shí)候調(diào)用這個(gè)方法設(shè)置type** @param type 商品排列的方式 0：網(wǎng)格；1：垂直列表排列*/public void setType(int type) {this.type = type;}@Overridepublic int getItemViewType(int position) {return type;}
第二步：在onCreateViewHolder()方法中根據(jù)自己設(shè)置的布局類型切換item布局
@Overridepublic RecyclerView.ViewHolder onCreateMyViewHolder(ViewGroup parent, int viewType) {if (viewType == MainConstant.Classify.SORT_TYPE_GRID) {return new GoodsListViewHolder(inflater.inflate(R.layout.item_goods_list_grid, parent, false));} else if (type == MainConstant.Classify.SORT_TYPE_LINEAR) {return new GoodsListViewHolder(inflater.inflate(R.layout.item_goods_list, parent, false));}return null;}
第三步：在點(diǎn)擊切換布局圖片時(shí)
if(goodsType==0){showTypeIv.setImageResource(R.mipmap.good_type_grid);//1：設(shè)置布局類型adapter.setType(1);//2：設(shè)置對(duì)應(yīng)的布局管理器recyclerView.setLayoutManager(gridLayoutManager);//3：刷新adapteradapter.notifyDataSetChanged();goodsType=1;}else if(goodsType==1){showTypeIv.setImageResource(R.mipmap.good_type_linear);adapter.setType(0);recyclerView.setLayoutManager(linearLayoutManager);adapter.notifyDataSetChanged();goodsType=0;}
到此列表的布局切換就全部搞定了。
評(píng)論
圖片
表情