Làm thế nào để tải hình ảnh gif trong placeholder của Glide/Picasso/Ion vv

Question

Không thể tìm thấy giải pháp hoàn hảo cho tải một hình ảnh gif trong placeholder

Glide 
    .with(context) 
    .load("imageUrl") 
    .asGif() 
    .placeholder(R.drawable.gifImage) 
    .crossFade() 
    .into(imageView) 

Cố gắng asGif() tài sản của Glide phiên bản 3.7.0 quá. Nhưng không may mắn!

Answer 1

Dưới đây là cách tốt nhất ..

Glide.with(getContext()).load(item[position]) 
       .thumbnail(Glide.with(getContext()).load(R.drawable.preloader)) 
       .fitCenter() 
       .crossFade() 
       .into(imageView); 

Answer 2

Sử dụng ProgressBar như tải gif:

Glide.with(context). 
      load(url) 
      .listener(new RequestListener<String, GlideDrawable>() { 
       @Override 
       public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) { 
        progressBar.setVisibility(View.GONE); 
        return false; 
       } 

       @Override 
       public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) { 
        progressBar.setVisibility(View.GONE); 
        return false; 
       } 
      }) 
      .crossFade(1000) 
      .into(imageView); 

Answer 3

tôi làm điều đó như đề cập dưới đây:

Ý tưởng là để tạo ra các gif sử dụng transition drawables & đặt loại quy mô theo yêu cầu của người giữ chỗ ban đầu & đính kèm người nghe để thay đổi loại quy mô một lần nữa thành yêu cầu d bởi hình ảnh đã tải xuống sau khi hình ảnh được tải xuống. (Bước cuối cùng có thể được bỏ qua nếu bạn không yêu cầu nó)

//ivBuilderLogo = Target ImageView 
//Set the scale type to as required by your place holder 
//ScaleType.CENTER_INSIDE will maintain aspect ration and fit the placeholder inside the image view 
holder.ivBuilderLogo.setScaleType(ImageView.ScaleType.CENTER_INSIDE); 

//AnimationDrawable is required when you are using transition drawables 
//You can directly send resource id to glide if your placeholder is static 
//However if you are using GIFs, it is better to create a transition drawable in xml 
//& use it as shown in this example 
AnimationDrawable animationDrawable; 
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) 
    animationDrawable=(AnimationDrawable)context.getDrawable(R.drawable.anim_image_placeholder); 
else 
    animationDrawable=(AnimationDrawable)context.getResources().getDrawable(R.drawable.anim_image_placeholder); 
animationDrawable.start(); 

Glide.with(context).load(logo_url) 
        .placeholder(animationDrawable) 
        .listener(new RequestListener<String, GlideDrawable>() { 
         @Override 
         public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) 
         { 
          return false; 
         } 

         //This is invoked when your image is downloaded and is ready 
         //to be loaded to the image view 
         @Override 
         public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) 
         { 
         //This is used to remove the placeholder image from your ImageView 
         //and load the downloaded image with desired scale-type(FIT_XY in this case) 
         //Changing the scale type from 'CENTER_INSIDE' to 'FIT_XY' 
         //will stretch the placeholder for a (very) short duration, 
         //till the downloaded image is loaded 
         //setImageResource(0) removes the placeholder from the image-view 
         //before setting the scale type to FIT_XY and ensures that the UX 
         //is not spoiled, even for a (very) short duration 
          holder.ivBuilderLogo.setImageResource(0); 
          holder.ivBuilderLogo.setScaleType(ImageView.ScaleType.FIT_XY); 
          return false; 
         } 
        }) 
        .into(holder.ivBuilderLogo); 

chuyển drawable của tôi (R.drawable.anim_image_placeholder):

(không yêu cầu nếu sử dụng một hình ảnh tĩnh)

<?xml version="1.0" encoding="utf-8"?> 
<animation-list 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:oneshot="false"> 
    <item android:drawable="@drawable/loading_frame1" android:duration="100" /> 
    <!--<item android:drawable="@drawable/loading_frame2" android:duration="100" />--> 
    <item android:drawable="@drawable/loading_frame3" android:duration="100" /> 
    <!--<item android:drawable="@drawable/loading_frame4" android:duration="100" />--> 
    <item android:drawable="@drawable/loading_frame5" android:duration="100" /> 
    <!--<item android:drawable="@drawable/loading_frame6" android:duration="100" />--> 
    <item android:drawable="@drawable/loading_frame7" android:duration="100" /> 
    <!--<item android:drawable="@drawable/loading_frame8" android:duration="100" />--> 
    <item android:drawable="@drawable/loading_frame9" android:duration="100" /> 
    <!--<item android:drawable="@drawable/loading_frame10" android:duration="100" />--> 
</animation-list> 

Answer 4

(static_placeholder là, nói, khung đầu tiên của GIF)

Glide... 
.load("http://...") 
.placeholder(R.drawable.static_placeholder) 
.thumbnail(Glide.with(...).load(R.raw.gif_placeholder)) 
.dontAnimate() //so there's no weird crossfade 

Placeholder được thiết lập nhiều earli er hơn hình thu nhỏ, do đó, nó sẽ ngăn không cho ImageView dài màu trắng "dài". Bạn có thể bỏ qua trình giữ chỗ để đơn giản hóa.

hoặc tùy chọn khác là sử dụng AnimationDrawable (bạn có thể chuyển đổi GIF của bạn để AnimationDrawable từ here):

AnimationDrawable animPlaceholder = (AnimationDrawable) ContextCompat.getDrawable(activity, R.drawable.animatedDrawable); 
animPlaceholder.start(); // probably needed 
Glide... 
.load("http://...") 
.placeholder(animPlaceholder) 

Ref: link