使用RecyclerView打造乙個相片廊

2021-09-12 09:38:21 字數 4308 閱讀 1374

這次我們使用recyclerview這個強大的控制項來實現乙個相片廊,就是長這個模樣

一.自定義乙個view繼承recyclerview

public class photogalleryview extends recyclerview implements galleryitemdecoration.onitemsizemeasuredlistener

public photogalleryview(context context, @nullable attributeset attrs)

public photogalleryview(context context, @nullable attributeset attrs, int defstyle)

help表示滑動的方式,是我們自定義的乙個屬性,在我們新建的attrs.xml檔案中可以看到它有兩個值,乙個是linearsnaphelper,另乙個是pagersnaphelper。

<?xml version="1.0" encoding="utf-8"?>

linearsnaphelper和pagersnaphelper是什麼?

recyclerview在24.2.0版本中新增了snaphelper這個輔助類,用於輔助recyclerview在滾動結束時將item對齊到某個位置。特別是列表橫向滑動時,很多時候不會讓列表滑到任意位置,而是會有一定的規則限制,這時候就可以通過snaphelper來定義對齊規則了。

snaphelper是乙個抽象類,官方提供了乙個linearsnaphelper的子類,可以讓recyclerview滾動停止時相應的item停留中間位置。25.1.0版本中官方又提供了乙個pagersnaphelper的子類,可以使recyclerview像viewpager一樣的效果,一次只能滑一頁,而且居中顯示。**

它的使用方式很簡單:

linearsnaphelper mlinearsnaphelper=new linearsnaphelper();

mlinearsnaphelper.attachtorecyclerview(mphotogalleryview);

如果你想對linearsnaphelper的實現原理比較好奇,可以看看這位大佬的部落格,寫的很好:

讓你明明白白的使用recyclerview——snaphelper詳解

二.設定不同的間距距離

為了讓滑動過程的展示顯得更美觀,我們需要自己設定的間距。需要注意的是第一張和最後一張,它們的位置比較特殊,乙個沒有左,乙個沒有右。所以在設定間距時需要和其他區分開來。

只需要自定義乙個itemdecoration繼承recyclerview.itemdecoration並重寫getitemoffsets方法,在這個方法裡面根據不同的位置也就是item的position設定不同的間距。

public class galleryitemdecoration extends recyclerview.itemdecoration else

}});

}

private void onsethorizontalparams(viewgroup parent, view itemview, int position, int itemcount)
三.實現漸變的動畫

滑動時,中間滑動到左邊時從大變小,右邊滑動到中間時從小變大這個相對來說比較複雜

1.首先可以根據recyclerview的onscrolllistener來不斷獲取滑動的距離。

class galleryscrollerlistener extends recyclerview.onscrolllistener 

@override

public void onscrolled(recyclerview recyclerview, int dx, int dy) else }}

2.根據滑動的總距離和滑動每一頁理論消耗的距離就能夠得到的position

位置浮點值=總消耗距離 / 每一頁理論消耗距離

由於計算的結果是浮點數,把它取整就是這張對應的位置。

它的小數點部分就可以取出來作為我們伸縮的條件。(這波操作還是很靈性的),

//水平滾動

private void onhorizontalscroll(recyclerview recyclerview, int dx)

});}

3.根據偏移率也是上面說到小數點部分做動畫
private void setbottomtotopanim(recyclerview recyclerview, int position, float percent) 

if (mcurview != null)

if (mrightview != null)

} else

if (mcurview != null)

if (mrightview != null) }}

四.實現背景的高斯模糊

為了讓不同的和同一張背景放一起顯得很突兀,不好看。我們可以使用高斯模糊。我們可以直接使用別人寫好的高斯模糊類,它用法也是非常簡單

/**

* 設定高斯模糊

* @param forceupdate

*/private void setblurimage(boolean forceupdate)

mphotogalleryview.post(new runnable()

});// 獲取當前位置的資源id

int resourceid=adapter.getresid(mcurviewposition);

// 將該資源轉為bitmap

bitmap bitmap= bitmapfactory.decoderesource(getresources(),resourceid);

// 將該bitmap高斯模糊後返回到resblurbmp

bitmap resblurbmp = blurbitmaputil.blurbitmap(mphotogalleryview.getcontext(),bitmap,15);

// 再將resblurbmp轉為drawable

drawable resblurdrawable = new bitmapdrawable(resblurbmp);

// 獲取前一頁的drawable

drawable preblurdrawable = mtsdracachemap.get(key_pre_draw) == null ? resblurdrawable : mtsdracachemap.get(key_pre_draw);

/* 以下為淡入淡出效果 */

drawable drawablearr = ;

transitiondrawable transitiondrawable = new transitiondrawable(drawablearr);

mcontainer.setbackgrounddrawable(transitiondrawable);

transitiondrawable.starttransition(500);

// 存入到cache中

mtsdracachemap.put(key_pre_draw, resblurdrawable);

// 記錄上一次高斯模糊的位置

mlastdraposition = mcurviewposition;

}

這篇文章的內容大多來自這位大佬的寫的部落格,對於一些細節在他的部落格裡寫的很詳細。

用recyclerview做乙個小清新的gallery效果

看完部落格之後,如果想實現這樣乙個效果,建議先把github上的clone下來,有很多細節需要在原始碼中細細體會。

關於我寫的recyclerview系列的其他文章也可以看看哦

1.值得深入學習的控制項-recyclerview(入門篇)

2.值得深入學習的控制項-recyclerview(高階篇)

3.值得深入學習的控制項-recyclerview(原始碼解析篇)

4.值得深入學習的控制項-recyclerview(時間軸篇)

突然覺得自己有點像知識的搬運工,啊哈哈[手打滑稽笑]。

RecyclerView 控制項使用

recyclerview的任務僅限於 和定位螢幕上的列表項,對於列表項的內容顯示我們還需要借助adapter子類和viewholder子類。viewholder的作用是容納view檢視。recyclerview工作需要layoutmanager支援。recyclerview檢視建立好後,要立即交給l...

recyclerview完整使用

1.和listview一樣,建立資料模型和子項布局檔案 2.自定義介面卡 首先在介面卡類中自定義viewholder內部類,然後將其作為泛型傳入類的宣告中 class myviewholder extends recyclerview.viewholder public class classada...

RecyclerView的簡單使用

recyclerview 和 listview 一樣都是通過維護少量的view來展示大量的資料,不同的是recyclerview提供了一種插拔式的體驗,高度解耦,同時使用起來更加靈活。recyclerview可以通過設定layoutmanager oritation itemanimation it...