Как завершить обратный вызов setImageUrl с библиотекой Volley и NetworkImageView?

Я пробую новую библиотеку Google Volley, и она выглядит четко и быстро загружает изображения, когда я использую этот метод setImageUrl:

holder.image.setImageUrl(url, ImageCacheManager.getInstance().getImageLoader());

Я хочу добавить к нему метод обратного вызова/слушателя, который будет запускаться после завершения загрузки, чтобы я мог удалить представление progressBar и показать изображение. Это вариант, который существует в библиотеках Universal Image Loader и Picasso, но по какой-то причине я не могу найти способ сделать это в Volley, пробовал разные варианты Google, но пока не нашел ссылок.

У кого-нибудь есть пример кода, чтобы проиллюстрировать, как это делается?


person Emil Adz    schedule 29.11.2013    source источник


Ответы (7)


Вы можете использовать это представление вместо представления Google (я скопировал исходники из него и внес некоторые изменения):

public class VolleyImageView extends ImageView {

    public interface ResponseObserver
    {
        public void onError();
        public void onSuccess();
    }

    private ResponseObserver mObserver;

    public void setResponseObserver(ResponseObserver observer) {
        mObserver = observer;
    }

    /**
     * The URL of the network image to load
     */
    private String mUrl;

    /**
     * Resource ID of the image to be used as a placeholder until the network image is loaded.
     */
    private int mDefaultImageId;

    /**
     * Resource ID of the image to be used if the network response fails.
     */
    private int mErrorImageId;

    /**
     * Local copy of the ImageLoader.
     */
    private ImageLoader mImageLoader;

    /**
     * Current ImageContainer. (either in-flight or finished)
     */
    private ImageContainer mImageContainer;

    public VolleyImageView(Context context) {
        this(context, null);
    }

    public VolleyImageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public VolleyImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    /**
     * Sets URL of the image that should be loaded into this view. Note that calling this will
     * immediately either set the cached image (if available) or the default image specified by
     * {@link VolleyImageView#setDefaultImageResId(int)} on the view.
     *
     * NOTE: If applicable, {@link VolleyImageView#setDefaultImageResId(int)} and {@link
     * VolleyImageView#setErrorImageResId(int)} should be called prior to calling this function.
     *
     * @param url         The URL that should be loaded into this ImageView.
     * @param imageLoader ImageLoader that will be used to make the request.
     */
    public void setImageUrl(String url, ImageLoader imageLoader) {
        mUrl = url;
        mImageLoader = imageLoader;
        // The URL has potentially changed. See if we need to load it.
        loadImageIfNecessary(false);
    }

    /**
     * Sets the default image resource ID to be used for this view until the attempt to load it
     * completes.
     */
    public void setDefaultImageResId(int defaultImage) {
        mDefaultImageId = defaultImage;
    }

    /**
     * Sets the error image resource ID to be used for this view in the event that the image
     * requested fails to load.
     */
    public void setErrorImageResId(int errorImage) {
        mErrorImageId = errorImage;
    }

    /**
     * Loads the image for the view if it isn't already loaded.
     *
     * @param isInLayoutPass True if this was invoked from a layout pass, false otherwise.
     */
    private void loadImageIfNecessary(final boolean isInLayoutPass) {
        int width = getWidth();
        int height = getHeight();

        boolean isFullyWrapContent = getLayoutParams() != null
                && getLayoutParams().height == LayoutParams.WRAP_CONTENT
                && getLayoutParams().width == LayoutParams.WRAP_CONTENT;
        // if the view's bounds aren't known yet, and this is not a wrap-content/wrap-content
        // view, hold off on loading the image.
        if (width == 0 && height == 0 && !isFullyWrapContent) {
            return;
        }

        // if the URL to be loaded in this view is empty, cancel any old requests and clear the
        // currently loaded image.
        if (TextUtils.isEmpty(mUrl)) {
            if (mImageContainer != null) {
                mImageContainer.cancelRequest();
                mImageContainer = null;
            }
            setDefaultImageOrNull();
            return;
        }

        // if there was an old request in this view, check if it needs to be canceled.
        if (mImageContainer != null && mImageContainer.getRequestUrl() != null) {
            if (mImageContainer.getRequestUrl().equals(mUrl)) {
                // if the request is from the same URL, return.
                return;
            } else {
                // if there is a pre-existing request, cancel it if it's fetching a different URL.
                mImageContainer.cancelRequest();
                setDefaultImageOrNull();
            }
        }

        // The pre-existing content of this view didn't match the current URL. Load the new image
        // from the network.
        ImageContainer newContainer = mImageLoader.get(mUrl,
                new ImageListener() {
                    @Override
                    public void onErrorResponse(VolleyError error) {
                        if (mErrorImageId != 0) {
                            setImageResource(mErrorImageId);
                        }

                        if(mObserver!=null)
                        {
                            mObserver.onError();
                        }
                    }

                    @Override
                    public void onResponse(final ImageContainer response, boolean isImmediate) {
                        // If this was an immediate response that was delivered inside of a layout
                        // pass do not set the image immediately as it will trigger a requestLayout
                        // inside of a layout. Instead, defer setting the image by posting back to
                        // the main thread.
                        if (isImmediate && isInLayoutPass) {
                            post(new Runnable() {
                                @Override
                                public void run() {
                                    onResponse(response, false);
                                }
                            });
                            return;
                        }

                        if (response.getBitmap() != null) {
                            setImageBitmap(response.getBitmap());
                        } else if (mDefaultImageId != 0) {
                            setImageResource(mDefaultImageId);
                        }

                        if(mObserver!=null)
                        {
                            mObserver.onSuccess();
                        }
                    }
                });

        // update the ImageContainer to be the new bitmap container.
        mImageContainer = newContainer;
    }

