Android Picasso - 占位符和错误图像样式

Android Picasso - Placeholder and Error image styling

提问by suresh cheemalamudi

I'm using Picasso library for image downloading from the network. I just wonder whether I can use a progress dialog or a GIF image as a place holder? Also any idea on how to make place holder image to be smaller (and fit in centre) than the actual image that is downloaded?

我正在使用毕加索库从网络下载图像。我只是想知道我是否可以使用进度对话框或 GIF 图像作为占位符？还有关于如何使占位符图像比下载的实际图像更小（并适合中心）的想法？

I tried going thru the samples but no luck. Any one here who got this to work?

我尝试通过样品，但没有运气。这里有人让这个工作吗？

回答by Chris

You can use a placeholder image by using the *.placeholder(R.drawable.image_name)* in your Picasso call like:

您可以通过在 Picasso 调用中使用 *.placeholder(R.drawable.image_name)* 来使用占位符图像，例如：

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

If you want to use a progress bar instead of a placeholder image you can create a callback inside the .intofunction. Do something similar to the following:

如果您想使用进度条而不是占位符图像，您可以在.into函数中创建一个回调。执行类似于以下操作：

in your view:

在您看来：

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

In your adapter/class:

在您的适配器/类中：

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

inside your adapter/class as above I create an inner class for the callback:

在上面的适配器/类中，我为回调创建了一个内部类：

private class ImageLoadedCallback implements Callback {
   ProgressBar progressBar;

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

    @Override
    public void onSuccess() {

    }

    @Override
    public void onError() {

    }
}

Hope this makes sense!

希望这是有道理的！

回答by Akanksha Rathore

I implemented the progress dialog till the image download and its very simple. Take your ImageView in relative layout and place progress loader on same image view. Apply the below code and handle progress dialog visibility only.

我实现了进度对话框，直到图像下载并且非常简单。将您的 ImageView 置于相对布局中，并将进度加载器放置在同一图像视图上。应用以下代码并仅处理进度对话框可见性。

                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

                    }
                });
            }

Hope it will help someone! :)

希望它会帮助某人！:)

回答by Yash Bhardwaj

Its very simple to show the progress bar.

显示进度条非常简单。

Add this code to the activity to load the image with progress bar.

将此代码添加到活动以加载带有进度条的图像。

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

                }
            });

Add this to your layout file.

将此添加到您的布局文件中。

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

回答by Hamid

first create a drawable layout like this:
progress_animation.xml:

首先创建一个可绘制的布局，如下所示：
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%"/>

add loading.pngto drawable

Usage:

添加 loading.png到 drawable 用法：

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

回答by percy-g2

Kotlin

科特林

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

The above code eliminates xml code and it's clean.

上面的代码去掉了xml代码，很干净。

回答by tasomaniac

You should setup your ProgressBar in addition to the Picasso library and you should manage the visibility of it manually using listeners.

除了 Picasso 库之外，您还应该设置 ProgressBar，并且应该使用侦听器手动管理它的可见性。

I am using UniversalImageLoader and the Picasso library should be very similiar.

我正在使用 UniversalImageLoader 和 Picasso 库应该非常相似。

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