5. Use RecyclerView to elegantly achieve waterfall effect

/** * Author: Pich * Original link: http://me.woblog.cn/ * QQGroup: 129961195 * WeChat public account: woblog * Github: https://github.com/lifengsofts */

Overview

In the past, it was very difficult for us to achieve a waterfall flow effect. We needed to customize the controls ourselves. It can be said to be very troublesome, and the performance is also optimized, but now it is different, because RecyclerView has arrived, he can be very convenient.Achieve a waterfall effect.Let's take a look below, first come to a rendering:

Use StaggeredGridLayoutManager

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

Then it should be noted that the height and width of the image need to be dynamically calculated in the Adapter.

Calculate the height of the item

We use the Glide image loading framework here, and other image loading frameworks have similar methods. What we need to do is to dynamically calculate the height of the Item when the image is loaded back to get the height and width of the image.

Glide.with(WaterfallFlowActivity.this).load(d).diskCacheStrategy(DiskCacheStrategy.ALL).into(new SimpleTarget() {@Overridepublic void onResourceReady(GlideDrawable resource,GlideAnimationsuper GlideDrawable> glideAnimation) {Log.d("TAG", iv.getWidth() + "," + resource.getIntrinsicWidth());//Calculate the height of ImageViewint 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);}});

The effect is almost finished now, but there are still some optimization details to be dealt with.