    private void setDefaultImageOrNull() {
        if (mDefaultImageId != 0) {
            setImageResource(mDefaultImageId);
        } else {
            setImageBitmap(null);
        }
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        loadImageIfNecessary(true);
    }

    @Override
    protected void onDetachedFromWindow() {
        if (mImageContainer != null) {
            // If the view was bound to an image request, cancel it and clear
            // out the image from the view.
            mImageContainer.cancelRequest();
            setImageBitmap(null);
            // also clear out the container so we can reload the image if necessary.
            mImageContainer = null;
        }
        super.onDetachedFromWindow();
    }

    @Override
    protected void drawableStateChanged() {
        super.drawableStateChanged();
        invalidate();
    }
}

Пример использования:

 //set observer to view
 holder.image.setResponseObserver(new VolleyImageView.ResponseObserver() {
     @Override
     public void onError() {

     }

     @Override
     public void onSuccess() {

     }
 });

//and then load image
holder.image.setImageUrl(url, ImageCacheManager.getInstance().getImageLoader());
person Yakiv Mospan    schedule 26.02.2014
comment
этот код работает для меня .. но вы также должны добавить импорт, так что если кто-то новичок в этом может быстро понять, спасибо - person Gujarat Santana; 10.08.2015
comment
@Kamlesh Добро пожаловать, наслаждайтесь;) - person Yakiv Mospan; 04.08.2016
comment
хорошая работа, но вы также должны добавить импорт, чтобы любой, кто плохо знаком с этим, мог быстро понять. этот адрес поможет мне github.com/mcxiaoke/android-volley/blob/master/src/main/java/ - person sirmagid; 31.05.2017

Я сделал это так: -

mImageLoader.get(url, new ImageLoader.ImageListener() {
    @Override
    public void onResponse(ImageLoader.ImageContainer response, boolean isImmediate) {
        if (response.getBitmap() != null)
            //some code
        else
            //some code
    }
    @Override
    public void onErrorResponse(VolleyError error) {
    }
});
person Rahul    schedule 08.01.2016

Мы использовали что-то вроде этого:

imageView.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
    @Override
    public void onLayoutChange(View view, int i, int i2, int i3, int i4, int i5, int i6, int i7, int i8) {
        // the layout of the logo view changes at least twice: When it is added
        // to the parent and when the image has been loaded. We are only interested
        // in the second case and to find that case, we do this if statement

        if (imageView.getDrawable() != null) {
          doSomethingCoolHere();
        }

    }
});

Это не обязательно самый красивый фрагмент кода, но он работает (тм)

person nerdinand    schedule 04.06.2014
comment
Для View.OnLayoutChangeListener требуется уровень API 11. - person vfede; 02.10.2014

Еще один подход, основанный на знании внутреннего устройства NetworkImageView, заключается в создании подкласса NetworkImageView для наблюдения за применением mErrorImageId.

public class ManagedNetworkImageView extends NetworkImageView{
    private int mErrorResId;

    public ManagedNetworkImageView(Context context) {
        super(context);
    }

    public ManagedNetworkImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ManagedNetworkImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public void setErrorImageResId(int errorImage) {
        mErrorResId = errorImage;
        super.setErrorImageResId(errorImage);
    }

