Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android應用開發-小巫CSDN博客客戶端之顯示博文詳細內容

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

編輯:關於Android編程

Android應用開發-小巫CSDN博客客戶端之顯示博文詳細內容
上篇博文給大家介紹的是如何嵌入有米廣告並且獲取收益,本篇博客打算講講關於如何在一個ListView裡顯示博文的詳細信息,這個可能是童鞋們比較困惑的,因為一篇博客可能有標題、摘要、圖片、代碼等等元素組成,我們要怎麼在一個界面中顯示這些內容並且按照自己的指定的方式顯示呢,別急,下面會告訴大家。
重新整理一下一篇博文可能有以下元素:標題摘要文本內容圖片粗標題代碼塊
在UI篇小巫已經介紹了,博文詳細內容的主要控件就是一個ListView,每個元素就是ListView中的一項item,每一項都有自己的布局用於顯示特定的元素。效果圖如下:
\

\

關於UI就不說了,主要來看一下內容適配器:
/BlogClient/src/com/xiaowu/blogclient/adapter/BlogDetailAdapter.java<喎?/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPjxwcmUgY2xhc3M9"brush: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 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(); // 初始化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 list) { this.list = list; } public void addList(List list) { this.list.addAll(list); } public void clearList() { this.list.clear(); } public List 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 {

		@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()方法就可以更新數據,不會出現數據重復和效率低下的情況。

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved