ListView異步加載圖片，完美實現圖文混排

昨天參加一個面試，面試官讓當場寫一個相似於新聞列表的頁面，文本數據和圖片都從網絡上獲取，想起我還沒寫過ListView異步加載圖片並實現圖文混排效果的文章，so，今天就來寫一下，介紹一下經驗。

ListView加載文本數據都是很簡單的，即便是異步獲取文本數據。可是異步加載圖片就稍微有一點麻煩，既要得到一個比較好的用戶體驗，還要防止出現圖片錯位等各類不良BUG，其實要考慮的東西仍是挺多的。好了，咱們先來看一下咱們今天要實現的一個效果圖：

看起來彷佛並不難，確實，咱們今天的核心問題只有一個，就是怎麼異步加載圖片，而且沒有違和感。

好了，廢話很少說，先來看主佈局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.listview.MainActivity" >

    <ListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </ListView>

</RelativeLayout>

主佈局中就一個listview，看看listview的item佈局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="100dp" >

    <ImageView
        android:id="@+id/iv"
        android:layout_width="80dp"
        android:layout_height="90dp"
        android:layout_centerVertical="true"
        android:padding="5dp"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_toRightOf="@id/iv"
        android:gravity="center_vertical"
        android:text="人社部：養老轉移已有初稿"
        android:textSize="14sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/summary"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/title"
        android:layout_marginTop="8dp"
        android:layout_toRightOf="@id/iv"
        android:text="人社部：養老轉移已有初稿"
        android:textSize="12sp" />

</RelativeLayout>

這個佈局和咱們上圖描述的同樣，左邊一個ImageView，右邊是兩個TextView，這些都不難，咱們看看MainActivity：

public class MainActivity extends Activity {

	private ListView lv;
	private List<News> list;
	private String HTTPURL = "http://litchiapi.jstv.com/api/GetFeeds?column=3&PageSize=20&pageIndex=1&val=100511D3BE5301280E0992C73A9DEC41";
	private Handler mHandler = new Handler(){

		@Override
		public void handleMessage(Message msg) {
			super.handleMessage(msg);
			switch (msg.what) {
			case 0:
				MyAdaper adapter = new MyAdaper(list);
				lv.setAdapter(adapter);
				break;

			default:
				break;
			}
		}
		
	};

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		lv = (ListView) this.findViewById(R.id.lv);
		initData();
	}

	private void initData() {
		list = new ArrayList<News>();

		OkHttpClient client = new OkHttpClient();
		Request request = new Request.Builder().url(HTTPURL).build();
		Call call = client.newCall(request);
		call.enqueue(new Callback() {

			@Override
			public void onResponse(Response response) throws IOException {
				try {
					JSONObject jo1 = new JSONObject(response.body().string());
					JSONObject jo2 = jo1.getJSONObject("paramz");
					JSONArray ja = jo2.getJSONArray("feeds");
					News news = null;
					for (int i = 0; i < ja.length(); i++) {
						JSONObject data = ja.getJSONObject(i).getJSONObject(
								"data");
						String imageUrl = "http://litchiapi.jstv.com"
								+ data.getString("cover");
						String title = data.getString("subject");
						String summary = data.getString("summary");
						news = new News(imageUrl, title, summary);
						list.add(news);
					}
				} catch (JSONException e) {
					e.printStackTrace();
				}
				mHandler.obtainMessage(0).sendToTarget();
			}

			@Override
			public void onFailure(Request arg0, IOException arg1) {

			}
		});
	}
}

在onCreate方法中，咱們先拿到一個ListView的實例，而後就是初始化數據，這裏初始化數據咱們使用了OKHttp，關於OKHttp的使用能夠查看我以前的文章 OKHttp的簡單使用，咱們拿到一串json數據，至於json裏邊的結構是怎麼樣的，我就很少說了，你們能夠直接在瀏覽器中打開上面的地址，這樣就能看到json數據了，咱們把咱們須要的數據封裝成一個JavaBean，其中ImageView咱們先存儲一個url地址，而後在Adapter中經過這個url地址異步加載圖片。json解析就很少說了，咱們瞅一眼這個Bean：

public class News {

	private String imageUrl;
	private String title;
	private String summary;

	public String getImageUrl() {
		return imageUrl;
	}

	public void setImageUrl(String imageUrl) {
		this.imageUrl = imageUrl;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public String getSummary() {
		return summary;
	}

	public void setSummary(String summary) {
		this.summary = summary;
	}

	public News(String imageUrl, String title, String summary) {
		this.imageUrl = imageUrl;
		this.title = title;
		this.summary = summary;
	}

	public News() {
	}
}

好了，到這裏，全部的東西都仍是基本用法，下面咱們先不急着看Adapter，先來看看Google給咱們提供的一個緩存機制，在android-support-v4.jar包中，Google提供了這樣一個類LruCache，這個LruCache的使用和Java中的Map用法差很少，甚至你就能夠把它看成Map來使用，不一樣的是LruCache中的Value能夠是一張圖片。若是咱們緩存的圖片太多，超出了咱們設置的緩存大小，那麼系統會自動移除咱們在最近使用比較少的圖片。好了，咱們來看看LruCache的定義：

private LruCache<String, BitmapDrawable> mImageCache;

每一個圖片的緩存的key咱們就使用該圖片的url(這個是惟一的)，value就是一張咱們要緩存的圖片，在實例化LruCache的時候，咱們須要傳入一個參數，代表咱們可使用的最大緩存，這個緩存參數咱們傳入可用緩存的1/8，同時咱們須要重寫sizeOf方法，查看源碼咱們能夠知道，若是不重寫sizeOf方法，它默認返回的是圖片的數量，可是咱們其實是須要計算圖片大小來判斷當前已經使用的緩存是否已經超出界限，因此咱們這裏重寫sizeOf方法，返回每張圖片的大小。代碼以下：

