Android使用RecyclerView实现流式布局的注意事项

纯手打,不喜勿喷 long may the sun shine

众所周知，Android开发中Recycleview的功能十分强大，可以实现各种炫酷的效果，今天我根据最近开发的一个项目简要说下流式布局的注意事项。

使用RecyclerView时，流式布局我们通常使用StaggeredGridLayoutManager来实现：

rv_photo.layoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)

这句话是实现此功能的关键，当然里面的参数是可以更改的。
但是问题也随之出现，当我们使用这个功能加载网络图片时，由于不同的图片长宽和分辨率不同，并且Glide等图片加载框架都是异步加载，往往会出现图片刚开始时高度为0，之后才加载出正常高度的问题，这样如果网络延迟比较高的话，视觉效果还是比较差的，甚至会出现item错乱等一系列问题。

解决这个问题最有效的方法，就是把item的高度写成固定的。item的高度要固定，又要达到流式布局的效果，我整理了两种比较方便的解决方法：、

1.根据图片的真实宽高比例计算item里图片的实际大小

现在不论是前端还是后台的上传控件都有获取图片宽高的功能，接口返回数据时带着宽高数据，然后前端根据这些数据计算出ImageView在item当中的大小，这样每一张图片都是按照原始比例进行的展示，视觉效果要好一点：

    public static void loadImageLiu(Context context, ImageView view, String url, int width, int height, int defaultWidth) {
        try {
            ViewGroup.LayoutParams layoutParams = (ViewGroup.LayoutParams) view.getLayoutParams();//获取你要填充图片的布局的layoutParam
            int downloadWidth = 0;
            int downloadHeight = 0;
            if (width != 0 && height != 0) {//如果宽度和高度都能获取到,根据比例计算ImageView的大小
                layoutParams.height = (int) (((float) height) / width * defaultWidth);
                layoutParams.width = defaultWidth;//这个是布局的宽度
                view.setLayoutParams(layoutParams);//容器的宽高设置好了
            } else {//如果宽度和高度获取不到，就让它们等于默认值，此处是两列的RecyclerView,所以defaultWidth等于屏幕一般的宽度减去RecylcerView的间隔和margin(eg:ScreenUtils.getScreenWidth() / 2 - SizeUtils.dp2px(10f))
                layoutParams.height = defaultWidth;
                layoutParams.width = defaultWidth;//这个是布局的宽度
                view.setLayoutParams(layoutParams);//容器的宽高设置好了
            }
            downloadWidth = layoutParams.width;
            downloadHeight = layoutParams.height;
            url = EncodeUtils.htmlDecode(url).toString();
            if (!TextUtils.isEmpty(url) && !url.contains("http"))
                url = new UrlUtils().getAPIHTTP() + url;
            RequestOptions options = new RequestOptions();
            options.centerCrop().placeholder(R.drawable.default_image).error(R.drawable.default_image).diskCacheStrategy(DiskCacheStrategy.ALL);
            Glide.with(context)
                    .asBitmap()
                    .load(url)
                    .apply(options)
                    .into(new SimpleTarget<Bitmap>(downloadWidth, downloadHeight) {//这里是根据原图大小和屏幕宽度计算的预览图的尺寸，如果这里不加参数，图片又相当大的话，列表会非常卡顿
                        @Override
                        public void onResourceReady(@NonNull Bitmap bitmap, @Nullable Transition<? super Bitmap> transition) {
                            //这个bitmap就是你图片url加载得到的结果
                            //获取bitmap信息，可赋值给外部变量操作，也可在此时行操作。
                            view.setImageBitmap(bitmap);
                        }
                    });
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

这是我在RecyclerView的Adapter里加载图片的写法。

2.先给ImageView写一个基本的高度，然后在这上面加上或者减去随机的值，这个方法就不赘述了，虽然比较方便，但是效果不是很好。