    @Override
    public void setImageResource(int resId) {
        if (resId == mErrorResId) {
            // TODO Handle the error here
        }
        super.setImageResource(resId);
    }

    @Override
    public void setImageBitmap(Bitmap bm) {
        // TODO Handle the success here
        super.setImageBitmap(bm);
    }
}

Вам также придется заменить NetworkImageView на ManagedNetworkImageView в ваших файлах макета.

Это немного хакерский подход, но он работает, когда NetworkImageView уже является выбранным вами решением.

person ChrisJ    schedule 07.07.2015
comment
Спасибо - поскольку я уже создал подкласс NetworkImageView, это было идеально для меня! - person Kibi; 07.09.2015
comment
Для меня это выглядит отличным решением, так как у меня уже есть собственный NetworkImageView, делающий его круговым. Чего я не могу понять, так это того, как мы используем метод setImageBitmap внутри класса ManagedNetworkImageView для обработки успеха, например, управляя индикатором выполнения в действии/фрагменте или делая что-то еще? Это через обратный звонок? Можете ли вы привести базовый пример? - person iBobb; 24.03.2016

Шаг 1: Объявите imageLoader (у меня есть класс MySocialMediaSingleton для управления запросом залпа)

ImageLoader imageLoader = MySocialMediaSingleton.getInstance(context).getImageLoader();

Шаг 2: используйте обратный вызов для imageLoader

imageLoader.get(url, new ImageLoader.ImageListener() {
        @Override
        public void onErrorResponse(VolleyError error) {
             //an error ocurred
        }

        @Override
        public void onResponse(ImageLoader.ImageContainer response, boolean isImmediate) {
            if (response.getBitmap() != null) {
                //loadingView gone
            } else {
                //some code
            }
        }
    });

Шаг 3: Покажите ответ в вашем imageView или NetworkImageView

holder.image.setImageUrl(ImageCacheManager.getInstance().getImageLoader(), imageLoader);
person Vladimir Salguero    schedule 20.04.2018

Другой подход (аналогичный коду из @Simulant выше) заключается в использовании обычного ImageView в вашем xml, а затем сделать запрос изображения с помощью Volley.ImageRequest. Если вы используете шаблон Singleton, который рекомендуется Google, это будет выглядеть примерно так: так:

ImageView mImageView = (ImageView) findViewById(R.id.myimageview);
RequestQueue requestQueue = MyVolleySingleton.getInstance(mContext).getRequestQueue();
ImageRequest mainImageRequest = new ImageRequest(myImageURL,
    new Response.Listener<Bitmap>() {
       @Override
       public void onResponse(Bitmap bitmap) {
          // set the image here
          mImageView.setImageBitmap(bitmap);
          // hide the spinner here
       }
    }, 0, 0, null, null);

 requestQueue.add(mainImageRequest);

Кстати: убедитесь, что вы используете обычный ImageView вместо NetworkImageView, иначе изображение не будет отображаться должным образом.

person bkurzius    schedule 25.03.2015

person    schedule
comment
да, я нашел здесь похожий код: stackoverflow.com/questions/17278866/android -volley-quickstart, но я понятия не имею, как его использовать в соответствии с методом setImageUrl. Вы можете это объяснить? - person Emil Adz; 30.11.2013
comment
Я не использовал #setImageUrl, вместо этого я использовал #setImageBitmap, поэтому я не знаю, как это будет работать. Примечание. Запрос также получил кеш. Таким образом, загрузка изображения дважды в течение короткого периода времени не приведет к загрузке изображения из Интернета. - person Simulant; 30.11.2013
comment
вы загружаете изображение из Интернета, когда используете setImageBitmap? - person Emil Adz; 30.11.2013
comment
@Emil Adz Нет, изображение загружается в новый ImageRequest. - person Richard Fung; 07.02.2014
comment
@EmilAdz, пожалуйста, отдайте должное Simulant. Ваш вопрос касался возможности, которую ваш держатель. изображение, NetworkImageView, не предлагает. Вы не можете использовать setImageUrl(), а также получить обратный вызов (по состоянию на март 2014 г.). Единственный способ получить обратный вызов — сделать запрос вручную, используя ImageRequest, как показано. В своей заметке Simulant упоминает кеш: обязательно включите ручное кеширование при ручном запросе изображения. Яков Моспан также решает проблему, но поскольку NetworkImageView не предоставляет много методов для переопределения, ему пришлось довольно много копировать/вставлять. - person larham1; 13.03.2014