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

时间:2017-02-14 13:06:58

标签: java android image android-recyclerview recycler-adapter

我需要从网上下载图片,我使用Glide

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

enter image description here

但是有些图像会执行奇怪的行为并且看起来像这样

enter image description here

据我所知,由于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);

2 个答案:

答案 0 :(得分:1)

在您的Recycler View的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);

答案 1 :(得分:0)

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

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

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

一切都好吗