2016-08-20 16 views
5

ないプレースホルダにグライド/ピカソ/イオンなどのプレースホルダにGIF画像をロードする方法

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

をGIF画像をロードするための完璧なソリューションを見つけることができるには、あまりにグライドバージョン3.7.0のasGif()プロパティを試してみました。しかし、幸運!ここで

+0

たライブラリグライド/イオンから...私は両方を使用しています。グライドロードGIFは非常に遅いですが、イオンロードはグライドライブラリよりも2倍高速です。しかし、イメージ品質の面では、グライドはイオンより優れています...あなたの提案@Dinesh ... –

答えて

11

の最良の方法です。..

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

Opはこれを正解とマークする必要があります – suku

4

使用荷重GIFなどのProgressBar:

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); 
3

以下に述べるように私はそれを行う:

アイデアが使用してGIFを作成することですtransition drawables &スケールタイプをプレースホルダの必要に応じて設定します。&リスナーを接続して、スケールタイプを再度requireに変更します画像をダウンロードした後、ダウンロードされた画像によって表示されます。 (あなたがそれを必要としない場合の最後のステップはスキップすることができます)

//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); 

マイ遷移描画可能(R.drawable.anim_image_placeholder):

<?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> 

(静止画像を使用している場合は必要ありません)

0

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

プレースホルダが設定されている多くのearli(static_placeholderは、たとえば、GIFの最初のフレームです)それは、「長い」空白のImageViewsを防ぎます。ただし、プレースホルダをスキップして簡略化することもできます。

または別のオプションは、AnimationDrawableは(あなたがhereからAnimationDrawableにあなたのGIFに変換することができます)を使用することです:

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

参考:あなたはGIF画像をロードすることを好むだろうどのようlink

関連する問題