RecyclerView 和 ListView 效能和效果區別
- RecyclerView 和 ListView 佈局效果的對比
- RecyclerView 和 ListView 一些常用的功能 和 API 的對比
- RecyclerView 和 ListView 在 Android L 引入巢狀滾動機制之後的對比
有一點需要強調下,文中所有的效果在真機上都是很流暢的,因為錄製 GIF 圖很容易掉幀,所以特地放慢了操作,千萬不要誤會成卡頓了啊!
佈局效果對比
作為一枚控制元件,要引起開發者使用的慾望自然先是從顯示效果看起(看臉的世界),ListView 大家對效果已經很熟悉了,這裡直接跳過,而作為 RecyclerView,它能帶給效果要比 ListView 強大得多,如下圖
Android 預設提供的 RecyclerView 就能支援 線性佈局、網格佈局、瀑布流佈局 三種(這裡我們暫且不提程式碼細節,後文再說),而且同時還能夠控制橫向還是縱向滾動。怎樣,從效果上足以碾壓 ListView 有木有。
- 橫向滾動的ListView開源控制元件是不是可以不用再找了?對,你沒看錯!
- 瀑布流效果的開源控制元件是不是可以不用再找了?對,你沒看錯!
- 連橫向滾動的GridView都不用找了!對,你沒看錯!
到此,展示效果上的差距一目瞭然。
API 使用對比
當然,一個控制元件我們不能完全只看效果,關鍵還是要看實用性,看看有沒有方便我們呼叫的 API提高我們的開發效率。所以,接下來我們就從各個方面來看看 RecyclerView 和 ListView 在提供的API呼叫上的一些實踐比較。
基礎使用
ListView 的基礎使用大家再熟悉不過,其使用的關鍵點主要如下:
- 繼承重寫 BaseAdapter 類
- 自定義 ViewHolder 和 convertView 一起完成複用優化工作
由於 ListView 已經老生常談,所以此處就不去寫示例程式碼了。 RecyclerView 基礎使用關鍵點同樣有兩點:
- 繼承重寫 RecyclerView.Adapter 和 RecyclerView.ViewHolder
- 設定佈局管理器,控制佈局效果
示例程式碼大致如下:
// 第一步:繼承重寫 RecyclerView.Adapter 和 RecyclerView.ViewHolder
public class AuthorRecyclerAdapter extends RecyclerView.Adapter<AuthorRecyclerAdapter.AuthorViewHolder> {
...
@Override
public AuthorViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
...
return viewHolder;
}
@Override
public void onBindViewHolder(AuthorViewHolder holder, int position) {
...
}
@Override
public int getItemCount() {
if (mData == null) {
return 0;
}
return mData.size();
}
class AuthorViewHolder extends RecyclerView.ViewHolder {
...
public AuthorViewHolder(View itemView) {
super(itemView);
...
}
}
}
mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
mRecyclerAdapter = new AuthorRecyclerAdapter(mData);
// 第二步:設定佈局管理器,控制佈局效果
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(RecyclerDemoActivity.this);
linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
mRecyclerView.setLayoutManager(linearLayoutManager);
mRecyclerView.setAdapter(mRecyclerAdapter);
從基礎使用上看,我們明顯可以看出,RecyclerView 相比 ListView 在基礎使用上的區別主要有如下幾點:
- ViewHolder 的編寫規範化了
- RecyclerView 複用 Item 的工作 Google 全幫你搞定,不再需要像 ListView 那樣自己呼叫 setTag
- RecyclerView 需要多出一步 LayoutManager 的設定工作
佈局效果
在最開始就提到,RecyclerView 能夠支援各種各樣的佈局效果,這是 ListView 所不具有的功能,那麼這個功能如何實現的呢?其核心關鍵在於 RecyclerView.LayoutManager 類中。從前面的基礎使用可以看到,RecyclerView 在使用過程中要比 ListView 多一個 setLayoutManager 步驟,這個 LayoutManager 就是用於控制我們 RecyclerView 最終的展示效果的。
而 LayoutManager 只是一個抽象類而已,系統已經為我們提供了三個相關的實現類LinearLayoutManager(線性佈局效果)、GridLayoutManager(網格佈局效果)、StaggeredGridLayoutManager(瀑布流佈局效果)。如果你想用 RecyclerView 來實現自己 YY 出來的一種效果,則應該去繼承實現自己的 LayoutManager,並重寫相應的方法,而不應該想著去改寫 RecyclerView。關於 LayoutManager 的使用有下面一些常見的 API(有些在 LayoutManager 實現的子類中)
canScrollHorizontally();//能否橫向滾動
canScrollVertically();//能否縱向滾動
scrollToPosition(int position);//滾動到指定位置
setOrientation(int orientation);//設定滾動的方向
getOrientation();//獲取滾動方向
findViewByPosition(int position);//獲取指定位置的Item View
findFirstCompletelyVisibleItemPosition();//獲取第一個完全可見的Item位置
findFirstVisibleItemPosition();//獲取第一個可見Item的位置
findLastCompletelyVisibleItemPosition();//獲取最後一個完全可見的Item位置
findLastVisibleItemPosition();//獲取最後一個可見Item的位置
上面僅僅是列出一些常用的 API 而已,更多的 API 可以檢視官方文件,通常你想用 RecyclerView 實現某種效果,例如指定滾動到某個 Item 位置,但是你在 RecyclerView 中又找不到可以呼叫的 API 時,就可以跑到 LayoutManager 的文件去看看,基本都在那裡。另外還有一點關於瀑布流佈局效果 StaggeredGridLayoutManager 想說的,看到網上有些文章寫的示例程式碼,在設定了 StaggeredGridLayoutManager 後仍要去 Adapter 中動態設定 View 的高度,才能實現瀑布流,這種做法是完全錯誤的,之所以 StaggeredGridLayoutManager 的瀑布流效果出不來,基本是 item 佈局的 xml 問題以及資料問題導致。如果要在 Adapter 中設定 View 的高度,則完全違背了 LayoutManager 的設計理念了。
空資料處理
ListView 提供了 setEmptyView 這個 API 來讓我們處理 Adapter 中資料為空的情況,只需輕輕一 set 就能搞定一切。程式碼設定和效果如下
mListView = (ListView) findViewById(R.id.listview);
mListView.setEmptyView(findViewById(R.id.empty_layout));//設定內容為空時顯示的檢視
而 RecyclerView 並沒有提供此類 API,所以,這些工作需要自己來幹。雖說這類邏輯並不複雜,但是作為一個有追求的程式猿,能偷懶還是要想著偷懶的嘛...
HeaderView 和 FooterView
在 ListView 的設計中,存在著 HeaderView 和 FooterView 兩種型別的檢視,並且系統也提供了相應的 API 來讓我們設定
使用 HeaderView 和 FooterView 的好處在於,當我們指向在 ListView 的頭部或者底部新增一個 View 的時候(例如:新增一個下拉重新整理檢視,底部載入更多檢視),我們可以不用影響到 Adapter 的編寫,使用起來相當方便。而到了 RecyclerView 中,翻來翻去你都不會看到類似 addFooterView 、 addFooterView 這種 API,是的,沒錯,壓根就沒有...這也是 RecyclerView 讓我覺得很雞肋的地方,按道理說應該是使用頻率很高的 API,居然都不給我(一臉懵逼)。那有木有解決方法呢,肯定有,系統不給就自己動手豐衣足食唄。我想到的方法比較笨,就是在 Adapter 中提供三種類型(Header,Footer以及普通Item)的 Type 和 View,但是這種方法寫起來很麻煩,對 Adapter 的影響很大,改動的程式碼量多並且也容易產生BUG。這裡需要吹一下鴻洋老師的解決方案了,大家可以看他的文章:優雅的為RecyclerView新增HeaderView和FooterView 。他的實現思路是通過裝飾者模式來擴充 Adapter 的功能,從而實現新增 HeaderView 和 FooterView,並且不影響 Adapter 的編寫工作,牛逼的是還能支援多個 HeaderView 和 FooterView (雖然我暫時想不到有什麼應用場景,哈哈,不過先記著,以後說不定有用)。這是我目前看到的最贊成的方案了,如果你有更 nice 的方案,也歡迎給我留言。
區域性重新整理
在 ListView 中,說到重新整理很多童鞋會記得 notifyDataSetChanged() ,但是說到區域性重新整理估計有很多童鞋就知道得比較少了。我們知道在更新了 ListView 的資料來源後,需要通過 Adapter 的 notifyDataSetChanged 來通知檢視更新變化,這樣做比較的好處就是呼叫簡單,壞處就是它會重繪每個 Item,但實際上並不是每個 Item 都需要重繪。最常見的,例如:朋友圈點贊,點贊只是更新當前點讚的Item,並不需要每個 Item 都更新。然而 ListView 並沒有提供區域性重新整理重新整理某個 Item 的 API 給我們,同樣自己自足,套路大致如下方的 updateItemView:
public class AuthorListAdapter extends BaseAdapter {
...
@Override
public View getView(int position, View convertView, ViewGroup parent) {
...
return convertView;
}
/**
* 更新Item檢視,減少不必要的重繪
*
* @param listView
* @param position
*/
public void updateItemView(ListView listView, int position) {
//換算成 Item View 在 ViewGroup 中的 index
int index = position - listView.getFirstVisiblePosition();
if (index >= 0 && index < listView.getChildCount()) {
//更新資料
AuthorInfo authorInfo = mAuthorInfoList.get(position);
authorInfo.setNickName("Google Android");
authorInfo.setMotto("My name is Android .");
authorInfo.setPortrait(R.mipmap.ic_launcher);
//更新單個Item
View itemView = listView.getChildAt(index);
getView(position, itemView, listView);
}
}
}
即可實現重新整理單個 Item 的效果
RecyclerView.Adapter 則我們提供了 notifyItemChanged 用於更新單個 Item View 的重新整理,我們可以省去自己寫區域性更新的工作。
實現效果如下
動畫效果
如果你細心觀察上面 ListView 和 RecyclerView 區域性更新 Item 的效果,你會發現相比 ListView 而言, RecyclerView 在做區域性重新整理的時候有一個漸變的動畫效果。這也是 RecyclerView 相對非常值得一提的地方,作為 ListView 自身並沒有為我們提供封裝好的 API 來實現動畫效果切換。所以,如果要給 ListView 的 Item 加動畫,我們只能自己通過屬性動畫來操作 Item 的檢視。 Github 也有很多封裝得好好的開源庫給我們用,如:ListViewAnimations 就封裝了大量的效果供我們玩耍,童鞋們可以自行學習一下
ListViewAnimations 主要大致實現方式是通過裝飾者模式來擴充 Adapter ,並結合屬性動畫 Animator 來新增動畫效果。相比之下,RecyclerView 則為我們提供了很多基本的動畫 API ,如下方的增刪移改
簡單的呼叫即可實現相應的效果,用起來方便很多,視覺互動上也會更好些
如果你對動畫效果有追求,覺得系統提供的並不能滿足你的需求,也可以通過相應介面實現自己的動畫效果,方式也非常簡單,繼承 RecyclerView.ItemAnimator 類,並實現相應的方法,再呼叫 RecyclerView 的 setItemAnimator(RecyclerView.ItemAnimator animator) 方法設定完即可實現自定義的動畫效果。
系統也為我們提供了兩個預設的動畫實現:SimpleItemAnimator 和 DefaultItemAnimator。而 RecyclerView 在不手動呼叫 setItemAnimator 的情況下,則預設用了內建的 DefaultItemAnimator 。
當然編寫自定義的 ItemAnimator 也是需要一定工作量的,這裡同樣為大家介紹一個針對 RecyclerView 開源的動畫庫:recyclerview-animators。其內部封裝了大量的動畫效果給供我們呼叫。
如果想要學習怎麼寫一個自定義 ItemAnimator ,上面介紹的開源庫的程式碼同樣不容錯過。哦,對了,如果談到動畫效果,還有一個很關鍵的類不得不提,那就是 ItemTouchHelper 。
ItemTouchHelper 是系統為我們提供的一個用於滑動和刪除 RecyclerView 條目的工具類,用起來也是非常簡單的,大致兩步:
- 建立 ItemTouchHelper 例項,同時實現 ItemTouchHelper.SimpleCallback 中的抽象方法,用於初始化 ItemTouchHelper
- 呼叫 ItemTouchHelper 的 attachToRecyclerView 方法關聯上 RecyclerView 即可
示例程式碼大致如下:
//ItemTouchHelper 用於實現 RecyclerView Item 拖曳效果的類
ItemTouchHelper itemTouchHelper = new ItemTouchHelper(new ItemTouchHelper.Callback() {
@Override
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
//actionState : action狀態型別,有三類 ACTION_STATE_DRAG (拖曳),ACTION_STATE_SWIPE(滑動),ACTION_STATE_IDLE(靜止)
int dragFlags = makeFlag(ItemTouchHelper.ACTION_STATE_DRAG, ItemTouchHelper.UP | ItemTouchHelper.DOWN
| ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT);//支援上下左右的拖曳
int swipeFlags = makeMovementFlags(ItemTouchHelper.ACTION_STATE_SWIPE, ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT);//表示支援左右的滑動
return makeMovementFlags(dragFlags, swipeFlags);//直接返回0表示不支援拖曳和滑動
}
/**
* @param recyclerView attach的RecyclerView
* @param viewHolder 拖動的Item
* @param target 放置Item的目標位置
* @return
*/
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
int fromPosition = viewHolder.getAdapterPosition();//要拖曳的位置
int toPosition = target.getAdapterPosition();//要放置的目標位置
Collections.swap(mData, fromPosition, toPosition);//做資料的交換
notifyItemMoved(fromPosition, toPosition);
return true;
}
/**
* @param viewHolder 滑動移除的Item
* @param direction
*/
@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
int position = viewHolder.getAdapterPosition();//獲取要滑動刪除的Item位置
mData.remove(position);//刪除資料
notifyItemRemoved(position);
}
});
itemTouchHelper.attachToRecyclerView(mRecyclerView);
雖然程式碼中有註釋,但還是稍稍解釋一下,主要重寫的是 getMovementFlags 、 onMove 、 onSwiped 三個抽象方法,getMovementFlags 用於告訴系統,我們的 RecyclerView 到底是支援滑動還是拖曳。如上面的示例程式碼,就是表示著同時支援上下左右四個方向的拖曳和左右兩個方向的滑動效果。如果時滑動,則 onSwiped 會被回撥,如果是拖曳 onMove 會被回撥。我們再到其中實現相應的業務操作即可。最終效果如下
想想我們以前用 ListView 的時候要怎麼做,RecyclerView 真的爽多了。
監聽 Item 的事件
ListView 為我們準備了幾個專門用於監聽 Item 的回撥介面,如單擊、長按、選中某個 Item 等
說實話,其實我並不大喜歡這樣的設計,如 setOnItemClickListener ,在我們不新增 HeaderView 和 FooterView 的時候,我們可以通過回撥引數中的 position 去拿到資料來源列表中對應 Item 的資料。
但是,添加了 HeaderView 和 FooterView 之後就不一樣了,ListView 會把 HeaderView 和 FooterView 算入 position 內。假設你原先在 onItemClick 回撥方法中寫了 mDataList.get(position) 這樣的業務程式碼並且這段程式碼執行良好許久,但在某天你突然加了個 HeaderView 後,這段程式碼就開始變的有問題了,此時因為 HeaderView 佔用的位置算入了 position 之內,所以 position 的最大值實際上是大於 mDataList 包含元素的個數值的,因此程式碼會報陣列越界的錯誤。當然,我們可以去避免這種問題的發生,就是不通過 position 來獲取資料,二是通過回撥方法中的 id 。
這樣就不會受到新增 HeaderView 和 FooterView 的影響了,這個 id 的值就是來自我們編寫好的 Adapter 中的 getItemId 函式中返回的 id,使用 IDE 生成此函式時,預設是返回0,需要將 position 作為 Item 的 id 返回。
並同時在 onItemClick 中判斷 id 是否值為 -1,因為 HeaderView 和 FooterView 的返回值就是 -1。前面講到我並不大喜歡 setOnItemClickListener 這種設計,除了由這些因素的影響外,更關鍵的是個人認為針對 Item 的事件實際上寫在 getView 方法中會更加合適,如 setOnItemClickListener 我更喜歡用在 getView 中為每個 convertView 設定 setOnClickListener 的方式去取代它。
而再來看看 RecyclerView ,它並沒有像 ListView 提供太多關於 Item 的某種事件監聽,唯一的就是 addOnItemTouchListener
API 的名字言簡意賅,就是監聽 Item 的觸控事件。如果你想要擁有 ListView 那樣監聽某個 Item 的某個操作方法,可以看看這篇文章 RecyclerView無法新增onItemClickListener最佳的高效解決方案 ,作者的實現思路就是通過 addOnItemTouchListener 和系統提供的 GestureDetector 手勢判斷結合實現的。不過,我還是更喜歡原先自己用慣的方式,雖然會被人吐槽 new 出了大量的監聽器,但個人覺得這樣封裝會更好(哈哈,也換大家吐槽這種方式的其他劣處,看看我是不是需要改改了)。
OK,關於 RecyclerView 和 ListView 一些常用的功能和 API 的對比,就大致到此。最後再來談談 Android L 開始之後,對 RecyclerView 和 ListView 的使用存在什麼影響。
巢狀滾動機制
熟悉 Android 觸控事件分發機制的童鞋肯定知道,Touch 事件在進行分發的時候,由父 View 向它的子 View 傳遞,一旦某個子 View 開始接收進行處理,那麼接下來所有事件都將由這個 View 來進行處理,它的 ViewGroup 將不會再接收到這些事件,直到下一次手指按下。而巢狀滾動機制(NestedScrolling)就是為了彌補這一機制的不足,為了讓子 View 能和父 View 同時處理一個 Touch 事件。關於巢狀滾動機制(NestedScrolling),實現上相對是比較複雜的,此處就不去拓展說明,其關鍵在於NestedScrollingChild 和 NestedScrollingParent 兩個介面,以及系統對這兩個介面的實現類 NestedScrollingChildHelper 和 NestedScrollingParentHelper 大家可以查閱相關的資料。可能說起來太抽象了,這裡拿一個簡單的示例效果來說明好了,如下方是用 CollapsingToolbarLayout 和 RecyclerView 搭配的效果:
一開始上面一大塊區域就是 CollapsingToolbarLayout ,下方的列表是 RecyclerView ,當然 RecyclerView 向上滑動時,CollapsingToolbarLayout 能夠同時網上收縮,直到只剩下頂部的 Toolbar。之所以能夠實現這種效果,就是完全依賴於巢狀滾動機制,如果沒有這套機制,按照原有的觸控事件分發邏輯, RecyclerView 內部已經把 Touch 事件消耗掉了,完全無法引起頂部的 CollapsingToolbarLayout 產生聯動收縮的效果。我們可以檢視 RecyclerView 的程式碼實現,發現它已經實現了 NestedScrollingChild 介面
如果在其他程式碼佈局都不變的情況下,我們把 RecyclerView 替換成 ListView ,則無法產生上面圖中的動態效果,因為 ListView 並不支援巢狀滾動機制,事件在 ListView 內部已經被消耗且無法傳遞出來,大家可以自行嘗試驗證一下。對下方 AppBarLayout 的使用也是同理。
關於 AppBarLayout 和 CollapsingToolbarLayout,它們並不是什麼第三方控制元件,而是 Android 官方提供的 MaterialDesign 設計風格的控制元件,大家可以在官方文件中搜索到它們的資料,如果你用過 Android 原生系統,你可以在通訊錄等系統內建應用看到它們的身影。如果你想使用類似 AppBarLayout 、 CollapsingToolbarLayout 這種需要巢狀滾動的機制才能達到效果的控制元件,那麼 RecyclerView 將是你的不二之選,因為 ListView 在此根本無法發揮作用。同樣的,ScrollView 也是不支援巢狀滾動機制,但是你可以使用 NestedScrollView 。
總結
這裡只是客觀的去分析一些使用上的差異,並不是想突出哪個控制元件好哪個控制元件不好,大家可以根據自己的使用場景來選擇是要用 RecyclerView 還是 ListView,畢竟,合適的才是最好的。