Android 使用Jsoup解析html+下载图片

       最近想鼓捣一下CSDN客户端，这篇博客主要介绍如何使用Jsoup解析html页面通过标签获取所需内容，并下载指定图片资源。

一、导入Jsoup JAR包

       JAR包下载地址：jsoup 1.6.1

注意导入包到项目时，直接将解压后的jar文件全部复制到libs文件目录下即可，否则运行时会报错。

二、下载html页面并解析

代码：

package com.example.testcsdn;

import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.ArrayList;

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

import android.util.Log;

/**
 * 通过给定链接地址，解析获取的html资源，返回封装好的ArrayList<Blog>对象
 */
public class BlogsFetchr {

	private static final String TAG = "BlogsFetchr";

	/**
	 * 下载URL指定的资源
	 * 
	 * @return 返回为类型byte[]
	 * */
	public byte[] getUrlBytes(String urlSpec) throws IOException {

		URL url = new URL(urlSpec);
		HttpURLConnection conn = (HttpURLConnection) url.openConnection();
		// 这里强制转换，是因为下面要用到HttpURLConnection.getInputStream
		try {
			ByteArrayOutputStream out = new ByteArrayOutputStream();
			InputStream in = conn.getInputStream();
			if (conn.getResponseCode() != HttpURLConnection.HTTP_OK) {
				// 连接不成功
				Log.i(TAG, "连接不成功");
				return null;
			}

			byte[] buffer = new byte[1024];
			int len = 0;
			while ((len = in.read(buffer)) > 0) {
				out.write(buffer, 0, len);
			}
			out.close();
			return out.toByteArray();
		} finally {
			conn.disconnect();
		}

	}

	/**
	 * 下载URL指定的资源(即将getUrlBytes方法的返回值byte[]转换成String类型)
	 * 
	 * @return 返回类型为String
	 */
	private String getUrl(String urlSpec) {
		String result = null;
		try {
			result = new String(getUrlBytes(urlSpec));
		} catch (IOException e) {
			e.printStackTrace();
		}
		return result;
	}

	public ArrayList<Blog> downloadBlogItems(String urlSpec) {
		ArrayList<Blog> blogs = new ArrayList<>();
		String htmlString = getUrl(urlSpec);
		// 解析htmlString
		parserItems(blogs, htmlString);
		return blogs;
	}

	private void parserItems(ArrayList<Blog> blogs, String htmlString) {

		Document doc = Jsoup.parse(htmlString);
		Elements units = doc.getElementsByClass("blog_list");
		for (int i = 0; i < units.size(); i++) {
			Blog blog = new Blog();
			Element unit_ele = units.get(i);

			Element dl_ele = unit_ele.getElementsByTag("dl").get(0);

			Element dl_dt_ele = dl_ele.getElementsByTag("dt").get(0);
			Element dt_a_ele = dl_dt_ele.child(0);
			String iconUrl = dt_a_ele.child(0).attr("src"); // 博主头像链接
			Log.i(TAG, "文章" + i + "的博主头像链接：" + iconUrl);

			Elements fls = unit_ele.getElementsByClass("fl");
			Element fl_ele = fls.get(0);
			Element fl_a1_ele = fl_ele.child(0);
			String bloggerId = fl_a1_ele.text(); // 博主Id
			Log.i(TAG, "文章" + i + "的作者：" + bloggerId);
			
			blog.setBloggerIconUrl(iconUrl);
			blog.setBloggerId(bloggerId);
			blogs.add(blog);
		}
	}

}

如代码所示，使用Jsoup解析html十分简单。

可以使用浏览器，右键审查元素，得到下图所示的工具框，可以很快的找到页面中元素所对应的标签，再使用Jsoup API获取标签的值。

