Immagine di caricamento animata in picasso

Ho il seguente codice per caricare un'immagine in Picasso, utilizzando un disegnabile per il segnaposto da visualizzare durante il download dell'immagine. Quello che voglio però è uno spinner in stile barra di avanzamento rotante animato che si anima intorno e intorno durante il caricamento dell'immagine, come vedo nella maggior parte delle app professionali. Picasso non sembra supportare questo, solo disegnabili immagini statiche. C'è un modo per farlo funzionare con Picasso o devo fare qualcosa di diverso?

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

Come avere un'immagine di animazione dell'avanzamento del caricamento utilizzando il segnaposto Picasso:

Ho risolto facilmente questo problema utilizzando un oggetto xml con rotazione animata.

passi:

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>

Caricamento di Picasso:

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

Ho implementato la finestra di dialogo di avanzamento fino al download dell'immagine ed è molto semplice. Prendi il tuo ImageView in un layout relativo e posiziona il caricatore di avanzamento sulla stessa visualizzazione dell'immagine. Applica il codice seguente e gestisci solo la visibilità della finestra di dialogo di avanzamento.

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

                }
            });
        }

Godere. :)

Picasso non supporta i segnaposto animati purtroppo.

Un modo per aggirare questo problema è posizionare il tuo ImageView in un FrameLayout con il disegno animato sottostante. In questo modo, quando Picasso carica l'immagine, verrà caricata sopra il segnaposto animato, dando all'utente l'effetto desiderato.

In alternativa, puoi caricare l'immagine in un Target . Quindi dovresti visualizzare la barra di avanzamento per impostazione predefinita e quando viene chiamato il metodo onBitmapLoaded puoi nasconderlo e visualizzare l'immagine. Puoi vedere un'implementazione di base di questo qui

Basta aggiungere l'attributo forma nella risposta di DBragion come di seguito e funzionerà come un fascino. Buona codifica.

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

Puoi usare anche Glide:

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

Ho trovato risposta a questa domanda!

Vedi: https://github.com/square/picasso/issues/427#issuecomment-266276253

Oltre alla risposta di @DBragion, prova di seguito.

Ora possiamo aggiustare altezza e larghezza!

image_view.scaleType = ImageView.ScaleType.CENTER_INSIDE

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

Penso che ci siano due punti chiave.

1. usa noFade ()

2. imposta scaleType di image_view su "CENTER_INSIDE"

L'ho fatto lavorando in questo modo:

1. Creato un drawable (trovato da qualche parte su Internet) e inseriscilo in 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. Nel mio elemento per GridView aggiunto l'elemento ProgressBar:

   <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. In Adapter aggiunto Target Object con i seguenti parametri, dove poster e spinner sono riferimenti a ImageView e ProgressBar:

   // Target per mostrare / nascondere ProgressBar su 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. I risultati saranno così al caricamento - il cerchio sta ruotando (scusa per questo screenshot, ma le immagini appaiono troppo velocemente): ScreenShot

Per chiunque cerchi di usare la tecnica di DBragion: assicurati di avere l'ultima versione di Picasso altrimenti non girerà. Il mio non ha funzionato fino a quando non ho usato la versione 2.5.2.

compile 'com.squareup.picasso:picasso:2.5.2'

In questo link , Jake Wharton ha detto:

No. Usiamo Android BitmapFactory per tutta la decodifica di immagini e non ha supporto per GIF animate (purtroppo).

Allora non puoi

Usa semplicemente Picasso PlaceHolder

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