給 RecyclerView 加上摺疊的效果

2021-09-11 11:02:21 字數 1740 閱讀 9068

recyclerview 有很高的自由度,可以說只有想不到沒有做不到,真是越用越喜歡。這次用超簡單的方法,讓 recyclerview 帶上摺疊的效果。

效果是這樣的。

總結一下這個列表的特點,就是以下三點:

重疊效果;

層次感;

首項的差動。

下面我們來乙個個解決。

我們新建乙個 parallaxrecyclerview,讓它繼承 recyclerview,並使用 linearlayoutmanager 作為布局管理器。

其實就是每一項都搭一部分在它前面那項而已。我們知道,recyclerview 可以通過設定 itemdecoration 來實現列表的間隔效果,有沒有想過要是把間隔設為負數會怎麼樣?比如:

additemdecoration(new itemdecoration() 

});複製**

沒錯,這就實現了我們的重疊效果。

在 material design 裡是有z軸這個概念的,我們可以給控制項設定垂直於螢幕的高度,讓不在同一高度的控制項看起來有層次感。當然,我們要用 material design 的控制項才有這個屬性,這裡我用的是 cardview。

我們給 parallaxrecyclerview 增加乙個滑動監聽,在 onscrolled 方法裡面做如下設定:

linearlayoutmanager layoutmanager = (linearlayoutmanager) recyclerview.getlayoutmanager();

int firstposition = layoutmanager.findfirstvisibleitemposition();

int lastposition = layoutmanager.findlastvisibleitemposition();

int visiblecount = lastposition - firstposition;

//重置控制項的高度

int elevation = 1;

for (int i = firstposition - 1; i <= (firstposition + visiblecount) + 1; i++)

}}複製**

其中,setcardelevation 方法就是用來給 cardview 設定高度的,這裡讓每一項的高度比它的上一項高 5dp。

最後,我們想給第一項增加乙個差動效果,這個同樣在 onscrolled 方法裡面做處理就好了:

view firstview = layoutmanager.findviewbyposition(firstposition);

float firstviewtop = firstview.gettop();

firstview.settranslationy(-firstviewtop / 2.0f);

複製**

這樣相當於第一項的滑動速度變成原來的一半。但這也會導致乙個問題, 由於改變了控制項的位置,當這個控制項被復用時,會出現位置不正確的情況。所以我們在設定高度的時候,可以順便把控制項的位置復原了:

float translationy = view.gettranslationy();

if (i > firstposition && translationy != 0)

複製**

這樣就完成了乙個帶有簡單摺疊效果的 recyclerview 了,妥妥的。

原始碼位址

給RecyclerView加上摺疊的效果

recyclerview有很高的自由度,可以說只有想不到沒有做不到,真是越用越喜歡。這次用超簡單的方法,讓recyclerview帶上摺疊的效果。效果是這樣的。總結一下這個列表的特點,就是以下三點 1.重疊效果 2.層次感 3.首項的差動。下面我們來乙個個解決。我們新建乙個parallaxrecyc...

RecyclerView加上弧形滾動條

介面主要是通過gridlayoutmanager設定每行顯示兩個item mrecyclerview myrecyclerview rootview.findviewbyid r.id.id recyclerview grid mmanager new gridlayoutmanager getac...

給RecyclerView新增頭部

最近開發的時候遇到乙個問題,就是scrollview巢狀recyclerview的時候,在高版本的的手機上執行的時候整個頁面是可以正常滾動的,但是在低版本手機上執行的時候recyclerview以上的內容就不會顯示出來了,整個頁面只有recyclerview,並且充滿了整個螢幕,recyclervi...