三、下载指定图片

       如果想要下载博客列表中子项，博主的头像。可以先通过解析html获取图片的url，然后再使用HttpURLConnection直接下载。

       下面创建一个ThumbnailDownloader<Token>类，继承HandlerThread，用于等待并处理图片下载请求，同时更新UI：

 package com.example.testcsdn;

import java.io.IOException;
import java.util.Collections;
import java.util.HashMap;
import java.util.Map;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Handler;
import android.os.HandlerThread;
import android.os.Message;
import android.support.v4.util.LruCache;
import android.widget.ImageView;

public class ThumbnailDownloader<Token> extends HandlerThread {
	// Token表示泛型，"类名<泛型>"以保证在类内可以使用Token，就像Token已经是定义好的类一样

	private static final String TAG = "ThumbnailDownloader";
	private static final int MESSAGE_DOWNLOAD = 0;
	private Handler mHandler; // 发送下载图片的指令，和处理下载图片的指令的使者
	private Handler mResponseHandler; // 来自主线程的Handler,更新UI
	private Listener<Token> mListener;
	private Map<Token, String> requestMap = Collections
			.synchronizedMap(new HashMap<Token, String>());
	// 保存ImageView和URL的键值对，并是线程安全的
	private LruCache<String, Bitmap> mMemoryCache;

	// 缓存图片的类，当存储图片的大小大于LruCache设定的值，系统自动释放内存

	public ThumbnailDownloader(Handler handler) {
		super(TAG);
		mResponseHandler = handler;
		// 创建一个名为TAG的HandlerThread,是拥有自己Looper的独立线程
		// super(TAG) 相当于new HandlerThread(TAG)
		int maxMemory = (int) Runtime.getRuntime().maxMemory(); // 系统最大运行内存
		int mCacheSize = maxMemory / 8; // 分配给缓存的内存大小
		mMemoryCache = new LruCache<String, Bitmap>(mCacheSize) {
			// 必须重写此方法，来测量Bitmap的大小
			@Override
			protected int sizeOf(String key, Bitmap value) {
				return value.getRowBytes() * value.getHeight();
			}
		};

	}

	public interface Listener<Token> { // 回调方法，在主线程中实现
		void onThumbnailDownloaded(Token token, Bitmap thumbnail);
	}

	public void setListener(Listener<Token> listener) {
		mListener = listener;
	}

	@Override
	public void onLooperPrepared() {
		// 在此线程的Looper启动循环准备时段运行的方法
		mHandler = new Handler() { // 在当前线程新建的Handler,只会在当前线程运行
			@Override
			public void handleMessage(Message message) {
				// 处理发送过来的图片下载消息，下载图片并更新UI
				if (message.what == MESSAGE_DOWNLOAD) {
					Token token = (Token) message.obj;
					try {
						handleRequest(token);
						// 处理消息
					} catch (IOException e) {
						e.printStackTrace();
					}
				}

			}
		};
	}

	private void handleRequest(final Token token) throws IOException {

		final String url = requestMap.get(token);
		// 解决图片加载错位问题
		
		String key = (String) ((ImageView) token).getTag();
		if (url == null)
			return;
		// -----------------------------------
		byte[] bitmapBytes = new BlogsFetchr().getUrlBytes(url);
		// 下载图片
		final Bitmap bitmap = BitmapFactory.decodeByteArray(bitmapBytes, 0,
				bitmapBytes.length);

		mMemoryCache.put(key, bitmap); // 存入缓存

		mResponseHandler.post(new Runnable() {

			@Override
			public void run() {
				// 更新UI
				if (requestMap.get(token) != url)
					return;
				requestMap.remove(token);
				mListener.onThumbnailDownloaded(token, bitmap);// 更新UI
			}
		});

	}

	public void clearQueue() {
		mHandler.removeMessages(MESSAGE_DOWNLOAD);
		requestMap.clear();
	}

