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);
    }
  });

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