android - usar - Imagen de carga animada en picasso

picasso android dependencia

Question

Tengo el siguiente código para cargar una imagen en Picasso, usando un dibujante para que el marcador de posición se muestre mientras la imagen se está descargando. Sin embargo, lo que quiero es un spinner de estilo de barra de progreso giratorio animado que se anima mientras la imagen se carga, como veo en la mayoría de las aplicaciones profesionales. Picasso no parece apoyar esto, solo imágenes estáticas dibujables. ¿Hay alguna manera de hacerlo funcionar con Picasso o tengo que hacer algo diferente?

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

Answer 1

Cómo tener una imagen de animación de progreso de carga usando el marcador de posición de Picasso:

Lo resolví fácilmente usando un objeto xml de rotación animada.

Pasos:

progress_image.png

/res/drawable/progress_animation.xml

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

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

Carga de Picasso:

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

¡Espero que esto ayude!

Answer 2

Implementé el diálogo de progreso hasta la descarga de la imagen y es muy simple. Tome su ImageView en diseño relativo y coloque el cargador de progreso en la misma vista de imagen. Aplique el código siguiente y maneje solo la visibilidad del diálogo de progreso.

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

                }
            });
        }

Disfrutar. :)

Answer 3

Lo hice funcionar de la siguiente manera:

1. Creó un dibujante (que se encuentra en algún lugar de Internet) y lo puso en la res / dibujable:

   <?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. En mi artículo para el elemento ProgressBar añadido a 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. En Adapter se agregó Target Object con los siguientes parámetros, donde poster y spinner son referencias a ImageView y ProgressBar:

   // Objetivo para mostrar / ocultar ProgressBar en 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. Los resultados serán similares a los de la carga: el círculo está girando (lo siento por esta captura de pantalla, pero las imágenes aparecen demasiado rápido): ScreenShot

Answer 4

Para cualquiera que intente utilizar la técnica de DBragion: asegúrese de tener la última versión de Picasso o de lo contrario no girará. El mío no funcionó hasta que usé la versión 2.5.2.

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

Answer 5

Picasso no es compatible con marcadores de posición animados por desgracia.

Una forma de evitar esto es colocar su ImageView en un FrameLayout con el dibujo animado debajo. De esta forma, cuando Picasso cargue la imagen, se cargará en la parte superior del marcador de posición animado, lo que le dará al usuario el efecto deseado.

Alternativamente, puede cargar la imagen en un Target . Entonces tendría la barra de progreso que se muestra de forma predeterminada, y cuando se llama al método onBitmapLoaded puede ocultarlo y mostrar la imagen. Puedes ver una implementación básica de esto here