Android应用开发-小巫CSDN博客客户端之显示博文详细内容

Android应用开发-小巫CSDN博客客户端之显示博文详细内容

上篇博文给大家介绍的是如何嵌入有米广告并且获取收益，本篇博客打算讲讲关于如何在一个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>();// 初始化imageLoaderimageLoader.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);}}@Overridepublic int getCount() {return list.size();}@Overridepublic Object getItem(int position) {return list.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic 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;}@Overridepublic int getViewTypeCount() {return 6;}@Overridepublic 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;}@Overridepublic 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; // 回退按钮private ImageView commentBtn; // 评论按钮public static String url; // 博客地址private String filename; // 文件名字@Overrideprotected 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() {@Overridepublic void onClick(View view) {reLoadImageView.setVisibility(View.INVISIBLE);progressBar.setVisibility(View.VISIBLE);}});backBtn = (ImageView) findViewById(R.id.backBtn);backBtn.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View arg0) {finish();}});commentBtn = (ImageView) findViewById(R.id.comment);commentBtn.setOnClickListener(new OnClickListener() {@Overridepublic 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() {@Overridepublic 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;}}});}@Overridepublic void finish() {super.finish();}private class MainTask extends AsyncTask<String, Void, Integer> {@Overrideprotected 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;}@Overrideprotected 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);}}// 加载更多@Overridepublic 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()方法就可以更新数据，不会出现数据重复和效率低下的情况。