android - 异步图像下载到 StaggeredGridLayout

Question

我有一个 URL 列表，这些 URL 指向具有不同尺寸的图像。我想在交错的垂直网格中显示它们，拉伸(stretch)每个图像的宽度以占据一行并拉伸(stretch)高度以环绕缩放图像。一切都应该看起来像这样:

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

以及调用所有内容的 fragment :

@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 的 Staggered GridView，但结果相似甚至更糟。

Answer 1

我找到了一个小修复
只需添加一点边距即 1dp 即可解决问题
例如，我的项目 View :

<?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/