Android应用开发-小巫程序员宅基地client之显示博文具体内容-程序员宅基地

Android应用开发-小巫程序员宅基地客户端之显示博文具体内容

上篇博文给大家介绍的是怎样嵌入有米广告而且获取收益，本篇博客打算讲讲关于怎样在一个ListView里显示博文的具体信息。这个可能是童鞋们比較困惑的，由于一篇博客可能有标题、摘要、图片、代码等等元素组成，我们要怎么在一个界面中显示这些内容而且依照自己的指定的方式显示呢，别急，以下会告诉大家。

   又一次整理一下一篇博文可能有以下元素：

• 标题
• 摘要
• 文本内容
• 图片
• 粗标题
• 代码块

在UI篇小巫已经介绍了，博文具体内容的主要控件就是一个ListView,每一个元素就是ListView中的一项item，每一项都有自己的布局用于显示特定的元素。效果图例如以下:

关于UI就不说了。主要来看一下内容适配器：

/BlogClient/src/com/xiaowu/blogclient/adapter/BlogDetailAdapter.java

package com.xiaowu.blogclient.adapter;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Bitmap;
import android.text.Html;
import android.text.SpannableStringBuilder;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
import com.nostra13.universalimageloader.core.assist.ImageScaleType;
import com.nostra13.universalimageloader.core.display.FadeInBitmapDisplayer;
import com.xiaowu.blogclient.R;
import com.xiaowu.blogclient.model.Blog;
import com.xiaowu.blogclient.util.Constants;
import com.xiaowu.blogclient.util.FileUtil;
import com.xiaowu.blogclient.util.MyTagHandler;

/**
 * 博客内容适配器
 * 
 * @author wwj_748
 * @date 2014/8/10
 */
public class BlogDetailAdapter extends BaseAdapter {
	private ViewHolder holder;
	private LayoutInflater layoutInflater;
	private Context context;
	private List<Blog> list;

	private SpannableStringBuilder htmlSpannable;
	private ImageLoader imageLoader = ImageLoader.getInstance();
	private DisplayImageOptions options;

	public BlogDetailAdapter(Context context) {
		super();
		this.context = context;
		layoutInflater = LayoutInflater.from(context);
		list = new ArrayList<Blog>();
		
		// 初始化imageLoader
		imageLoader.init(ImageLoaderConfiguration.createDefault(context));
		
		// imageloader配置
		options = new DisplayImageOptions.Builder()
				.showStubImage(R.drawable.images)
				.showImageForEmptyUri(R.drawable.images)
				.showImageOnFail(R.drawable.images).cacheInMemory()
				.cacheOnDisc().imageScaleType(ImageScaleType.EXACTLY)
				.bitmapConfig(Bitmap.Config.RGB_565)
				.displayer(new FadeInBitmapDisplayer(300)).build();

	}

	public void setList(List<Blog> list) {
		this.list = list;
	}

	public void addList(List<Blog> list) {
		this.list.addAll(list);
	}

	public void clearList() {
		this.list.clear();
	}

	public List<Blog> getList() {
		return list;
	}

	public void removeItem(int position) {
		if (list.size() > 0) {
			list.remove(position);
		}
	}