	public void queueThumbnail(Token token, String url) {
		// 将下载图片命令加入"ThumbnailDownloader"消息队列，
		// 在PhotoGalleryFragment中被调用

		requestMap.put(token, url);

		Message message = mHandler.obtainMessage(MESSAGE_DOWNLOAD, token);
		// 获取Message,并且自动与mHandler绑定在一起
		// 参数一: what，int型，用于描述消息
		// 参数二: obj，随消息发送的指定对象
		// 参数三: target，处理消息的Handler，这里由于使用自动和mHandler绑定，故缺省
		message.sendToTarget(); // 发送消息给目标Handler

	}

	public Bitmap getCacheImage(String key) {
		// 获取缓存中的图片
		Bitmap bitmap = mMemoryCache.get(key);
		return bitmap;
	}

}

MainActivity:

package com.example.testcsdn;

import java.util.ArrayList;

import android.app.Activity;
import android.graphics.Bitmap;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends Activity {
	private static final String TAG = "MainActivity";
	private ListView mListView;
	private ArrayList<Blog> mBlogs; // 博客列表
	private String testUrl = "http://blog.csdn.net/column.html"; // 访问的链接，这里测试的CSDN博客专栏的首页
	private BlogsFetchr fetchr; // 下载html页面和解析它的工具对象
	private MyAdapter adapter;
	private ThumbnailDownloader<ImageView> mThumbnailDownloader; // 图片下载器

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		fetchr = new BlogsFetchr();
		mBlogs = new ArrayList<Blog>();
		Log.i(TAG, "mBlogs.size:" + mBlogs.size());
		Blog blog = new Blog();
		blog.setBloggerId("hello");
		mBlogs.add(blog);

		update(testUrl);
		// 开启响应下载图片消息的线程
		mThumbnailDownloader = new ThumbnailDownloader<ImageView>(new Handler());
		mThumbnailDownloader
				.setListener(new ThumbnailDownloader.Listener<ImageView>() {
					@Override
					public void onThumbnailDownloaded(ImageView imageView,
							Bitmap thumbnail) {
						// 更新UI，上图
						imageView.setImageBitmap(thumbnail);
					}
				});
		mThumbnailDownloader.start();
		mThumbnailDownloader.getLooper(); // 必须要在start之后
	}

	private void update(final String testUrl) {
		new AsyncTask<Void, Void, Void>() {

			@Override
			protected Void doInBackground(Void... params) {
				mBlogs = fetchr.downloadBlogItems(testUrl); // 下载博客列表
				return null;
			};

			@Override
			protected void onPostExecute(Void result) {
				// 更新ListView
				mListView = (ListView) findViewById(R.id.listview_blogcolumn);
				adapter = new MyAdapter(mBlogs);
				mListView.setAdapter(adapter);
			}
		}.execute();

	}

	private class MyAdapter extends ArrayAdapter<Blog> {

		public MyAdapter(ArrayList<Blog> blogs) {
			super(MainActivity.this, 0, blogs);
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			if (convertView == null) {
				convertView = getLayoutInflater().inflate(
						R.layout.listview_item, null);
			}
			ImageView imageView = (ImageView) convertView
					.findViewById(R.id.imageView);
			TextView textView = (TextView) convertView
					.findViewById(R.id.textView);

			textView.setText(getItem(position).getBloggerId());
			String imageUrl = getItem(position).getBloggerIconUrl();
			String imageTag = imageUrl.replaceAll("[^\\w]", "");
			imageView.setTag(imageTag);
			// 去掉字符串中非（字母、数字、下划线）
			// 给imageView设置一个标签，用于存取于Cache
			Bitmap bitmap = null;
			if ((bitmap = mThumbnailDownloader.getCacheImage(imageTag)) != null) {
				// 如果在缓存中存在
				imageView.setImageBitmap(bitmap);
			} else {
				// 发送下载图片消息
				mThumbnailDownloader.queueThumbnail(imageView, imageUrl);
			}
			

			return convertView;
		}
	}
}

运行效果：

源码下载