Android應用開發-小巫CSDN部落格用戶端之顯示博文詳細內容

標籤：android應用

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()方法就可以更新資料，不會出現資料重複和效率低下的情況。

Android應用開發-小巫CSDN部落格用戶端之顯示博文詳細內容