I'm trying out the Google's new Volley library and it's looking sharp and loads images quickly when I use this method setImageUrl
:
我正在尝试Google的新Volley库,当我使用这个方法setImageUrl时,它看起来很清晰并且可以快速加载图像:
holder.image.setImageUrl(url, ImageCacheManager.getInstance().getImageLoader());
I want to add to it a call back/listener method that will fire up when loading is finished, so I can remove the progressBar
view and show the image. It's an option that exists in Universal Image Loader and Picasso libraries, but for some reason, I can't find a way to do that in Volley, tried to Google different options but so far haven't found any reference.
我想添加一个回调/监听器方法,它将在加载完成后启动,因此我可以删除progressBar视图并显示图像。它是Universal Image Loader和Picasso库中的一个选项,但由于某种原因,我找不到在Volley中这样做的方法,尝试了Google的不同选项,但到目前为止还没有找到任何参考。
Does someone have a code sample to illustrate how it's done?
有人有代码示例来说明它是如何完成的吗?
7 个解决方案
#1
18
You can use this View instead of Google's View (I've copied sources from it and made some changes):
您可以使用此视图而不是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();
}
}
Usage example :
用法示例:
//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());
#2
7
I did it this way:-
我是这样做的: -
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) {
}
});
#3
6
We used something like this:
我们用过这样的东西:
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();
}
}
});
It's not necessarily the most beautiful piece of code but it works (tm)
它不一定是最美丽的代码片段,但它有效(tm)
#4
2
Yet another approach, that relies on knowing the internals of NetworkImageView, is to subclass NetworkImageView to watch for the mErrorImageId getting applied.
另一种依赖于了解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);
}
}
You'll also have to replace NetworkImageView with ManagedNetworkImageView in your layout files.
您还必须在布局文件中用ManagedNetworkImageView替换NetworkImageView。
It's a bit hacky, but does the job when NetworkImageView is already your chosen solution.
它有点hacky,但是当NetworkImageView已经是您选择的解决方案时,它的工作就完成了。
#5
1
Listener<Bitmap> imageListener = new Listener<Bitmap>() {
@Override
public void onResponse(Bitmap response) {
//This call back method is executed in the UI-Thread, when the loading is finished
imageView.setImageBitmap(response); //example
}
};
Response.ErrorListener errorListener = new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
//log your error
}
};
//url, ListenerOnFinish, width, height, errorListener
ImageRequest getImageRequest = new ImageRequest(url, imageListener, 0, 0, null,errorListener);
requestQueue.add(getImageRequest);
#6
0
Another approach (similar to the code from @Simulant above) is to use use a regular ImageView in your xml and then make the image request using Volley.ImageRequest. If you use the Singleton pattern that is recommended by Google it would look something like this:
另一种方法(类似于上面@Simulant的代码)是使用xml中的常规ImageView,然后使用Volley.ImageRequest创建图像请求。如果您使用Google推荐的Singleton模式,它将如下所示:
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);
By the way: Make sure that you use a regular ImageView instead of the NetworkImageView or the image will not show properly.
顺便说一下:确保使用常规ImageView而不是NetworkImageView,否则图像将无法正常显示。
#7
0
Step 1: Declare imageLoader, (i have a MySocialMediaSingleton class for manage the Volley Request)
第1步:声明imageLoader,(我有一个MySocialMediaSingleton类来管理Volley请求)
ImageLoader imageLoader = MySocialMediaSingleton.getInstance(context).getImageLoader();
Step 2: use the callback for imageLoader
第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
}
}
});
Step 3: Show the response in you imageView or NetworkImageView
第3步:在imageView或NetworkImageView中显示响应
holder.image.setImageUrl(ImageCacheManager.getInstance().getImageLoader(), imageLoader);
#1
18
You can use this View instead of Google's View (I've copied sources from it and made some changes):
您可以使用此视图而不是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();
}
}
Usage example :
用法示例:
//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());
#2
7
I did it this way:-
我是这样做的: -
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) {
}
});
#3
6
We used something like this:
我们用过这样的东西:
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();
}
}
});
It's not necessarily the most beautiful piece of code but it works (tm)
它不一定是最美丽的代码片段,但它有效(tm)
#4
2
Yet another approach, that relies on knowing the internals of NetworkImageView, is to subclass NetworkImageView to watch for the mErrorImageId getting applied.
另一种依赖于了解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);
}
}
You'll also have to replace NetworkImageView with ManagedNetworkImageView in your layout files.
您还必须在布局文件中用ManagedNetworkImageView替换NetworkImageView。
It's a bit hacky, but does the job when NetworkImageView is already your chosen solution.
它有点hacky,但是当NetworkImageView已经是您选择的解决方案时,它的工作就完成了。
#5
1
Listener<Bitmap> imageListener = new Listener<Bitmap>() {
@Override
public void onResponse(Bitmap response) {
//This call back method is executed in the UI-Thread, when the loading is finished
imageView.setImageBitmap(response); //example
}
};
Response.ErrorListener errorListener = new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
//log your error
}
};
//url, ListenerOnFinish, width, height, errorListener
ImageRequest getImageRequest = new ImageRequest(url, imageListener, 0, 0, null,errorListener);
requestQueue.add(getImageRequest);
#6
0
Another approach (similar to the code from @Simulant above) is to use use a regular ImageView in your xml and then make the image request using Volley.ImageRequest. If you use the Singleton pattern that is recommended by Google it would look something like this:
另一种方法(类似于上面@Simulant的代码)是使用xml中的常规ImageView,然后使用Volley.ImageRequest创建图像请求。如果您使用Google推荐的Singleton模式,它将如下所示:
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);
By the way: Make sure that you use a regular ImageView instead of the NetworkImageView or the image will not show properly.
顺便说一下:确保使用常规ImageView而不是NetworkImageView,否则图像将无法正常显示。
#7
0
Step 1: Declare imageLoader, (i have a MySocialMediaSingleton class for manage the Volley Request)
第1步:声明imageLoader,(我有一个MySocialMediaSingleton类来管理Volley请求)
ImageLoader imageLoader = MySocialMediaSingleton.getInstance(context).getImageLoader();
Step 2: use the callback for imageLoader
第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
}
}
});
Step 3: Show the response in you imageView or NetworkImageView
第3步:在imageView或NetworkImageView中显示响应
holder.image.setImageUrl(ImageCacheManager.getInstance().getImageLoader(), imageLoader);