仿天貓App實現商品列表佈局切換效果

Songlcy發表於2016-07-20
APP

昨天有朋友問了我這樣一個需求，就是在天貓App中首頁進入搜尋介面，搜尋出的商品頁中，有一個按鈕可以切換商品列表的佈局。沒有用過或者用的少天貓App的趕緊下載體驗下（哈哈，給天貓打個廣告~）。如果你很懶不想去下載的話，OK，我們來看下面這兩幅圖：

   

上面兩幅截圖分別是點選右上角按鈕後兩種不同佈局的效果。簡單的流程可以概括為：第一次進入頁面，有個預設的佈局，才是點選按鈕，由豎直的線性佈局切換到網格佈局，也可以叫做瀑布流式佈局。看到這裡大家是不是迫不及待得想體驗下了。坐好了嗎，開車~

首先，看下我們今天要實現的效果圖：

      

可以看到上面兩幅圖是我們要實現的效果，UI非常簡單，右上角按鈕醜陋的外表卻又是今天不可或缺的主角。基本的功能也很簡單，就是點選按鈕在兩個不同的佈局間切換。

下面，我們就進入今天的正題。

可以看到商品展示的形式都是以列表的方式來展現。Android中列表控制元件很多了：ListView，GridView，ExpandableListview以及V7裡面的RecyclerView等等。上述的形式都可以輕鬆的配合Adapter資料介面卡來完美實現一個列表功能。那麼，我們今天的這個效果又該如何實現呢？（賣關子開始。。）

早上的時候，提出這個需求的朋友說使用了兩個RecyclerView實現了這個效果。兩個RecyclerView分別對應兩個Adapter、兩個佈局。當時聽了，我的內心是崩潰的。這樣的設計方案在實際的App開發中是絕對不行的。如果單純的為 了實現這個功能，那麼可以理解。但是實際應用當中，資料都來自伺服器，那麼我們為了這麼一個切換功能，還要去多請求一次伺服器嗎，多儲存一些不必要的欄位嗎？顯然這種設計方案是不行的。

相信使用過列表多佈局方案的童靴都比較熟悉了，對哇。這不就是兩個不同佈局一個列表的升級版嗎。並且，V7包中的RecyclerView強大的功能也支援了可以在不同佈局之前的切換功能（LinearLayout，GridLyout，Stragged等等。。）。說到這，相信大家都想到了RecyclerView的佈局管理器：LayoutManager。沒錯！就是它了！


RecyclerView的setLayoutanager()方法可以讓其佈局在不同的排列方式間進行切換，常見的：從線性佈局到網格佈局、瀑布流。上面我們要實現的效果，其實就是從線性佈局到網格佈局的一個格式轉換。看到這，相信大家都明白了。原來是一個方法就能解決的事啦~ 哈哈，還別高興的太早了。

如果是簡單的格式切換，利用上面的方式就已經完成了這種效果。但是細心的朋友可能發現了，我們的效果在切換前和切換後的Item佈局是不一樣的：

線上性佈局的場景下：Item中有圖片、標題、描述。

在網格佈局的場景下：Item中有圖片、標題。

所以，如果不改變佈局Item的顯示，那麼setLayoutManager方法就已經完全勝任了。但是如果要改變不同的Item佈局該怎麼辦呢？下面我們一一道來。

在部落格剛開始的時候，我提到了列表多佈局的方式。這種場景相信大家都不陌生，每天我們都在使用的WeChat，聊天的對話形式就是一個列表：

看到了吧，一個列表不同的排列方式。

那麼，我們今天的效果也離不開這種方式：切換後改變Item的佈局。

RecyclerView的Adapter中有一個getItemViewType(int position)方法，來區別每一個Item的佈局。我們需要重寫該方法來實現不同的佈局方式。在重寫該方法時，返回值為Int型。

在返回值時需要注意，該值要從0開始，依次排下。否則會Crash。

利用該方法的返回值，我們就可以在onCreateViewHolder方法中去根據該返回值載入不用的佈局了,然後在onBindViewHolder方法中同樣根據不同的type去繫結對應佈局的對應控制元件。

基本的實現流程，到這裡就介紹完了。總結起來原理其實也很簡單：

（1）使用RecyclerVew的setLayoutManager方法來控制列表的格式切換。

（2）重寫Adapter的getItemViewType方法來根據自己的需求返回對應的Item佈局。

有朋友說在切換的時候介面有些僵硬，直接就切換出來了。下面我們可以為RecyclerView新增Item的動畫效果。RecyclerView有一個方法叫做：setItemAnimator()。

該方法可以為RecyclerView的Item新增一些動畫效果。但是要注意的是，該方法新增的動畫效果，只有在Item的新增和刪除時才會生效。所以，我們不能用此方法來實現切換時的動畫效果。那麼我們該如何實現呢？

還記得Android3.0之後的屬性動畫吧。沒錯，屬性動畫系列中有一個佈局動畫：LayoutAnimationController。該例項可為佈局中的元件設定動畫效果。ListView和RecyclerView都為我們提供了設定動畫的方法：setLayoutAnimation()。使用該方法就可以輕鬆搞定啦~，下面是核心程式碼：

/**
 * 開啟動畫
 */
private void startAnimation(int anim) {

    LayoutAnimationController lac =
            new LayoutAnimationController(AnimationUtils.loadAnimation(this,anim));
    //動畫執行順序
    lac.setOrder(LayoutAnimationController.ORDER_RANDOM);
    //將佈局動畫設定到RecyclerView
    rv.setLayoutAnimation(lac);
    //啟動動畫
    rv.startLayoutAnimation();
}
在切換佈局的方法中呼叫該方法傳入動畫anim，就搞定啦。

OK，本篇部落格就到這了。最後附上原始碼，有問題的朋友及時給我留言。thks!

下載原始碼




相關文章