		int maxCache = (int) Runtime.getRuntime().maxMemory();
		int cacheSize = maxCache / 8;
		mImageCache = new LruCache<String, BitmapDrawable>(cacheSize) {
			@Override
			protected int sizeOf(String key, BitmapDrawable value) {
				return value.getBitmap().getByteCount();
			}
		};

從LruCache中讀取一張圖片的方式和從Map中取值是同樣的：

mImageCache.get(key)

向LruCache中存儲一張圖片：

mImageCache.put(key, bitmapDrawable);

關於LruCache的基本用法就說這些，這已經夠咱們後面使用了，如今我就大概說說咱們的一個思路，當咱們要給ImageView設置圖片的時候，就先在本地緩存中查看是否有該圖片，有的話，直接從本地讀取，沒有的話就從網絡請求，同時，在從網絡請求圖片的時候，爲了防止發生圖片錯位的狀況，咱們要給每個item的每個ImageView設置一個tag，這個tag就使用該ImageView要加載的圖片的url（這樣就能夠確保每個ImageView惟一），在給ImageView設置圖片的時候咱們就能夠經過這個tag找到咱們須要的ImageView，這樣能夠有效避免圖片錯位的問題。好了，看代碼：

public class MyAdaper extends BaseAdapter {

	private List<News> list;
	private ListView listview;
	private LruCache<String, BitmapDrawable> mImageCache;

	public MyAdaper(List<News> list) {
		super();
		this.list = list;

		int maxCache = (int) Runtime.getRuntime().maxMemory();
		int cacheSize = maxCache / 8;
		mImageCache = new LruCache<String, BitmapDrawable>(cacheSize) {
			@Override
			protected int sizeOf(String key, BitmapDrawable value) {
				return value.getBitmap().getByteCount();
			}
		};

	}

	@Override
	public int getCount() {
		return list.size();
	}

	@Override
	public Object getItem(int position) {
		return list.get(position);
	}

	@Override
	public long getItemId(int position) {
		return position;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		if (listview == null) {
			listview = (ListView) parent;
		}
		ViewHolder holder = null;
		if (convertView == null) {
			convertView = LayoutInflater.from(parent.getContext()).inflate(
					R.layout.listview_item, null);
			holder = new ViewHolder();
			holder.iv = (ImageView) convertView.findViewById(R.id.iv);
			holder.title = (TextView) convertView.findViewById(R.id.title);
			holder.summary = (TextView) convertView.findViewById(R.id.summary);
			convertView.setTag(holder);
		} else {
			holder = (ViewHolder) convertView.getTag();
		}
		News news = list.get(position);
		holder.title.setText(news.getTitle());
		holder.summary.setText(news.getSummary());
		holder.iv.setTag(news.getImageUrl());
		// 若是本地已有緩存，就從本地讀取，不然從網絡請求數據
		if (mImageCache.get(news.getImageUrl()) != null) {
			holder.iv.setImageDrawable(mImageCache.get(news.getImageUrl()));
		} else {
			ImageTask it = new ImageTask();
			it.execute(news.getImageUrl());
		}
		return convertView;
	}

	class ViewHolder {
		ImageView iv;
		TextView title, summary;
	}

	class ImageTask extends AsyncTask<String, Void, BitmapDrawable> {

		private String imageUrl;

		@Override
		protected BitmapDrawable doInBackground(String... params) {
			imageUrl = params[0];
			Bitmap bitmap = downloadImage();
			BitmapDrawable db = new BitmapDrawable(listview.getResources(),
					bitmap);
			// 若是本地還沒緩存該圖片，就緩存
			if (mImageCache.get(imageUrl) == null) {
				mImageCache.put(imageUrl, db);
			}
			return db;
		}

		@Override
		protected void onPostExecute(BitmapDrawable result) {
			// 經過Tag找到咱們須要的ImageView，若是該ImageView所在的item已被移出頁面，就會直接返回null
			ImageView iv = (ImageView) listview.findViewWithTag(imageUrl);
			if (iv != null && result != null) {
				iv.setImageDrawable(result);
			}
		}

		/**
		 * 根據url從網絡上下載圖片
		 * 
		 * @return
		 */
		private Bitmap downloadImage() {
			HttpURLConnection con = null;
			Bitmap bitmap = 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 (MalformedURLException e) {
				e.printStackTrace();
			} catch (IOException e) {
				e.printStackTrace();
			} finally {
				if (con != null) {
					con.disconnect();
				}
			}

			return bitmap;
		}

	}

}

好了，listview圖文混排就說到這裏，有問題歡迎留言討論。

Demo下載https://github.com/lenve/listview_PicText