Question

无法找到在占位符中加载gif图像的完美解决方案

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

也尝试了Glide版本3.7.0的asGif（）属性。但没有运气！

Answer 1

这是最好的方式..

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

Answer 2

使用ProgressBar作为加载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

我这样做如下所述：

想法是使用transition drawables＆amp;创建gif。根据占位符的要求将比例类型设置为最初＆amp;在下载映像后，附加侦听器以再次更改缩放类型以满足下载图像的要求。（如果你不需要，可以跳过最后一步）

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

Answer 4

（例如，static_placeholder是GIF的第一帧）

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

占位符的设置比缩略图早得多，因此可以防止“长”空白色ImageView。您可以跳过占位符来简化。

或其他选项是使用AnimationDrawable（您可以将您的GIF从here转换为AnimationDrawable）：

 ATOM   1910  CB  SER   128      45.806  50.621  39.840  1.00  9.36
 ATOM   1913  OG  SER   128      44.538  51.195  39.571  1.00  9.36
 ATOM   1915  C   SER   128      45.325  48.172  40.360  1.00  9.36
 ATOM   1916  O   SER   128      45.368  47.955  39.155  1.00  9.36
 ATOM   1917  N   SER   129      44.953  47.236  41.238  1.00 11.24
 ATOM   1919  CA  SER   129      44.395  45.938  40.826  1.00 11.24
 ATOM   1921  CB  SER   129      44.091  45.053  42.031  1.00 11.24
 ATOM   1924  OG  SER   129      43.483  45.786  43.085  1.00 11.24

参考：link

如何在Glide / Picasso / Ion等占位符中加载gif图像

4 个答案: