搜芽的移动开发这几天进度相对来说非常的快。但是美中不足的就是网络图片的加载问题。我有两套方案：
1）沿用迅雷动漫的图片加载。迅雷动漫也是用的一个开源的库。但是不知道是我使用出了问题还是真的是它的问题。在我迅速的下拉和回倒的时候，
不确定的会出现崩溃。logcat显示loadImage里面出现了内存溢出.out of memory.。这个我想应该不是我的问题。
2）采用外包的AsyncImageLoader。这个文件我没有仔细看。然后实验结果是，加载图片巨慢。而且容易导致卡顿。
所以，我将希望转向了universal-image-loader和volley。
听说volley还封装了异步http。而且是google公司的，所以，我选择了volley
一篇值得赞赏的文章是：http://blog.youkuaiyun.com/sun1021976312/article/details/24672707
说真的。本文的理论部分，也是转自它。我们在后面进行封装，然后使用然后展示效果。
Volley是将AsyncHttpClient和Universal-Image-Loader的优点集成于一身的一个框架。我们都知道，Universal-Image-Loader具备非常强大的加载网络图片的功能，而使用Volley，我们也可以实现基本类似的效果，并且在性能上也豪不逊色于Universal-Image-Loader，下面我们就来具体学习一下吧。
1. ImageRequest的用法
前面我们已经学习过了StringRequest和JsonRequest的用法，并且总结出了它们的用法都是非常类似的，基本就是进行以下三步操作即可：
1. 创建一个RequestQueue对象。
2. 创建一个Request对象。
3. 将Request对象添加到RequestQueue里面。
其中，StringRequest和JsonRequest都是继承自Request的，所以它们的用法才会如此类似。那么不用多说，今天我们要学习的ImageRequest，相信你从名字上就已经猜出来了，它也是继承自Request的，因此它的用法也是基本相同的，首先需要获取到一个RequestQueue对象，可以调用如下方法获取到：
- RequestQueue mQueue = Volley.newRequestQueue(context);
- ImageRequest imageRequest = new ImageRequest(
- "http://developer.android.com/images/home/aw_dac.png",
- new Response.Listener<Bitmap>() {
- @Override
- public void onResponse(Bitmap response) {
- imageView.setImageBitmap(response);
- }
- }, 0, 0, Config.RGB_565, new Response.ErrorListener() {
- @Override
- public void onErrorResponse(VolleyError error) {
- imageView.setImageResource(R.drawable.default_image);
- }
- });
最后将这个ImageRequest对象添加到RequestQueue里就可以了，如下所示：
- mQueue.add(imageRequest);
2. ImageLoader的用法
如果你觉得ImageRequest已经非常好用了，那我只能说你太容易满足了 ^_^。实际上，Volley在请求网络图片方面可以做到的还远远不止这些，而ImageLoader就是一个很好的例子。ImageLoader也可以用于加载网络上的图片，并且它的内部也是使用ImageRequest来实现的，不过ImageLoader明显要比ImageRequest更加高效，因为它不仅可以帮我们对图片进行缓存，还可以过滤掉重复的链接，避免重复发送请求。
由于ImageLoader已经不是继承自Request的了，所以它的用法也和我们之前学到的内容有所不同，总结起来大致可以分为以下四步：
1. 创建一个RequestQueue对象。
2. 创建一个ImageLoader对象。
3. 获取一个ImageListener对象。
4. 调用ImageLoader的get()方法加载网络上的图片。
下面我们就来按照这个步骤，学习一下ImageLoader的用法吧。首先第一步的创建RequestQueue对象我们已经写过很多遍了，相信已经不用再重复介绍了，那么就从第二步开始学习吧，新建一个ImageLoader对象，代码如下所示：
- ImageLoader imageLoader = new ImageLoader(mQueue, new ImageCache() {
- @Override
- public void putBitmap(String url, Bitmap bitmap) {
- }
- @Override
- public Bitmap getBitmap(String url) {
- return null;
- }
- });
接下来需要获取一个ImageListener对象，代码如下所示：
- ImageListener listener = ImageLoader.getImageListener(imageView,
- R.drawable.default_image, R.drawable.failed_image);
最后，调用ImageLoader的get()方法来加载图片，代码如下所示：
- imageLoader.get("https://img-my.youkuaiyun.com/uploads/201404/13/1397393290_5765.jpeg", listener);
get()方法接收两个参数，第一个参数就是图片的URL地址，第二个参数则是刚刚获取到的ImageListener对象。当然，如果你想对图片的大小进行限制，也可以使用get()方法的重载，指定图片允许的最大宽度和高度，如下所示：
- imageLoader.get("https://img-my.youkuaiyun.com/uploads/201404/13/1397393290_5765.jpeg",
- listener, 200, 200);
现在运行一下程序并开始加载图片，你将看到ImageView中会先显示一张默认的图片，等到网络上的图片加载完成后，ImageView则会自动显示该图，效果如下图所示。
虽然现在我们已经掌握了ImageLoader的用法，但是刚才介绍的ImageLoader的优点却还没有使用到。为什么呢？因为这里创建的ImageCache对象是一个空的实现，完全没能起到图片缓存的作用。其实写一个ImageCache也非常简单，但是如果想要写一个性能非常好的ImageCache，最好就要借助Android提供的LruCache功能了，如果你对LruCache还不了解，可以参考我之前的一篇博客Android高效加载大图、多图解决方案，有效避免程序OOM。
这里我们新建一个BitmapCache并实现了ImageCache接口，如下所示：
- public class BitmapCache implements ImageCache {
- private LruCache<String, Bitmap> mCache;
- public BitmapCache() {
- int maxSize = 10 * 1024 * 1024;
- mCache = new LruCache<String, Bitmap>(maxSize) {
- @Override
- protected int sizeOf(String key, Bitmap bitmap) {
- return bitmap.getRowBytes() * bitmap.getHeight();
- }
- };
- }
- @Override
- public Bitmap getBitmap(String url) {
- return mCache.get(url);
- }
- @Override
- public void putBitmap(String url, Bitmap bitmap) {
- mCache.put(url, bitmap);
- }
- }
- ImageLoader imageLoader = new ImageLoader(mQueue, new BitmapCache());
3. NetworkImageView的用法
除了以上两种方式之外，Volley还提供了第三种方式来加载网络图片，即使用NetworkImageView。不同于以上两种方式，NetworkImageView是一个自定义控制，它是继承自ImageView的，具备ImageView控件的所有功能，并且在原生的基础之上加入了加载网络图片的功能。NetworkImageView控件的用法要比前两种方式更加简单，大致可以分为以下五步：
1. 创建一个RequestQueue对象。
2. 创建一个ImageLoader对象。
3. 在布局文件中添加一个NetworkImageView控件。4. 在代码中获取该控件的实例。
5. 设置要加载的图片地址。
其中，第一第二步和ImageLoader的用法是完全一样的，因此这里我们就从第三步开始学习了。首先修改布局文件中的代码，在里面加入NetworkImageView控件，如下所示：
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical" >
- <Button
- android:id="@+id/button"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="Send Request" />
- <com.android.volley.toolbox.NetworkImageView
- android:id="@+id/network_image_view"
- android:layout_width="200dp"
- android:layout_height="200dp"
- android:layout_gravity="center_horizontal"
- />
- </LinearLayout>
- networkImageView = (NetworkImageView) findViewById(R.id.network_image_view);
- networkImageView.setDefaultImageResId(R.drawable.default_image);
- networkImageView.setErrorImageResId(R.drawable.failed_image);
- networkImageView.setImageUrl("https://img-my.youkuaiyun.com/uploads/201404/13/1397393290_5765.jpeg",
- imageLoader);
好了，就是这么简单，现在重新运行一下程序，你将看到和使用ImageLoader来加载图片一模一样的效果，这里我就不再截图了。
这时有的朋友可能就会问了，使用ImageRequest和ImageLoader这两种方式来加载网络图片，都可以传入一个最大宽度和高度的参数来对图片进行压缩，而NetworkImageView中则完全没有提供设置最大宽度和高度的方法，那么是不是使用NetworkImageView来加载的图片都不会进行压缩呢？
其实并不是这样的，NetworkImageView并不需要提供任何设置最大宽高的方法也能够对加载的图片进行压缩。这是由于NetworkImageView是一个控件，在加载图片的时候它会自动获取自身的宽高，然后对比网络图片的宽度，再决定是否需要对图片进行压缩。也就是说，压缩过程是在内部完全自动化的，并不需要我们关心，NetworkImageView会始终呈现给我们一张大小刚刚好的网络图片，不会多占用任何一点内存，这也是NetworkImageView最简单好用的一点吧。
当然了，如果你不想对图片进行压缩的话，其实也很简单，只需要在布局文件中把NetworkImageView的layout_width和layout_height都设置成wrap_content就可以了，这样NetworkImageView就会将该图片的原始大小展示出来，不会进行任何压缩。
实战：
首先我们要有布局用到NetworkImageView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/category_contaner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/xinfan_grid_bg" >
<RelativeLayout
android:id="@+id/category_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true" >
<com.android.volley.toolbox.NetworkImageView
android:id="@+id/poster"
android:layout_width="match_parent"
android:layout_height="@dimen/category_grid_item_height"
android:contentDescription="@string/app_name"
android:scaleType="centerCrop" />
<TextView
android:id="@+id/tv_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/poster"
android:layout_centerHorizontal="true"
android:paddingBottom="@dimen/category_item_label_lr_margin"
android:paddingTop="@dimen/category_item_label_lr_margin"
android:textColor="#555555"
android:textSize="@dimen/category_item_label_font_size" />
</RelativeLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/category_frame"
android:layout_alignLeft="@id/category_frame"
android:layout_alignRight="@id/category_frame"
android:layout_alignTop="@id/category_frame"
android:background="@drawable/poster_nofade_selector"
android:contentDescription="@string/app_name" >
</ImageView>
<TextView
android:id="@+id/tv_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="全部"
android:textColor="@color/action_bar_title"
android:textSize="@dimen/category_center_font_size"
android:visibility="gone" />
</RelativeLayout> package com.souya.seller.util.ex;
import android.content.Context;
import android.graphics.Bitmap;
import android.support.v4.util.LruCache;
import com.android.volley.RequestQueue;
import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.ImageLoader.ImageCache;
import com.android.volley.toolbox.Volley;
import com.souya.seller.app.SellerApplication;
public class VolleyImage {
private static final String TAG = "Volley";
private static RequestQueue mReuestQueue;
private static ImageLoader mImageLoader;
private static Context mContext;
private static BitmapCache mBitmapCache;
static {
mContext = SellerApplication.getInstance();
mReuestQueue = Volley.newRequestQueue(mContext);
mBitmapCache = BitmapCache.getInstance();
mImageLoader = new ImageLoader(mReuestQueue, mBitmapCache);
}
// private static VolleyImage mInstance = null;
public VolleyImage() {
}
// public static VolleyImage getInstance(){
// return new VolleyImage();
// }
public static ImageLoader getImageLoader(){
return mImageLoader;
}
}
class BitmapCache implements ImageCache {
private LruCache<String, Bitmap> mCache;
public BitmapCache() {
int maxSize = 50 * 1024 * 1024;
mCache = new LruCache<String, Bitmap>(maxSize) {
@Override
protected int sizeOf(String key, Bitmap bitmap) {
return bitmap.getRowBytes() * bitmap.getHeight();
}
};
}
public static BitmapCache getInstance() {
return new BitmapCache();
}
@Override
public Bitmap getBitmap(String url) {
return mCache.get(url);
}
@Override
public void putBitmap(String url, Bitmap bitmap) {
mCache.put(url, bitmap);
}
}
最后是使用
holder.mPoster = (NetworkImageView) convertView.findViewById(R.id.poster); public void populateViews(MCloth cloth, ImageFetcher fetcher) {
mLabel.setVisibility(View.VISIBLE);
mLabel.setText(cloth.title);
mCenterView.setVisibility(View.INVISIBLE);
if (!TextUtils.isEmpty(cloth.imgUrl)) {
//fetcher.loadImage(SOUYA_SERVER_URL + cloth.imgUrl, mPoster);
mPoster.setImageUrl(WEBInterface.GetFullUrl(cloth.imgUrl), VolleyImage.getImageLoader());
}
}效果：
非常的流畅，没有卡顿。加载速度很快。
贴图
1004
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
