給RecyclerView加上摺疊的效果

2021-07-27 03:54:23 字數 1781 閱讀 4916

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

效果是這樣的。

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

1. 重疊效果;

2. 層次感;

3. 首項的差動。

下面我們來乙個個解決。

我們新建乙個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 帶上摺疊的效果。效果是這樣的。總結一下這個列表的特點,就是以下三點 重疊效果 層次感 首項的差動。下面我們來乙個個解決。我們新建乙個 parallaxrecycle...

RecyclerView加上弧形滾動條

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

給RecyclerView新增頭部

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