1.圖檔瀑布流現在幾乎基本上是app比較常見的圖檔展示方式,此文簡單介紹下RecyclerView + Glide結合實作圖檔瀑布流的效果的實作方法之一,先上效果:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmL2MzN1UDOwMjM2ETNwEjMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.gif)
2.具體實作如下:
// 1.設定LayoutManager
StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
manager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
recyclerView.setLayoutManager(manager);
// 2.添加ItemDecoration
// 每個item之間的間距
int divider = DimenUtil.Dp2Px(8);
RecyclerView.ItemDecoration gridItemDecoration = new RecyclerView.ItemDecoration() {
@Override
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, RecyclerView parent, @NonNull RecyclerView.State state) {
StaggeredGridLayoutManager.LayoutParams layoutParams = (StaggeredGridLayoutManager.LayoutParams) view.getLayoutParams();
int spanIndex = layoutParams.getSpanIndex();
int position = parent.getChildAdapterPosition(view);
outRect.bottom = divider;
if (position == 0 || position == 1) {
outRect.top = divider * 2;
} else {
outRect.top = 0;
}
if (spanIndex % 2 == 0) {//偶數項
outRect.left = divider;
outRect.right = divider / 2;
} else {
outRect.left = divider / 2;
outRect.right = divider;
}
}
};
recyclerView.addItemDecoration(gridItemDecoration);
// 3.設定RecyclerView的擴充卡Adapter,就是一個ImageView,就不詳細補充adapter了。
// 此處主要寫一下Glide加載圓角圖檔:
int radius = 10;// 圓角半徑
RequestOptions options = new RequestOptions()
.placeholder(defRes)
.transform(new CenterCrop(), new GlideRoundTransform(radius))
.diskCacheStrategy(DiskCacheStrategy.RESOURCE);
Glide.with(context)
.load(imgResource)
.transition(DrawableTransitionOptions.withCrossFade())
.apply(options)
.into(imageView);
3.最後注意:瀑布流中的圖檔高度不一,不是固定的,圖檔是按照原始寬高比顯示,是以圖檔的width和height最好由伺服器接口傳回即可(至于圖檔寬高的值:1.可通過最初的上傳接口,告知伺服器;2.也可上傳到伺服器以後,由伺服器計算擷取其寬高存入資料庫);app拿到寬高設定到imageView即可。