我在 Recycler View StaggeredGridLayout 中使用 Glide 获得不同大小的图像

Question

我需要从网上下载图像，为此我使用了Glide 。

下载图像后，它们会出现在 Recycler Veiw 中。 部分图像看起来不错，并像这样填充所有单元格

但是有些图像会表现出奇怪的行为，看起来像这样

据我所知，由于 Glade 工作异步导致这样的结果，并且在适配器 Glade 中创建单元格之前没有图像并且适配器为单元格创建默认大小......并且仅在一段时间后glade 带有图像，但是单元格已经以错误的大小创建。

但是如何修复呢？

我需要适配器等待林地完成下载，然后为 Recycler View 创建单元

我的 XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="4dp"
android:paddingEnd="8dp"
android:paddingStart="8dp"
android:paddingTop="4dp"
>

<android.support.v7.widget.CardView
  android:id="@+id/cvInbox"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:cardCornerRadius="5dp"
  app:cardElevation="15dp"
  >

<com.balysv.materialripple.MaterialRippleLayout
    android:id="@+id/rippleInbox"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/standard_white"
    app:mrl_rippleColor="@color/ntz_background_light_grey"
    app:mrl_rippleOverlay="true"
    >

  <LinearLayout
      android:id="@+id/cardMainActivityLinearLayout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      >

    <ImageView
        android:id="@+id/imageViewMainCard"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:background="@color/standard_white"
        android:orientation="vertical"
        android:layout_below="@+id/imageViewMainCard"
        >

      <TextView
          android:id="@+id/tvBrandName"
          android:text="custom brand"
          android:textColor="@color/black_color"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentTop="true"
          android:layout_alignParentLeft="true"
          />

      <TextView
          android:id="@+id/tvItemName"
          android:text="custom Type"
          android:textColor="@color/black_color"
          android:layout_below="@+id/tvBrandName"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          />

      <TextView
          android:id="@+id/tvPrice"
          android:text="custom price"
          android:textColor="@color/black_color"
          android:layout_below="@+id/tvItemName"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          />

      <Button
          android:id="@+id/bAction"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="button"
          android:layout_alignParentTop="true"
          android:layout_alignParentEnd="true"

          />

    </RelativeLayout>
  </LinearLayout>
 </com.balysv.materialripple.MaterialRippleLayout>
 </android.support.v7.widget.CardView>
</LinearLayout>

滑入适配器

ImageView iv = currentView.ivMainCard;
        String url = currentCard.getImageUrl();

        Glide.with(context)
                .load(url)
                .placeholder(R.drawable.progress_animation)
                .crossFade()
                .into(iv);

Answer 1

在您的回收器视图的 bindViewHolder 中，您需要使用全零参数添加到 imageView 布局（0,0,0,0）。在您的情况下，下面的代码

        ImageView iv = currentView.ivMainCard;
        iv.layout(0,0,0,0);

        String url = currentCard.getImageUrl();

        Glide.with(context)
                .load(url)
                .placeholder(R.drawable.progress_animation)
                .crossFade()
                .into(iv);

Answer 2

就我而言，我只是将 lib 从Glide更改为Picasso

现在我的请求看起来像这样

Picasso.with(context)
                .load(url)
                .placeholder(R.drawable.progress_animation)
                .error(R.drawable.image_error_404)
                .into(iv);

一切正常