快捷導(dǎo)航

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

更新時(shí)間：2017年07月24日 09:36:03 作者：陪你嘮嗑

這篇文章主要介紹了Android仿淘寶切換商品列表布局效果的示例代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

效果圖：

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

分析：

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

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

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

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

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

第一步：在adapter中重寫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;
 }

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

第三步：在點(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：刷新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ù)加上

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

您可能感興趣的文章: