web-dev-qa-db-fra.com

Android Picasso - Espace réservé et style d'image d'erreur

J'utilise la bibliothèque Picasso pour le téléchargement d'images à partir du réseau. Je me demande simplement si je peux utiliser une boîte de dialogue de progression ou une image GIF comme espace réservé? Vous avez également une idée sur la façon de rendre l'image de l'espace réservé plus petite (et adaptée au centre) que l'image réelle téléchargée?

J'ai essayé de parcourir les échantillons mais pas de chance. Quelqu'un ici qui a réussi à faire fonctionner ça?

androidimage-loadingpicasso
37
suresh cheemalamudi

Vous pouvez utiliser une image d'espace réservé en utilisant le * .placeholder (R.drawable.image_name) * dans votre appel Picasso comme:

Picasso.with(context)
       .load(imageUrl)
       .placeholder(R.drawable.image_name)

Si vous souhaitez utiliser une barre de progression au lieu d'une image d'espace réservé, vous pouvez créer un rappel à l'intérieur de la fonction . Into . Faites quelque chose de similaire à ce qui suit:

à votre avis:

//create the progressBar here and set it to GONE. This can be your adapters list item view for example
<RelativeLayout
    Android:id="@+id/myContainer"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content">


    <ProgressBar
        Android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleSmall"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center"
        Android:visibility="gone"
        Android:layout_centerHorizontal="true"
        Android:layout_centerVertical="true"
        Android:layout_marginTop="20dp"
        Android:layout_marginBottom="20dp"/>

    <ImageView
        Android:id="@+id/myImageView"
        Android:layout_width="60dp"
        Android:layout_height="60dp"
        Android:layout_gravity="center"
        Android:layout_margin="5dp"
        Android:paddingLeft="60dp"
        Android:scaleType="centerCrop"></ImageView>

</RelativeLayout>

Dans votre adaptateur/classe:

//create a new progress bar for each image to be loaded
ProgressBar progressBar = null;
if (view != null) {
   progressBar = (ProgressBar) view.findViewById(R.id.progressBar);
   progressBar.setVisibility(View.VISIBLE);
}

//get your image view
ImageView myImage = (ImageView) view.findViewById(R.id.myImageView);

//load the image url with a callback to a callback method/class
Picasso.with(context)
            .load(imageUrl)
            .into(myImage,  new ImageLoadedCallback(progressBar) {
                    @Override
                    public void onSuccess() {
                        if (this.progressBar != null) {
                            this.progressBar.setVisibility(View.GONE);
                         }
                    }
              });

à l'intérieur de votre adaptateur/classe comme ci-dessus, je crée une classe interne pour le rappel:

private class ImageLoadedCallback implements Callback {
   ProgressBar progressBar;

    public  ImageLoadedCallback(ProgressBar progBar){
        progressBar = progBar;
    }

    @Override
    public void onSuccess() {

    }

    @Override
    public void onError() {

    }
}

J'espère que cela a du sens!

94
Chris

J'ai implémenté la boîte de dialogue de progression jusqu'au téléchargement de l'image et c'est très simple. Prenez votre ImageView dans une disposition relative et placez le chargeur de progression sur la même vue d'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

                    }
                });
            }

J'espère que cela aidera quelqu'un! :)

15
Akanksha Rathore

C'est très simple d'afficher la barre de progression.

Ajoutez ce code à l'activité pour charger l'image avec la barre de progression.

Picasso.with(this)
            .load(hoteImageStr)
            .error(R.drawable.loading)
            .into(img,  new com.squareup.picasso.Callback() {
                @Override
                public void onSuccess() {
                    if (progress != null) {
                        progress .setVisibility(View.GONE);
                    }
                }

                @Override
                public void onError() {

                }
            });

Ajoutez ceci à votre fichier de mise en page.

 <RelativeLayout
    Android:id="@+id/hoteldetails_myContainer"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent"
   >


    <ProgressBar
        Android:id="@+id/hoteldetails_progressBar"
        style="?android:attr/progressBarStyleSmall"
        Android:layout_width="50dp"
        Android:layout_height="50dp"
        Android:layout_gravity="center"
        Android:visibility="gone"
        Android:layout_centerHorizontal="true"
        Android:layout_centerVertical="true"
        Android:layout_marginTop="20dp"
        Android:layout_marginBottom="20dp" />

    <ImageView
        Android:id="@+id/hoteldetails_imageView1"
        Android:layout_width="fill_parent"
        Android:layout_height="fill_parent"
        Android:scaleType="fitXY"
        />

</RelativeLayout>
12
Yash Bhardwaj

créez d'abord une mise en page dessinable comme celle-ci:
progress_animation.xml: 

<?xml version="1.0" encoding="utf-8"?>

<animated-rotate xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:drawable="@drawable/loading"
    Android:pivotX="50%"
    Android:pivotY="50%"/>


ajouter loading.png à dessinable
loading.png
Utilisation: 

Picasso.with(context).load(imageUri).placeholder(R.drawable.progress_animation).into(imgView);
9
Hamid

Kotlin

val circularProgressDrawable = CircularProgressDrawable(context)
circularProgressDrawable.strokeWidth = 5f
circularProgressDrawable.centerRadius = 30f
circularProgressDrawable.start()
Picasso.get().load(imageUrl).placeholder(circularProgressDrawable).into(holder.imageView)

Le code ci-dessus élimine le code xml et il est propre.

4
percy-g2

Vous devez configurer votre ProgressBar en plus de la bibliothèque Picasso et vous devez gérer sa visibilité manuellement à l'aide d'écouteurs.

J'utilise UniversalImageLoader et la bibliothèque Picasso devrait être très similaire.

private ImageLoadingListener photoSuccess = new ImageLoadingListener() {

    @Override
    public void onLoadingStarted(String imageUri, View view) {
    }

    @Override
    public void onLoadingFailed(String imageUri, View view,
            FailReason failReason) {
        if(progress != null)
            progress.setVisibility(View.GONE);
    }

    @Override
    public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
        if(progress != null)
            progress.setVisibility(View.GONE);
        if(mImage != null)
            mImage.setVisibility(View.VISIBLE);
    }

    @Override
    public void onLoadingCancelled(String imageUri, View view) {
    }
};
1
tasomaniac