	@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) {
		Blog item = list.get(position);
		if (null == convertView) {
			holder = new ViewHolder();
			switch (item.getState()) {
			case Constants.DEF_BLOG_ITEM_TYPE.TITLE:// 显示标题
				convertView = layoutInflater.inflate(
						R.layout.article_detail_title_item, null);
				holder.content = (TextView) convertView.findViewById(R.id.text);
				break;
			case Constants.DEF_BLOG_ITEM_TYPE.SUMMARY: // 摘要
				convertView = layoutInflater.inflate(
						R.layout.article_detail_summary_item, null);
				holder.content = (TextView) convertView.findViewById(R.id.text);
				break;
			case Constants.DEF_BLOG_ITEM_TYPE.CONTENT: // 内容
				convertView = layoutInflater.inflate(
						R.layout.article_detail_item, null);
				holder.content = (TextView) convertView.findViewById(R.id.text);
				break;
			case Constants.DEF_BLOG_ITEM_TYPE.IMG: // 图片
				convertView = layoutInflater.inflate(
						R.layout.article_detail_img_item, null);
				holder.image = (ImageView) convertView
						.findViewById(R.id.imageView);
				break;
			case Constants.DEF_BLOG_ITEM_TYPE.BOLD_TITLE: // 加粗标题
				convertView = layoutInflater.inflate(
						R.layout.article_detail_bold_title_item, null);
				holder.content = (TextView) convertView.findViewById(R.id.text);
				break;
			case Constants.DEF_BLOG_ITEM_TYPE.CODE: // 代码
				convertView = layoutInflater.inflate(
						R.layout.article_detail_code_item, null);
				holder.code = (WebView) convertView
						.findViewById(R.id.code_view);
				// holder.code.getSettings().setUseWideViewPort(true);
				// holder.code.getSettings().setJavaScriptEnabled(true);
				// holder.code.getSettings().setSupportZoom(true);
				// holder.code.getSettings().setBuiltInZoomControls(false);
				// holder.code.getSettings().setLoadWithOverviewMode(true);
				break;
			}

			convertView.setTag(holder);
		} else {
			holder = (ViewHolder) convertView.getTag();
		}
		// System.out.println(item.getContent());

		if (null != item) {
			switch (item.getState()) {
			case Constants.DEF_BLOG_ITEM_TYPE.IMG: // 图片，异步载入
				imageLoader.displayImage(item.getContent(), holder.image,
						options);
				break;
			case Constants.DEF_BLOG_ITEM_TYPE.CODE: // 代码，格式显示

				// 读代替码文件和模板文件
				String code = item.getContent();
				// String code = FileUtil.getFileContent(context,
				// "AboutActivity.java");
				String template = FileUtil.getFileContent(context, "code.html");
				// 生成结果
				String html = template.replace("{
      {code}}", code);
				holder.code.getSettings().setDefaultTextEncodingName("utf-8");
				holder.code.getSettings().setSupportZoom(true);
				holder.code.getSettings().setBuiltInZoomControls(true);

				// holder.code.loadUrl("file:///android_asset/code.html");

				holder.code.loadDataWithBaseURL("file:///android_asset/", html,
						"text/html", "utf-8", null);

				break;
			default:
				holder.content.setText(Html.fromHtml(item.getContent(), null,
						new MyTagHandler()));
				break;
			}
		}
		return convertView;
	}

	@Override
	public int getViewTypeCount() {
		return 6;
	}

	@Override
	public int getItemViewType(int position) {
		switch (list.get(position).getState()) {
		case Constants.DEF_BLOG_ITEM_TYPE.TITLE:
			return 0;
		case Constants.DEF_BLOG_ITEM_TYPE.SUMMARY:
			return 1;
		case Constants.DEF_BLOG_ITEM_TYPE.CONTENT:
			return 2;
		case Constants.DEF_BLOG_ITEM_TYPE.IMG:
			return 3;
		case Constants.DEF_BLOG_ITEM_TYPE.BOLD_TITLE:
			return 4;
		case Constants.DEF_BLOG_ITEM_TYPE.CODE:
			return 5;
		}
		return 1;
	}

	@Override
	public boolean isEnabled(int position) {
		switch (list.get(position).getState()) {
		case Constants.DEF_BLOG_ITEM_TYPE.IMG:
			return true;
		default:
			return false;
		}
	}

	private class ViewHolder {
		TextView id;
		TextView date;
		TextView title;
		TextView content;
		ImageView image;
		WebView code;
	}
}

这里有一个ListView的优化策略，就是图片进行异步载入。小巫这里用到了优秀的开源项目universalimageloader。我们仅仅须要关联依赖项目，就能够在项目中使用它对网络图片进行异步载入，具体使用自己查看上面的代码实现。

/BlogClient/src/com/xiaowu/blogclient/BlogDetailActivity.java

package com.xiaowu.blogclient;

import me.maxwin.view.IXListViewLoadMore;
import me.maxwin.view.XListView;
import android.app.Activity;
import android.content.Intent;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.Toast;

import com.xiaowu.blogclient.adapter.BlogDetailAdapter;
import com.xiaowu.blogclient.util.Constants;
import com.xiaowu.blogclient.util.JsoupUtil;
import com.xiaowu.blogclient.util.HttpUtil;

/**
 * 博客具体内容界面
 * 
 * @author wwj_748
 * @date 2014/8/10
 */
public class BlogDetailActivity extends Activity implements IXListViewLoadMore {
	private XListView listView; // 列表控件
	private BlogDetailAdapter blogDetailAdapter; // 内容适配器

	private ProgressBar progressBar; // 进度条
	private ImageView reLoadImageView; // 又一次载入的图片

	private ImageView backBtn; // 回退button
	private ImageView commentBtn; // 评论button

	public static String url; // 博客地址
	private String filename; // 文件名称字

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		requestWindowFeature(Window.FEATURE_NO_TITLE);// 无标题
		super.onCreate(savedInstanceState);
		setContentView(R.layout.article_detail);

		init();
		initComponent();

