解決 RecyclerView AppBarLayout 滑動不順暢的問題

問題

如果你又看過 cheesesquare 這個項目就知道,在詳情頁滑動的時候有一些粘性,體驗不是很好。
有人在YouTube上上傳了現象 視頻地址
stackoverflow上也有人討論這個問題,視頻也是在這個問題下面看到的。
前段時間在項目用到 AppBarLayout 加 RecyclerView的時候,產品經理和設計師對這個效果都不滿意。
so....只能填坑了。

初步解決

stackoverflow 上也有提及這個問題主要是由于 consumed 有時候在 onNestedFling 中計算不對導致的。
因此可以重寫AppBarLayout的Behavior
這個答案可以解決這個問題 http://stackoverflow.com/a/32454407
當然記得在xml 為 AppBarLayout 設置上自定義的Behavior

更進一步解決

還有一種情況可能體驗不是很好,就是在 往上 fling 的時候,AppBarLayout沒有拉下來,需要在拉一次才能下來,那時產品經理對這個也不是很滿意。
這種情況下 consumed 的值為 true 即時經過修正之后也是為 true ,然后在看
super.onNestedFling 源碼 發現這時候也是不會調用 fling 的。事實上大部分這時候 AppBarLayout 不去fling也是對的,因為這時候 AppBarLayout 應該在可見的視圖之外。
于是后來打算去監聽 RecyclerView的滾動,在滾動到第一條的時候展開 AppBarLayout,發現效果還不錯

list.addOnScrollListener(new RecyclerView.OnScrollListener() {
     @Override    
     public void onScrollStateChanged(RecyclerView recyclerView, int newState) {        
        super.onScrollStateChanged(recyclerView, newState);        
        if (newState == RecyclerView.SCROLL_STATE_IDLE) {            
        int firstVisiblePosition = layoutManager.findFirstCompletelyVisibleItemPosition();            
        if (firstVisiblePosition == 0) {
           appbar.setExpanded(true, true);            
        }        
     }    
}});

這時候滾動到頂部的時候,RecyclerView 有個波紋效果,導致看起來比較別扭,
給 RecyclerView 設置以下屬性即可

android:overScrollMode="never"

其他方案

github 上有個庫也是解決這個問題的 smooth-app-bar-layout
當然解決的原理跟本文相差甚遠,有興趣可以閱讀下,我自己也有用過,不過這個庫比較蛋疼的就是得為RecyclerView 設置一個 head item, 這個 item 的高度必須跟 AppBarLayout 一樣的高度,所以對于 wrap_content 就比較麻煩了,當然,這個跟這個庫的實現思路有關系。

最后,希望本文能給準備入坑的同學少走一點彎路

ps (我目前用的最新 support 包 26.1.0 版本 已經基本修復這個問題)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容