glide - Android Picasso: diseño de imagen de marcador de posición y error

picasso kotlin

Question

Estoy usando la biblioteca de Picasso para descargar imágenes de la red. Me pregunto si puedo usar un cuadro de diálogo de progreso o una imagen GIF como marcador de posición. ¿Alguna idea sobre cómo hacer que la imagen del marcador de posición sea más pequeña (y que quepa en el centro) que la imagen real que se descarga?

Intenté ir a través de las muestras, pero no tuve suerte. ¿Alguien aquí que consiguió esto para trabajar?

Answer 1

Debes configurar tu ProgressBar además de la biblioteca de Picasso y debes administrar la visibilidad de la misma manualmente usando oyentes.

Estoy usando UniversalImageLoader y la biblioteca de Picasso debería ser muy similar.

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) {
    }
};

Answer 2

Es muy simple mostrar la barra de progreso.

Agregue este código a la actividad para cargar la imagen con la barra de progreso.

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() {

                }
            });

Agregue esto a su archivo de diseño.

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

Answer 3

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

                    }
                });
            }

Espero que ayude a alguien! :)

Answer 4

primero crea un diseño dibujable como este:
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%"/>

agrega loading.png a dibujable

Uso:

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

Answer 5

Puede usar una imagen de marcador de posición usando el marcador * .placeable (R.drawable.image_name) * en su llamada a Picasso como:

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

Si desea utilizar una barra de progreso en lugar de una imagen de marcador de posición, puede crear una devolución de llamada dentro de la función .into . Haz algo similar a lo siguiente:

en su opinión:

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

En su adaptador / clase:

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

dentro de su adaptador / clase como arriba, creo una clase interna para la devolución de llamada:

private class ImageLoadedCallback implements Callback {
   ProgressBar progressBar;

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

    @Override
    public void onSuccess() {

    }

    @Override
    public void onError() {

    }
}

Espero que esto tenga sentido!