Android仿淘寶切換商品列表布局效果的示例代碼

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

效果圖：

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

分析：

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

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

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

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

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

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

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

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

第二步：在onCreateViewHolder()方法中根據自己設置的布局類型切換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：設置布局類型 
 adapter.setType(1); 
 //2：設置對應的布局管理器 
 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的話，我可以后續加上

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。