最近電商項目中有這樣一個需求，就是在進入商品列表界面，有一個按鈕可以切換商品列表的布局（網(wǎng)格或者垂直列表排列）。

效果圖：

上面兩幅圖分別是點擊右上角按鈕后顯示兩種不同布局的效果。簡單的流程可以概括為：第一次進入頁面，有個默認(rèn)的布局（網(wǎng)格布局），點擊按鈕，由網(wǎng)格布局切換到豎直的線性布局，再次點擊切換到網(wǎng)格布局。

分析：

可以看到商品展示的形式都是以列表的方式來展現(xiàn)，我用的是RecyclerView，這種列表并不復(fù)雜，配合Adapter數(shù)據(jù)適配器就實現(xiàn)了。

提出這個需求時，問了朋友，他說使用了兩個Adapter、兩個布局實現(xiàn)了這個效果。當(dāng)時聽了，我的內(nèi)心是崩潰的。這樣的設(shè)計方案在實際的App開發(fā)中是絕對不行的。如果單純的為 了實現(xiàn)這個功能，那么可以理解。但是實際應(yīng)用當(dāng)中，數(shù)據(jù)都來自服務(wù)器，那么我們?yōu)榱诉@么一個切換功能，還要去多請求一次服務(wù)器嗎，多存儲一些不必要的字段嗎？顯然這種設(shè)計方案是不行的。

RecyclerView強大的功能也支持了可以在不同布局之間的切換功能（LinearLayout，GridLyout，Stragged等等）。說到這，相信大家都想到了RecyclerView的布局管理器：LayoutManager。沒錯！就是它了

RecyclerView的setLayoutanager()方法可以讓其布局在不同的排列方式間進行切換，常見的：從線性布局到網(wǎng)格布局、瀑布流。上面我們要實現(xiàn)的效果，其實就是從網(wǎng)格布局到線性布局的一個切換。看到這，相信大家都明白了,原來這一個方法就能搞定了,不過還別高興的太早了。如果是簡單的格式切換，利用上面的方式就已經(jīng)完成了這種效果，但是我項目的效果在切換前和切換后的Item布局是不一樣的，所以可以參考多布局的思路，RecyclerView的Adapter中有一個getItemViewType(int position)方法，來區(qū)別每一個Item的布局。我們需要重寫該方法來實現(xiàn)不同的布局方式。在重寫該方法時，返回值為Int型。利用該方法的返回值，我們就可以在onCreateViewHolder方法中去根據(jù)該返回值加載不用的布局了,然后在onBindViewHolder方法中同樣根據(jù)不同的type去綁定對應(yīng)布局的對應(yīng)控件。

基本的實現(xiàn)流程，到這里就介紹完了,下面是具體的實現(xiàn)

第一步：在adapter中重寫getItemViewType()方法；添加setType(int type)方法

/**
  * 點擊切換布局的時候調(diào)用這個方法設(shè)置type
  *
  * @param type 商品排列的方式 0：網(wǎng)格；1：垂直列表排列
  */
 public void setType(int type) {
   this.type = type;
 }

 @Override
 public int getItemViewType(int position) {
   return type;
 }

第二步：在onCreateViewHolder()方法中根據(jù)自己設(shè)置的布局類型切換item布局

@Override
 public 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;
 }

第三步：在點擊切換布局圖片時

if(goodsType==0){ 
 showTypeIv.setImageResource(R.mipmap.good_type_grid); 
 //1：設(shè)置布局類型 
 adapter.setType(1); 
 //2：設(shè)置對應(yīng)的布局管理器 
 recyclerView.setLayoutManager(gridLayoutManager); 
 //3：刷新adapter 
 adapter.notifyDataSetChanged(); 
 goodsType=1; 
}else if(goodsType==1){ 
 showTypeIv.setImageResource(R.mipmap.good_type_linear); 
 adapter.setType(0); 
 recyclerView.setLayoutManager(linearLayoutManager); 
 adapter.notifyDataSetChanged(); 
 goodsType=0; 
}

到此列表的布局切換就全部搞定了，如果需要Demo的話，我可以后續(xù)加上

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論