web-dev-qa-db-fra.com

Image de chargement animée en picasso

J'ai le code suivant pour charger une image dans Picasso, en utilisant un dessin pour l'affichage de l'espace réservé pendant le téléchargement de l'image. Ce que je veux cependant, c’est une barre de défilement animée, de style barre de progression, qui s’anime autour pendant le chargement de l’image, comme dans la plupart des applications professionnelles. Picasso ne semble pas supporter cela, seulement des images statiques pouvant être dessinées. Y a-t-il un moyen de le faire fonctionner avec Picasso ou dois-je faire quelque chose de différent?

Picasso.with(context).load(url)             
                    .placeholder(R.drawable.loading)
                    .error(R.drawable.image_download_error)
                    .into(view);
androidpicasso
94
NZJames

Comment avoir une image d'animation de progression de chargement en utilisant l'espace réservé Picasso:

J'ai facilement résolu ce problème en utilisant un objet xml à rotation animée.

Pas:

progress_image.png

progress_image.png

/res/drawable/progress_animation.xml 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">

<item Android:gravity="center">
    <animated-rotate xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:drawable="@drawable/progress_image"
        Android:pivotX="50%"
        Android:pivotY="50%" />
    </item>
</layer-list>

Picasso chargement: 

Picasso.with( context )
        .load( your_path )
        .error( R.drawable.ic_error )
        .placeholder( R.drawable.progress_animation )
        .into( image_view );
219
DBragion

J'ai implémenté le dialogue de progression jusqu'au téléchargement de l'image et sa très simple. Prenez votre ImageView dans une disposition relative et placez le chargeur de progression sur la même image. Appliquez le code ci-dessous et gérez uniquement la visibilité de la boîte de dialogue de progression.

holder.loader.setVisibility(View.VISIBLE);
            holder.imageView.setVisibility(View.VISIBLE);
         final ProgressBar progressView = holder.loader;
            Picasso.with(context)
            .load(image_url)
            .transform(new RoundedTransformation(15, 0))
            .fit()
            .into(holder.imageView, new Callback() {
                @Override
                public void onSuccess() {
                    progressView.setVisibility(View.GONE);
                }

                @Override
                public void onError() {
                    // TODO Auto-generated method stub

                }
            });
        }

Prendre plaisir. :)

64
Akanksha Rathore

Picasso ne supporte malheureusement pas les espaces réservés. 

Une façon de contourner ce problème consiste à placer votre ImageView dans un FrameLayout avec le dessin animé en dessous. Ainsi, lorsque Picasso charge l’image, il se charge par-dessus l’espace réservé animé, ce qui donne à l’utilisateur l’effet recherché.

Alternativement, vous pouvez charger l'image dans un Target . La barre de progression s'afficherait par défaut. Lorsque la méthode onBitmapLoaded est appelée, vous pouvez la masquer et afficher l'image. Vous pouvez voir une implémentation de base de ceci ici

3
Michael

Pour tous ceux qui essaient d'utiliser la technique de DBragion: Assurez-vous de disposer de la dernière version de Picasso, sinon elle ne tournera pas Le mien ne fonctionnait pas avant l'utilisation de la version 2.5.2.

compile 'com.squareup.picasso:picasso:2.5.2'
0
Jesse Abruzzo

Je l'ai fait fonctionner de la manière suivante:

  1. Créé un drawable (trouvé quelque part sur Internet) et le mettre dans le res/drawable:

    <?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:fromDegrees="90"
Android:pivotX="50%"
Android:pivotY="50%"
Android:toDegrees="360">

<shape
    Android:innerRadiusRatio="3"
    Android:shape="ring"
    Android:thicknessRatio="7.0">

    <gradient
        Android:angle="0"
        Android:centerColor="#007DD6"
        Android:endColor="#007DD6"
        Android:startColor="#007DD6"
        Android:type="sweep"
        Android:useLevel="false" />
</shape>

  2. Dans mon article pour l'élément ProgressBar ajouté à GridView:

    <ProgressBar
    Android:id="@+id/movie_item_spinner"
    Android:layout_width="@dimen/poster_width"
    Android:layout_height="@dimen/poster_height"
    Android:progressDrawable="@drawable/circular_progress_bar"/>

  3. Dans Adapter, Target Object ajouté avec les paramètres suivants, où poster et spinner sont des références à ImageView et ProgressBar:

    // Cible pour afficher/masquer ProgressBar sur ImageView

    final Target target = new Target() {

        @Override
        public void onPrepareLoad(Drawable drawable) {
            poster.setBackgroundResource(R.color.white);
            spinner.setVisibility(View.VISIBLE);
        }

        @Override
        public void onBitmapLoaded(Bitmap photo, Picasso.LoadedFrom from) {
            poster.setBackgroundDrawable(new BitmapDrawable(photo));
            spinner.setVisibility(View.GONE);
        }

        @Override
        public void onBitmapFailed(Drawable drawable) {
            poster.setBackgroundResource(R.color.white);
        }
    };

  4. Les résultats seront les mêmes que lors du chargement - le cercle tourne (désolé pour cette capture d'écran, mais les images apparaissent trop rapidement): ScreenShot

0
Dmytro Karataiev

Dans ce link , Jake Wharton a déclaré:

Nan. Nous utilisons Android BitmapFactory pour tout le décodage d'image et il n'a pas de support GIF animé (malheureusement).

Alors tu ne peux pas

0
Radesh

Ajoutez simplement un attribut de forme dans la réponse de DBragion comme ci-dessous et cela fonctionnera à merveille. Bonne codage.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>

        <shape
            Android:shape="rectangle">

            <size
                Android:width="200dp"
                Android:height="200dp"/>

            <solid
                Android:color="#00FFFFFF"/>
        </shape>
    </item>

    <item Android:gravity="center">
        <animated-rotate xmlns:Android="http://schemas.Android.com/apk/res/Android"
            Android:drawable="@drawable/spinner"
            Android:pivotX="50%"
            Android:pivotY="50%" />
    </item>
</layer-list>

Vous pouvez aussi utiliser Glide:

Glide.with(activity).load(url)
                    .apply(RequestOptions.centerInsideTransform())
                    .placeholder(R.drawable.progress_animation)
                    .into(imageview);
0
Tushar Lathiya

J'ai trouvé réponse à cette question!

Voir: https://github.com/square/picasso/issues/427#issuecomment-26627625

En plus de la réponse de @DBragion, essayez ci-dessous.

Maintenant, nous pouvons fixer la hauteur et la largeur!

image_view.scaleType = ImageView.ScaleType.CENTER_INSIDE

picasso.load(your_path)
        .fit()
        .centerCrop()
        .noFade()
        .placeholder(R.drawable. progress_animation)
        .into(image_view)

Je pense qu'il y a deux points clés.

  1. utilisez noFade ()

  2. définissez scaleType sur image_view sur "CENTER_INSIDE"

0
Yusuke Yonehara

Il suffit d'utiliser Picasso PlaceHolder

  Picasso.get()
        .load(datas[position].artist?.image)
        .placeholder(R.drawable.music_image)
        .error(R.drawable.music_image)
        .into(holder.cardViewImage)
0
Exel Staderlin