小巫CSDN博客客戶端之顯示博文詳細內容 · 小巫CSDN博客客戶端開發教程

## Android應用開發-小巫CSDN博客客戶端之顯示博文詳細內容上篇博文給大家介紹的是如何嵌入有米廣告并且獲取收益，本篇博客打算講講關于如何在一個ListView里顯示博文的詳細信息，這個可能是童鞋們比較困惑的，因為一篇博客可能有標題、摘要、圖片、代碼等等元素組成，我們要怎么在一個界面中顯示這些內容并且按照自己的指定的方式顯示呢，別急，下面會告訴大家。 ?重新整理一下一篇博文可能有以下元素： - **標題** - **摘要** - **文本內容** - **圖片** - **粗標題** - **代碼塊** 在UI篇小巫已經介紹了，博文詳細內容的主要控件就是一個ListView,每個元素就是ListView中的一項item，每一項都有自己的布局用于顯示特定的元素。效果圖如下: ![](https://box.kancloud.cn/2016-02-24_56cd63d2123aa.jpg) ![](https://box.kancloud.cn/2016-02-24_56cd63d266e14.jpg) 關于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; // 回退按鈕 private ImageView commentBtn; // 評論按鈕 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()方法就可以更新數據，不會出現數據重復和效率低下的情況。