5.使用RecyclerView优雅的实现瀑布流效果

/** * 作者：Pich * 原文链接：http://me.woblog.cn/ * QQ群：129961195 * 微信公众号：woblog * Github：https://github.com/lifengsofts */

概述

从前我们想实现一个瀑布流效果是很难得，需要自己自定义控件，可以说是很麻烦，而且性能也好优化，但是现在就不一样了，因为RecyclerView到来了，他可以很方便的实现瀑布流效果。下面就来看看吧，先来一张效果图：

使用StaggeredGridLayoutManager

StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(3, LinearLayoutCompat.VERTICAL); rv.setLayoutManager(layoutManager);

然后需要注意的就是在Adapter里面需要动态计算图片的高度和宽度。

计算Item的高度

我们这里使用的是Glide图片加载框架，其他图片加载框架也有类似的方法，我们需要做的就是在图片加载回来拿到图片的高度和宽度动态计算Item的高度。

Glide.with(WaterfallFlowActivity.this).load(d).diskCacheStrategy(DiskCacheStrategy.ALL) .into(new SimpleTarget<GlideDrawable>() { @Override public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) { Log.d("TAG", iv.getWidth() + "," + resource.getIntrinsicWidth()); //计算ImageView的高度 int imageWidth = resource.getIntrinsicWidth(); int imageHeight = resource.getIntrinsicHeight(); int imageViewWidth = iv.getWidth(); double scale = imageWidth * 1.0 / imageViewWidth; LayoutParams layoutParams = iv.getLayoutParams(); layoutParams.height = (int) (imageHeight / scale); iv.setLayoutParams(layoutParams); iv.setImageDrawable(resource); } });

现在效果其实就已经差不多出来了，但是还有一些优化的细节需要处理。