		// 运行异步载入
		new MainTask().execute(url, Constants.DEF_TASK_TYPE.FIRST);
	}

	// 初始化
	private void init() {
		blogDetailAdapter = new BlogDetailAdapter(this);
		url = getIntent().getExtras().getString("blogLink");
		filename = url.substring(url.lastIndexOf("/") + 1);
		System.out.println("filename--->" + filename);
	}

	// 初始化组件
	private void initComponent() {
		progressBar = (ProgressBar) findViewById(R.id.blogContentPro);
		reLoadImageView = (ImageView) findViewById(R.id.reLoadImage);
		reLoadImageView.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View view) {
				reLoadImageView.setVisibility(View.INVISIBLE);
				progressBar.setVisibility(View.VISIBLE);

			}
		});

		backBtn = (ImageView) findViewById(R.id.backBtn);
		backBtn.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				finish();
			}
		});

		commentBtn = (ImageView) findViewById(R.id.comment);
		commentBtn.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View view) {
				Intent i = new Intent();
				i.setClass(BlogDetailActivity.this, BlogCommentActivity.class);
				i.putExtra("filename", filename);
				startActivity(i);
				overridePendingTransition(R.anim.push_left_in, R.anim.push_no);
			}
		});

		listView = (XListView) findViewById(R.id.listview);
		listView.setAdapter(blogDetailAdapter);
		listView.setPullLoadEnable(this);

		listView.setOnItemClickListener(new OnItemClickListener() {
			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				// 获取点击列表项的状态
				int state = blogDetailAdapter.getList().get(position - 1)
						.getState();
				switch (state) {
				case Constants.DEF_BLOG_ITEM_TYPE.IMG: // 点击的是图片
					String url = blogDetailAdapter.getList().get(position - 1)
							.getImgLink();
					Intent i = new Intent();
					i.setClass(BlogDetailActivity.this, ImageActivity.class);
					i.putExtra("url", url);
					startActivity(i);
					break;
				default:
					break;
				}
			}
		});
	}

	@Override
	public void finish() {
		super.finish();
	}

	private class MainTask extends AsyncTask<String, Void, Integer> {

		@Override
		protected Integer doInBackground(String... params) {
			// 通过http请求url地址，获取html文档
			String temp = HttpUtil.httpGet(params[0]);
			if (temp == null) {
				if (params[1].equals(Constants.DEF_TASK_TYPE.FIRST)) {
					return Constants.DEF_RESULT_CODE.FIRST;
				} else {
					return Constants.DEF_RESULT_CODE.ERROR;
				}
			}
			// 加入解析出来的数据
			blogDetailAdapter.addList(JsoupUtil.getContent(url, temp));
			if (params[1].equals(Constants.DEF_TASK_TYPE.FIRST)) {
				return Constants.DEF_RESULT_CODE.REFRESH;
			}
			return Constants.DEF_RESULT_CODE.LOAD;
		}

		@Override
		protected void onPostExecute(Integer result) {
			if (result == Constants.DEF_RESULT_CODE.FIRST) {
				Toast.makeText(getApplicationContext(), "网络信号不佳",
						Toast.LENGTH_LONG).show();
				reLoadImageView.setVisibility(View.VISIBLE);
			} else if (result == Constants.DEF_RESULT_CODE.ERROR) {
				listView.stopLoadMore();
			} else if (result == Constants.DEF_RESULT_CODE.REFRESH) {
				blogDetailAdapter.notifyDataSetChanged();
			} else {
				blogDetailAdapter.notifyDataSetChanged();
				listView.stopLoadMore();
			}
			progressBar.setVisibility(View.INVISIBLE);
			super.onPostExecute(result);
		}

	}

	// 载入很多其它
	@Override
	public void onLoadMore() {
		if (!JsoupUtil.contentLastPage) {
			new MainTask().execute(url, Constants.DEF_TASK_TYPE.NOR_FIRST);
		} else {
			// 在底部显示“--THE END0--"文本
			listView.stopLoadMore(" -- THE END --");
		}
	}

}

假设研读了我提供源代码的童鞋都会发现，我这里使用AsyncTask来进行网络请求操作，童鞋们也能够使用Thread+Handler的方式来实现异步请求，须要注意的是，耗时操作和网络操作都不能放在主线程，这是Android开发的规范。

这里还提一个技巧，我们更新ListView的数据的时候，并不须要又一次new一个adapter，能够像我一样，在适配器类中提供addList的方法。加入数据到adapter中，然后在适当的位置调用notifyDataSetChanged()方法就能够更新数据，不会出现数据反复和效率低下的情况。