天天看點

Android RecyclerView 和 ListView 使用對比分析

今天這篇文章主要是向大家介紹 RecyclerView 和 ListView 的使用對比,文章主要包括以下幾點的内容:

  • RecyclerView 和 ListView 布局效果的對比
  • RecyclerView 和 ListView 一些常用的功能 和 API 的對比
  • RecyclerView 和 ListView 在 Android L 引入嵌套滾動機制之後的對比

有一點需要強調下,文中所有的效果在真機上都是很流暢的,因為錄制 GIF 圖很容易掉幀,是以特地放慢了操作,千萬不要誤會成卡頓了啊!

布局效果對比

作為一枚控件,要引起開發者使用的欲望自然先是從顯示效果看起(看臉的世界),ListView 大家對效果已經很熟悉了,這裡直接跳過,而作為 RecyclerView,它能帶給效果要比 ListView 強大得多,如下圖

Android 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 最終的展示效果的。

Android RecyclerView 和 ListView 使用對比分析

而 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));//設定内容為空時顯示的視圖
           
Android RecyclerView 和 ListView 使用對比分析

而 RecyclerView 并沒有提供此類 API,是以,這些工作需要自己來幹。雖說這類邏輯并不複雜,但是作為一個有追求的程式猿,能偷懶還是要想着偷懶的嘛...

HeaderView 和 FooterView

在 ListView 的設計中,存在着 HeaderView 和 FooterView 兩種類型的視圖,并且系統也提供了相應的 API 來讓我們設定

Android RecyclerView 和 ListView 使用對比分析

使用 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 的效果

Android RecyclerView 和 ListView 使用對比分析

RecyclerView.Adapter 則我們提供了 notifyItemChanged 用于更新單個 Item View 的重新整理,我們可以省去自己寫局部更新的工作

Android RecyclerView 和 ListView 使用對比分析

實作效果如下

Android RecyclerView 和 ListView 使用對比分析

動畫效果

如果你細心觀察上面 ListView 和 RecyclerView 局部更新 Item 的效果,你會發現相比 ListView 而言, RecyclerView 在做局部重新整理的時候有一個漸變的動畫效果。這也是 RecyclerView 相對非常值得一提的地方,作為 ListView 自身并沒有為我們提供封裝好的 API 來實作動畫效果切換。是以,如果要給 ListView 的 Item 加動畫,我們隻能自己通過屬性動畫來操作 Item 的視圖。 Github 也有很多封裝得好好的開源庫給我們用,如: ListViewAnimations  就封裝了大量的效果供我們玩耍,童鞋們可以自行學習一下

Android RecyclerView 和 ListView 使用對比分析

ListViewAnimations 主要大緻實作方式是通過裝飾者模式來擴充 Adapter ,并結合屬性動畫 Animator 來添加動畫效果。相比之下,RecyclerView 則為我們提供了很多基本的動畫 API ,如下方的增删移改

Android RecyclerView 和 ListView 使用對比分析

簡單的調用即可實作相應的效果,用起來友善很多,視覺互動上也會更好些

Android RecyclerView 和 ListView 使用對比分析

如果你對動畫效果有追求,覺得系統提供的并不能滿足你的需求,也可以通過相應接口實作自己的動畫效果,方式也非常簡單,繼承 RecyclerView.ItemAnimator 類,并實作相應的方法,再調用 RecyclerView 的 setItemAnimator(RecyclerView.ItemAnimator animator) 方法設定完即可實作自定義的動畫效果。

Android RecyclerView 和 ListView 使用對比分析

系統也為我們提供了兩個預設的動畫實作:SimpleItemAnimator 和 DefaultItemAnimator。而 RecyclerView 在不手動調用 setItemAnimator 的情況下,則預設用了内置的 DefaultItemAnimator 。

Android RecyclerView 和 ListView 使用對比分析

當然編寫自定義的 ItemAnimator 也是需要一定工作量的,這裡同樣為大家介紹一個針對 RecyclerView 開源的動畫庫:recyclerview-animators。其内部封裝了大量的動畫效果給供我們調用。

如果想要學習怎麼寫一個自定義 ItemAnimator ,上面介紹的開源庫的代碼同樣不容錯過。哦,對了,如果談到動畫效果,還有一個很關鍵的類不得不提,那就是 ItemTouchHelper 。

Android RecyclerView 和 ListView 使用對比分析

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 會被回調。我們再到其中實作相應的業務操作即可。最終效果如下

Android RecyclerView 和 ListView 使用對比分析

想想我們以前用 ListView 的時候要怎麼做,RecyclerView 真的爽多了。

監聽 Item 的事件

