未知图片大小时

步骤：

一、给布局管理器设置GapStrategy为 GAP_HANDLING_NONE : 这样可以防止图片在上下滑动的时候移动.

layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
recyclerView.setLayoutManager(layoutManager);

二、使用到的工具类

DisplayUtils.java（未知图片大小时使用）

import android.app.Activity;
import android.content.Context;
import android.util.DisplayMetrics;
import android.view.WindowManager;

/**
 * Created on 2019/5/17 11:34
 *
 * @author Q.PeterGuo
 * @version 1.0.0
 * @Description
 */
public class DisplayUtils {

    private DisplayUtils(){}

    public static int getScreenWidth(Activity activity){
        WindowManager manager = activity.getWindowManager();
        DisplayMetrics outMetrics = new DisplayMetrics();
        manager.getDefaultDisplay().getMetrics(outMetrics);
        return outMetrics.widthPixels;
    }

    public static int dp2px(Context context, float dpValue) {

        final float scale = context.getResources().getDisplayMetrics().density;

        return (int) (dpValue * scale +0.5f);

    }

}

三、提前 设置 imageView 大小（适配器中）

分两种情况:

1. 已知图片的大小,在请求图片之前要先设置 ImageView 的大小.

@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {

    final ImageEntity.ListBean listBean = listBeans.get(position);
    // 获取布局页面的尺寸和密度
    Resources resources = mContext.getResources();
    DisplayMetrics dm = resources.getDisplayMetrics();
    // 设置布局页面的 1/3 为宽，
    int width = dm.widthPixels/3;
    // 获取到已知图片的宽高比，通过设置的宽指定高
    int height = (int) (width*(Float.parseFloat(listBean.getHeight())/Float.parseFloat(listBean.getWidth())));
    // 获取到图片的布局
    RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) holder.imageView.getLayoutParams();
    // 给图片布局设置 高度
    layoutParams.height = height;
    // 重新给图片设置布局
    holder.imageView.setLayoutParams(layoutParams);
    
    Glide.with(mContext).load(listBeans.get(position).getImg()).into(holder.imageView);

    holder.imageView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intent = new Intent(mContext, ImageActivity.class);
            intent.putExtra("imageSrc",listBean.getImg());
            mContext.startActivity(intent);
        }
    });
}

2. 不知道图片大小.这种情况就需要在 onBindViewHolder 之前设置图片的大小.因为如果在 onBindViewHolder 中使用 Glide 异步的获取图片的大小会导致图片因为没有及时获取高度而出现空白.可以在 setList 处添加,比如这样:

    public void setData(List<Result> data) {
        mData = data;
        setImageScale();
    }

    private void setImageScale() {
        for (final Result girlBean : mData) {
            if (girlBean.getScale() == 0) {
                Glide.with(mContext).load(girlBean.getUrl()).into(new SimpleTarget<Drawable>() {
                    @Override
                    public void onResourceReady(@NonNull Drawable resource, @Nullable Transition<? super Drawable> transition) {
                        float scale = resource.getIntrinsicWidth() / (float) resource.getIntrinsicHeight();
                        girlBean.setScale(scale);
                        notifyDataSetChanged();
                    }
                });
            } else {
                notifyDataSetChanged();
            }
        }
    }

在 onBindviewHolder 中:

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
![recyclerView瀑布流解决图片错位.gif](https://img.haomeiwen.com/i15927955/0d99869b72ba07a9.gif?imageMogr2/auto-orient/strip)

        Result result = mData.get(position);

        final ViewGroup.LayoutParams layoutParams = holder.mIv.getLayoutParams();
        layoutParams.width = DisplayUtils.getScreenWidth((Activity) mContext) / 2 - DisplayUtils.dp2px(mContext, 8);
        if (result.getScale() != 0) {
            layoutParams.height = (int) (layoutParams.width / result.getScale());
        }
        holder.mIv.setBackgroundColor(Color.BLUE);

        Glide.with(mContext).load(result.getUrl()).into(holder.mIv);
    }

如果实体类中没有Scale 变量，需要添加到要解析的实体类中去，并设置 getter，setter 方法

private float scale;

3. 效果图如下

recyclerView瀑布流解决图片错位.gif
项目地址：https://github.com/1PeterGuo/RecyclerView

---

源码地址:

1. 已知图片大小: https://github.com/heinika/ImageTestDemo

2. 未知图片大小: https://github.com/heinika/JavaGankIO