ListView图片错乱

转自郭霖

错乱的原因

那么这里我们就可以思考一下了，目前数据源当中大概有60个图片的URL地址，而根据ListView的工作原理，显然不可能为每张图片都单独分配一个ImageView控件，ImageView控件的个数其实就比一屏能显示的图片数量稍微多一点而已，移出屏幕的ImageView控件会进入到RecycleBin当中，而新进入屏幕的元素则会从RecycleBin中获取ImageView控件。

那么，每当有新的元素进入界面时就会回调getView()方法，而在getView()方法中会开启异步请求从网络上获取图片，注意网络操作都是比较耗时的，也就是说当我们快速滑动ListView的时候就很有可能出现这样一种情况，某一个位置上的元素进入屏幕后开始从网络上请求图片，但是还没等图片下载完成，它就又被移出了屏幕。这种情况下会产生什么样的现象呢？根据ListView的工作原理，被移出屏幕的控件将会很快被新进入屏幕的元素重新利用起来，而如果在这个时候刚好前面发起的图片请求有了响应，就会将刚才位置上的图片显示到当前位置上，因为虽然它们位置不同，但都是共用的同一个ImageView实例，这样就出现了图片乱序的情况。

但是还没完，新进入屏幕的元素它也会发起一条网络请求来获取当前位置的图片，等到图片下载完的时候会设置到同样的ImageView上面，因此就会出现先显示一张图片，然后又变成了另外一张图片的情况，那么刚才我们看到的图片会自动变来变去的情况也就得到了解释。

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <ListView        android:id="@+id/list_view"        android:layout_width="match_parent"        android:layout_height="match_parent" >    </ListView></LinearLayout>

image_item.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <ImageView        android:id="@+id/image"        android:layout_width="match_parent"        android:layout_height="120dp"        android:src="@drawable/ic_launcher"         android:scaleType="fitXY"/></LinearLayout>

MainActivity

package com.example.listviewyouhua;import android.app.Activity;import android.os.Bundle;import android.widget.ListView;public class MainActivity extends Activity {private ListView listView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);listView = (ListView) findViewById(R.id.list_view);ImageAdapter adapter = new ImageAdapter(this, 0, Images.imageUrls);listView.setAdapter(adapter);}}

ImageAdapter

package com.example.listviewyouhua;import java.net.HttpURLConnection;import java.net.URL;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.drawable.BitmapDrawable;import android.os.AsyncTask;import android.support.v4.util.LruCache;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ArrayAdapter;import android.widget.ImageView;public class ImageAdapter extends ArrayAdapter<String> {/** * 图片缓存技术的核心类，用于缓存所有下载好的图片，在程序内存达到设定值时会将最少最近使用的图片移除掉。 */private LruCache<String, BitmapDrawable> mMemoryCache;/** * 构造方法：获取图片缓存的大小内存 *  * @param context * @param resource * @param objects */public ImageAdapter(Context context, int resource, String[] objects) {super(context, resource, objects);// 获取应用程序最大可用内存int maxMemory = (int) Runtime.getRuntime().maxMemory();int cacheSize = maxMemory / 8;mMemoryCache = new LruCache<String, BitmapDrawable>(cacheSize) {@Overrideprotected int sizeOf(String key, BitmapDrawable drawable) {return drawable.getBitmap().getByteCount();}};}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {String url = getItem(position);View view;if (convertView == null) {view = LayoutInflater.from(getContext()).inflate(R.layout.image_item, null);} else {view = convertView;}ImageView image = (ImageView) view.findViewById(R.id.image);BitmapDrawable drawable = getBitmapFromMemoryCache(url);if (drawable != null) {image.setImageDrawable(drawable);} else {BitmapWorkerTask task = new BitmapWorkerTask(image);task.execute(url);}return view;}/** * 将一张图片存储到LruCache中。 *  * @param key *            LruCache的键，这里传入图片的URL地址。 * @param drawable *            LruCache的值，这里传入从网络上下载的BitmapDrawable对象。 */public void addBitmapToMemoryCache(String key, BitmapDrawable drawable) {if (getBitmapFromMemoryCache(key) == null) {mMemoryCache.put(key, drawable);}}/** * 从LruCache中获取一张图片，如果不存在就返回null。 *  * @param key *            LruCache的键，这里传入图片的URL地址。 * @return 对应传入键的BitmapDrawable对象，或者null。 */public BitmapDrawable getBitmapFromMemoryCache(String key) {return mMemoryCache.get(key);}/** * 异步下载图片的任务。 *  * @author guolin */class BitmapWorkerTask extends AsyncTask<String, Void, BitmapDrawable> {private ImageView mImageView;public BitmapWorkerTask(ImageView imageView) {mImageView = imageView;}@Overrideprotected BitmapDrawable doInBackground(String... params) {String imageUrl = params[0];// 在后台开始下载图片Bitmap bitmap = downloadBitmap(imageUrl);BitmapDrawable drawable = new BitmapDrawable(getContext().getResources(), bitmap);/***将一张图片存储到LruCache中。*/addBitmapToMemoryCache(imageUrl, drawable);return drawable;}/** * 下载图片完毕后，填充到控件中即可 */@Overrideprotected void onPostExecute(BitmapDrawable drawable) {if (mImageView != null && drawable != null) {mImageView.setImageDrawable(drawable);}}/** * 建立HTTP请求，并获取Bitmap对象。 *  * @param imageUrl *            图片的URL地址 * @return 解析后的Bitmap对象 */private Bitmap downloadBitmap(String imageUrl) {Bitmap bitmap = null;HttpURLConnection con = null;try {URL url = new URL(imageUrl);con = (HttpURLConnection) url.openConnection();con.setConnectTimeout(5 * 1000);con.setReadTimeout(10 * 1000);bitmap = BitmapFactory.decodeStream(con.getInputStream());} catch (Exception e) {e.printStackTrace();} finally {if (con != null) {con.disconnect();}}return bitmap;}}}

Images

package com.example.listviewyouhua;public class Images {    public final static String[] imageUrls = new String[] {    "http://img.my.csdn.net/uploads/201508/05/1438760758_3497.jpg",          "http://img.my.csdn.net/uploads/201508/05/1438760758_6667.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760757_3588.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760756_3304.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760755_6715.jpeg",        "http://img.my.csdn.net/uploads/201508/05/1438760726_5120.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760726_8364.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760725_4031.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760724_9463.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760724_2371.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760707_4653.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760706_6864.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760706_9279.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760704_2341.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760704_5707.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760685_5091.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760685_4444.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760684_8827.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760683_3691.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760683_7315.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760663_7318.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760662_3454.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760662_5113.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760661_3305.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760661_7416.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760589_2946.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760589_1100.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760588_8297.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760587_2575.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760587_8906.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760550_2875.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760550_9517.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760549_7093.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760549_1352.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760548_2780.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760531_1776.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760531_1380.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760530_4944.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760530_5750.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760529_3289.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760500_7871.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760500_6063.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760499_6304.jpeg",        "http://img.my.csdn.net/uploads/201508/05/1438760499_5081.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760498_7007.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760478_3128.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760478_6766.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760477_1358.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760477_3540.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760476_1240.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760446_7993.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760446_3641.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760445_3283.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760444_8623.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760444_6822.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760422_2224.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760421_2824.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760420_2660.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760420_7188.jpg",        "http://img.my.csdn.net/uploads/201508/05/1438760419_4123.jpg",    };}