Как сделать ImageView на RecyclerView для установки размера, пока Glide загружает изображение?

Question

У меня есть некоторые проблемы относительно моего ImageView внутри моего RecyclerView. Я создаю средство просмотра комиксов, и я загружаю очень длинные изображения. Я нарезал свои изображения на 8 частей, поэтому мой ImageView может справиться с ними. Проблема заключается в загрузке изображения на RecyclerView.

Я использую Glide, и когда Glide загружает сегментированные детали, есть довольно заметная задержка. Что предпочтительнее из-за кэширования изображений, и оно работает очень хорошо, но это оставило нежелательный эффект. Я не могу показать реальное изображение, так как это происходит очень быстро, но я могу представить его с помощью ASCII:

Например вот моя RecyclerView при запуске:

---------------Segment1 
#......................... 
#......................... 
#......................... 
#......................... 
#......................... 
#......................... 
---------------Segment2 
---------------Segment3 
---------------Segment4 
#......................... 
#......................... 
#......................... 
#......................... 
#......................... 
#......................... 

Как вы можете заметить здесь, Glide является еще не закончил загрузку Сегмент2 и Сегмент3 и по сути, показывает сегмент1 и сегмент4, сшитые вместе. Весь неожиданный Segment2 и Segment3 выскочили из существования, что не очень приятно.

Даже если бы я разместил его на ScrollView и динамически добавил в него ImageView, это будет тем же эффектом. Я не могу назначить постоянные px/dip по ширине и высоте на ImageView по очевидным причинам, так как мне нужно обрабатывать несколько размеров экрана.

Моя ImageView установка выглядит следующим образом:

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

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

</LinearLayout> 

Вот что я делаю, когда я связываю с этим ImageView:

private void bindSegment(ComicViewHolder holder, int position) 
{ 
    File file = mSegments.get(position); 
    Point imageSize = Constants.getImageSize(file); 
    Point screenSize = Constants.getScreenSize(mContext); 

    ImageView imageView = holder.mImageViewComic; 

    Glide.with(imageView.getContext()) 
     .load(file.getAbsolutePath()) 
     .override(imageSize.x , imageSize.y) 
     .crossFade(0) 
     .into(imageView); 
} 

Если я назначить постоянный пиксель ширина/высота на основе ImageView через getLayoutParams(), я могу заставить его работать на одном телефоне, а не на другом. Я не могу жестко установить ImageView размер таким образом. Glide.override, похоже, не работает, как я ожидал. Мне нужен мой ImageView, чтобы узнать его текущую размерную базу на размер загружаемого изображения, чтобы он заполнил промежуток между загруженными сегментами и не выскочил из существования.

Любые мысли?

Answer 1

Поддержка этой библиотеки не поддерживается библиотекой Glide. Я много раз пробовал. Однако, наконец, я сам получил решение. Для загрузки изображения вы должны отправлять URL-адрес изображения и некоторые другие метаданные.

Решение: с помощью этих метаданных вам необходимо отправить размеры (высоту и ширину) изображения, которое будет загружено в ваше изображение.

Вы получите эти размеры перед загрузкой изображения в изображение. Теперь вам нужно масштабировать высоту и ширину вашего изображения с этими размерами и применять для этого заполнитель.

Наконец, когда ваше изображение будет загружено, оно заменит ваш заполнитель.

Я предположив вы собираетесь установить ширину вашего ImageView = ширина экрана

DisplayMetrics metrics; 
    int width = 0, height = 0; 

metrics = new DisplayMetrics(); 

высота = metrics.heightPixels; width = metrics.widthPixels;

Теперь

int heightOfImage = 0; 
int widthOfImage = 0; 

float scalingRatio = ((Float.parseFloat(heightOfImage)/Float.parseFloat(widthOfImage)); 

viewHolder.imageLoadingLayout.getLayoutParams().height = Math.round(scalingRatio*width); //imageLoadingLayout is your placeholder 

Наконец,

Glide.with(activity) 
      .load(imageURL) 
      .diskCacheStrategy(DiskCacheStrategy.NONE) 
      .skipMemoryCache(true) 
      .listener(new RequestListener<String, GlideDrawable>() { 
       @Override 
       public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) { 
        return false; 
       } 
       @Override 
       public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) { 
        viewHolder.imageLoadingLayout.setVisibility(View.GONE); 


        return false; 
       } 
      }) 
      .crossFade() 
      .override(1700, 1700) 
      .diskCacheStrategy(DiskCacheStrategy.ALL) 
      .into(imageView); 

} 

Image Layout

<ImageView 
    android:id="@+id/imageView" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:adjustViewBounds="true" 
    android:scaleType="fitCenter" 
/> 

Answer 2

newPostHolder.height = DeviceHight; 
int heightOfImage = data.getInt("image_height"); 
        if (heightOfImage > ((newPostHolder.height/100) * 80) || heightOfImage == newPostHolder.height) { 
         heightOfImage = ((newPostHolder.height/100) * 69); 
        } 

        newPostHolder.one_imageview.getLayoutParams().height = heightOfImage;