RecyclerView с StaggeredGridLayoutManager с загрузкой изображений из Glide

У меня проблема с отображением RecyclerView с StaggeredGridLayoutManager, чей элемент содержит imageview, а изображение загружается в imageview с использованием glide. Проблема, с которой я столкнулся, заключается в том, что после загрузки изображений они не расположены в шахматном порядке и имеют одинаковые размеры, а между двумя столбцами есть большой разрыв. Как изменить высоту изображений без пробелов в столбцах?


person Passiondroid    schedule 22.03.2016    source источник
comment
Если между столбцами есть большой разрыв, вы также должны указать scaleType для своих изображений, я бы посоветовал вам установить либо centerCrop, либо fitXY scaleType.   -  person Apurva    schedule 22.03.2016
comment
предоставление любого изображения + кода вашей работы было бы более понятным   -  person Sayem    schedule 22.03.2016
comment
Вы можете взглянуть на это, где вы можете использовать glide с Glide/Picasso-RecyclerView-StaggeredGridLayoutManager   -  person YLS    schedule 21.04.2016


Ответы (5)


У меня была такая же проблема. Что сработало для меня, так это установить android:adjustViewBounds="true" для моего ImageView. Я даже не устанавливаю scaleType.

Вот полное содержимое моего файла макета item.xml.

<?xml version="1.0" encoding="utf-8"?>
<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gif_image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorFiller"
    android:adjustViewBounds="true"/>

Надеюсь это поможет!

person Don Shrout    schedule 24.12.2016

Наконец-то я могу узнать душу. Мне пришлось создать собственное изображение, чтобы изменить его соотношение сторон в режиме Staggered Recycler View.

public class DynamicHeightNetworkImageView extends ImageView {
private float mAspectRatio = 1.5f;

public DynamicHeightNetworkImageView(Context context) {
    super(context);
}

public DynamicHeightNetworkImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public DynamicHeightNetworkImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

public void setAspectRatio(float aspectRatio) {
    mAspectRatio = aspectRatio;
    requestLayout();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int measuredWidth = getMeasuredWidth();
    setMeasuredDimension(measuredWidth, (int) (measuredWidth / mAspectRatio));
}
}

Затем в onBindViewHolder адаптера я устанавливаю соотношение сторон изображения с помощью -

Picasso.with(this).load(THUMB_URL).into(holder.thumbnailView);
holder.thumbnailView.setAspectRatio(ASPECT_RATIO));
person Passiondroid    schedule 23.03.2016
comment
спасибо .. 2 года спустя вы все еще спасаете мой проект и мою жизнь :D - person Dika; 19.05.2018
comment
что передать ASPECT_RATIO? как его получить? - person sam; 22.05.2021

Добавьте android:adjustViewBounds="true" в ImageView в макете элемента и используйте CenterCrop и FitCenter в Glide следующим образом:

Glide.with(vh.view.getContext())
        .load(item.getUrl())
        .centerCrop()
        .fitCenter()
        .thumbnail(0.3f)
        .placeholder(R.drawable.img_placeholder)
        .into(vh.image);
person Alektas    schedule 11.07.2019

Сначала инициализируйте RecyclerView

 RecyclerView recyclerGallery = (RecyclerView)findViewById(R.id.gallery_recycler_view);
 gaggeredGridLayoutManager = new StaggeredGridLayoutManager(3, 1);
 recyclerGallery.setLayoutManager(gaggeredGridLayoutManager);
 galleryAdapter = new GalleryAdaptor(ProfImageGallery.this, imgsUrl);
 recyclerGallery.setAdapter(galleryAdapter);

Затем ваш адаптер (редактируйте в соответствии с вашими потребностями)

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

        private Context mContext;
        private ArrayList<String> mDataset;


  // Provide a suitable constructor (depends on the kind of dataset)
        public GalleryAdaptor(Context mContext, ArrayList<String> mdataList) {
              this.mContext = mContext;
              this.mDataset = mdataList;
        }

        // Create new views (invoked by the layout manager)
        @Override
        public GalleryAdaptor.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

              // create a new view
              View v = LayoutInflater.from(parent.getContext())
                             .inflate(R.layout.row_gallery, parent, false);

              // set the view's size, margins, paddings and layout parameters 
              ViewHolder vh = new ViewHolder(v);
              return vh;
        }

        // Replace the contents of a view (invoked by the layout manager)
        @Override
        public void onBindViewHolder(final ViewHolder holder, final int position) {
              // - get element from your dataset at this position
              // - replace the contents of the view with that element


              String imageUrl = mDataset.get(position);

              holder.progressBar.setVisibility(View.VISIBLE); 

              //load the image url with a callback to a callback method/class

              Picasso.with(mContext)
                    .load(imageUrl)
                    .into(holder.workImage, 
                          new ImageLoadedCallback(holder.progressBar) {
                                @Override
                                public void onSuccess() {
                                      if (holder.progressBar != null) {
                                            holder.progressBar.setVisibility(View.GONE);
                                      }
                                }
                          });
        }

Заменить код Picaso, т. е.

  Picasso.with(mContext)
        .load(imageUrl)
        .into(holder.workImage, 
              new ImageLoadedCallback(holder.progressBar) {
                    @Override
                    public void onSuccess() {
                          if (holder.progressBar != null) {
                                holder.progressBar.setVisibility(View.GONE);
                          }
                    }
              });

Со скольжением.

  Glide.with(this).load(imageUrl).into(imageView);
person Navneet Sharma    schedule 22.03.2016
comment
каков макет для R.layout.row_gallery? - person Passiondroid; 22.03.2016
comment
это строка для вашего макета, используемого в представлении переработчика - person Navneet Sharma; 22.03.2016

Для меня это работает

        Picasso.get()
                .load(uploadCurrent.getImageUrl())
                .placeholder(R.drawable.loading)
                .config(Bitmap.Config.RGB_565)
                .into(holder.imageView);

<?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:layout_margin="2dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <ImageView
        android:id="@+id/id_imgItem"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"/>
    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/id_imgItemGets"
        android:paddingTop="4dp"
        android:paddingBottom="4dp"
        android:gravity="center_horizontal"
        android:textSize="18sp"/>

</RelativeLayout>
person Victor Sam VS    schedule 15.08.2019