异步镜像下载到StaggeredGridLayout

Question

我有一个指向不同尺寸图像的URL列表。我想要在交错的垂直网格中显示它们，拉伸每个图像的宽度以占据单行，并拉伸高度以环绕缩放的图像。所有内容都应该是这样的：

http://www.technotalkative.com/wp-content/uploads/2014/04/staggered-gridview-in-android.png

我使用的是RecycleView和StaggeredGridLayoutManager。不幸的是，我不能让它很好地工作。

这是我要显示的项目的类：

public class Photo {
    public String title;
    public String url;

    public Photo(String title, String url) {
    this.title = title;
    this.url = url;
    }
}

项目对应的XML：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:margin="5dp">

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"/>

    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageview"
        android:paddingTop="4dp"
        android:paddingBottom="4dp"
        android:background="@color/transparant_white"
        android:gravity="center_horizontal"
        android:textSize="18sp"/>

</RelativeLayout>

适配器：

public class PhotoAdapter extends RecyclerView.Adapter<PhotoAdapter.ViewHolder> {

    private final static String TAG = PhotoAdapter.class.getSimpleName();

    private Context mContext;
    private List<Photo> mPhotos;

    public PhotoAdapter(Context context, List<Photo> photos) {
        super();
        mContext = context;
        mPhotos = photos;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View itemView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_photo, viewGroup, false);
        return new ViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int i) {
        Photo photo = mPhotos.get(i);
        Picasso.with(mContext).load(photo.url).into(viewHolder.imageView);
        viewHolder.textView.setText(photo.title);
    }

    @Override
    public int getItemCount() {
        return mPhotos.size();
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;
        TextView textView;
        public ViewHolder(View itemView) {
            super(itemView);
            imageView = (ImageView) itemView.findViewById(R.id.imageview);
            textView = (TextView) itemView.findViewById(R.id.textview);
        }
    }
}

以及所有东西都被调用的片段：

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                     Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.fragment_main, container, false);

    PhotoAdapter photoAdapter = new PhotoAdapter(getActivity(), createItems());

    StaggeredGridLayoutManager staggeredGridLayoutManager 
             = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);

    RecyclerView recyclerView = (RecyclerView) rootView.findViewById(R.id.recyclerview);
    recyclerView.setAdapter(photoAdapter);
    recyclerView.setLayoutManager(staggeredGridLayoutManager);

    return rootView;
}

开始的几个图像看起来很好，但是当我向下滚动时，所有的图像都开始显示在单列中。然后，当我滚动到列表的绝对顶部时，所有内容都放在一起，图像显示在两列中，直到我向下滚动到我还没有下载的图像。问题是在下载之前我不知道每个图片的大小，所以我不能预先设置每个项目的大小。

希望之前有人遇到并解决了这个问题，或者只是比我更了解这一点，并能帮助我让它工作。

我还尝试了Etsy的交错GridView，结果类似，甚至更糟。

Answer 1

我找到了一个小方法

只需增加一点余量即1dp即可解决问题

例如，我的项目视图：

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  android:layout_margin="1dp"
  android:scaleType="centerCrop"
  android:adjustViewBounds="true" />

参考：https://www.reddit.com/r/androiddev/comments/2xd459/having_issues_creating_a_working_staggered_grid/