web-dev-qa-db-fra.com

Comment charger une image GIF dans un espace réservé de Glide/Picasso/Ion, etc.

Impossible de trouver la solution parfaite pour charger une image gif dans un espace réservé

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

J'ai aussi essayé la propriété asGif () de Glide version 3.7.0. Mais pas de chance!

androidandroid-imageviewpicassoandroid-glideion
8
Dinesh Sunny

Voici le meilleur moyen ..

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

Utilisez ProgressBar comme gif de chargement:

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);
4
庄景鹏

Je le fais comme mentionné ci-dessous: 

L'idée est de créer le gif en utilisant transition drawables & définir le type de balance à la demande initiale de l'espace réservé & attacher un programme d'écoute pour changer le type de balance à la valeur requise par l'image téléchargée une fois l'image téléchargée. (la dernière étape peut être ignorée si vous n'en avez pas besoin)

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

Ma transition est dessinable (R.drawable.anim_image_placeholder):

(non requis si vous utilisez une image statique)

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

(static_placeholder est, par exemple, la première image du fichier GIF)

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

L'espace réservé est défini beaucoup plus tôt que la miniature, de sorte qu'il empêche les ImageViews blanches vides "longues". Vous pouvez ignorer l’espace réservé pour simplifier les choses.

ou une autre option consiste à utiliser AnimationDrawable (vous pouvez convertir votre GIF en AnimationDrawable à partir de ici ):

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

Réf: lien

0
backslashN