ListView 為我們準備了幾個專門用于監聽 Item 的回調接口,如單擊、長按、選中某個 Item 等

Android RecyclerView 和 ListView 使用對比分析

說實話,其實我并不大喜歡這樣的設計,如 setOnItemClickListener ,在我們不添加 HeaderView 和 FooterView 的時候,我們可以通過回調參數中的 position 去拿到資料源清單中對應 Item 的資料

Android RecyclerView 和 ListView 使用對比分析

但是,添加了 HeaderView 和 FooterView 之後就不一樣了,ListView 會把 HeaderView 和 FooterView 算入 position 内。假設你原先在 onItemClick 回調方法中寫了 mDataList.get(position) 這樣的業務代碼并且這段代碼運作良好許久,但在某天你突然加了個 HeaderView 後,這段代碼就開始變的有問題了,此時因為 HeaderView 占用的位置算入了 position 之内,是以 position 的最大值實際上是大于 mDataList 包含元素的個數值的,是以代碼會報數組越界的錯誤。當然,我們可以去避免這種問題的發生,就是不通過 position 來擷取資料,二是通過回調方法中的 id 。

Android RecyclerView 和 ListView 使用對比分析

這樣就不會受到添加 HeaderView 和 FooterView 的影響了,這個 id 的值就是來自我們編寫好的 Adapter 中的 getItemId 函數中傳回的 id,使用 IDE 生成此函數時,預設是傳回0,需要将 position 作為 Item 的 id 傳回。

Android RecyclerView 和 ListView 使用對比分析

并同時在 onItemClick 中判斷 id 是否值為 -1,因為 HeaderView 和 FooterView 的傳回值就是 -1。前面講到我并不大喜歡 setOnItemClickListener 這種設計,除了由這些因素的影響外,更關鍵的是個人認為針對 Item 的事件實際上寫在 getView 方法中會更加合适,如 setOnItemClickListener 我更喜歡用在 getView 中為每個 convertView 設定 setOnClickListener 的方式去取代它。

而再來看看 RecyclerView ,它并沒有像 ListView 提供太多關于 Item 的某種事件監聽,唯一的就是 addOnItemTouchListener

Android RecyclerView 和 ListView 使用對比分析

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 搭配的效果:

Android RecyclerView 和 ListView 使用對比分析

一開始上面一大塊區域就是 CollapsingToolbarLayout ,下方的清單是 RecyclerView ,當然 RecyclerView 向上滑動時,CollapsingToolbarLayout 能夠同時網上收縮,直到隻剩下頂部的 Toolbar。之是以能夠實作這種效果,就是完全依賴于嵌套滾動機制,如果沒有這套機制,按照原有的觸摸事件分發邏輯, RecyclerView 内部已經把 Touch 事件消耗掉了,完全無法引起頂部的 CollapsingToolbarLayout 産生關聯收縮的效果。我們可以檢視 RecyclerView 的代碼實作,發現它已經實作了 NestedScrollingChild 接口

Android RecyclerView 和 ListView 使用對比分析

如果在其他代碼布局都不變的情況下,我們把 RecyclerView 替換成 ListView ,則無法産生上面圖中的動态效果,因為 ListView 并不支援嵌套滾動機制,事件在 ListView 内部已經被消耗且無法傳遞出來,大家可以自行嘗試驗證一下。對下方 AppBarLayout 的使用也是同理。

Android RecyclerView 和 ListView 使用對比分析

關于 AppBarLayout 和 CollapsingToolbarLayout,它們并不是什麼第三方控件,而是 Android 官方提供的 MaterialDesign 設計風格的控件,大家可以在官方文檔中搜尋到它們的資料,如果你用過 Android 原生系統,你可以在通訊錄等系統内置應用看到它們的身影。如果你想使用類似 AppBarLayout 、 CollapsingToolbarLayout 這種需要嵌套滾動的機制才能達到效果的控件,那麼 RecyclerView 将是你的不二之選,因為 ListView 在此根本無法發揮作用。同樣的,ScrollView 也是不支援嵌套滾動機制,但是你可以使用 NestedScrollView 。

總結

這裡隻是客觀的去分析一些使用上的差異,并不是想突出哪個控件好哪個控件不好,大家可以根據自己的使用場景來選擇是要用 RecyclerView 還是 ListView,畢竟, 合适的才是最好的 。洋洋曬曬寫了一大堆,相信你已經看到不少 RecyclerView 和 ListView 使用上的差別了,不知道有沒有我在文中沒提到的呢,歡迎下方留言。文中所有的項目實踐代碼都在這裡: https://github.com/D-clock/AndroidSystemUiTraining  ,需要的同學可以自行下載下傳檢視。

繼續閱讀