实现app上对csdn的文章查看，以及文章中图片的保存 （制作csdn app 完结篇）

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/24022165

今天给大家带来CSDN的完结篇，即增加文章的查看和文章中图片的保存~

今天的目标：

首先是对控件使用的考虑。既然是网络上的文章。可能首先想到的就是webview，这里直接把页面加载到webview中是肯定不行的，首先得把页面上的数据解析，然后可能须要一个html的模版。然后把数据填充到模版，再将模版用于webview的展示。

想了想，还是不是非常方面，由于不确定文章中的段落、图片的数量和位置。所以终于照着网络上流传的版本号使用List实现。

思路：把页面上的数据解析成 标题、摘要、段落（*）、图片（*），自定以一个对象，解析完毕后生成一个List。当然顺序一定要和原文的一直。

然后针对标题、摘要、段落、图片各做一个List的item的布局，终于显示。

好了。先简单看下csdn文章页的html：

我们在原先的代表上，加入对这样html页面的解析：

首先是封装的对象：

package com.zhy.bean;

import java.util.List;

public class NewsDto
{
	private List<News> newses;
	private String nextPageUrl ;
	public List<News> getNewses()
	{
		return newses;
	}
	public void setNewses(List<News> newses)
	{
		this.newses = newses;
	}
	public String getNextPageUrl()
	{
		return nextPageUrl;
	}
	public void setNextPageUrl(String nextPageUrl)
	{
		this.nextPageUrl = nextPageUrl;
	} 

}

package com.zhy.bean;

public class News
{

	public static interface NewsType
	{
		public static final int TITLE = 1;
		public static final int SUMMARY = 2;
		public static final int CONTENT = 3;
		public static final int IMG = 4;
		public static final int BOLD_TITLE = 5;
	}

	/**
	 * 标题
	 */
	private String title;
	/**
	 * 摘要
	 */
	private String summary;
	/**
	 * 内容
	 */
	private String content;

	/**
	 * 图片链接
	 */
	private String imageLink;

	/**
	 * 类型
	 */
	private int type;

	public String getTitle()
	{
		return title;
	}

	public void setTitle(String title)
	{
		this.title = title;
	}

	public String getSummary()
	{
		return summary;
	}

	public void setSummary(String summary)
	{
		this.summary = summary;
		this.type = NewsType.SUMMARY;
	}

	public String getContent()
	{
		return content;
	}

	public void setContent(String content)
	{
		this.content = content;
	}

	public String getImageLink()
	{
		return imageLink;
	}

	public void setImageLink(String imageLink)
	{
		this.imageLink = imageLink;
		this.type = NewsType.IMG;

	}

	public int getType()
	{
		return type;
	}

	public void setType(int type)
	{
		this.type = type;
	}

	@Override
	public String toString()
	{
		return "News [title=" + title + ", summary=" + summary + ", content=" + content + ", imageLink=" + imageLink
				+ ", type=" + type + "]";
	}

}

加入了一个新的业务方法，把html字符串转化为List对象：

/**
	 * 依据文章的url返回一个NewsDto对象
	 *
	 * @return
	 * @throws CommonException
	 */
	public NewsDto getNews(String urlStr) throws CommonException
	{
		NewsDto newsDto = new NewsDto();
		List<News> newses = new ArrayList<News>();
		String htmlStr = DataUtil.doGet(urlStr);
		Document doc = Jsoup.parse(htmlStr);

		// 获得文章中的第一个detail
		Element detailEle = doc.select(".left .detail").get(0);
		// 标题
		Element titleEle = detailEle.select("h1.title").get(0);
		News news = new News();
		news.setTitle(titleEle.text());
		news.setType(NewsType.TITLE);
		newses.add(news);
		// 摘要
		Element summaryEle = detailEle.select("div.summary").get(0);
		news = new News();
		news.setSummary(summaryEle.text());
		newses.add(news);
		// 内容
		Element contentEle = detailEle.select("div.con.news_content").get(0);
		Elements childrenEle = contentEle.children();

		for (Element child : childrenEle)
		{
			Elements imgEles = child.getElementsByTag("img");
			// 图片
			if (imgEles.size() > 0)
			{
				for (Element imgEle : imgEles)
				{
					if (imgEle.attr("src").equals(""))
						continue;
					news = new News();
					news.setImageLink(imgEle.attr("src"));
					newses.add(news);
				}
			}
			// 移除图片
			imgEles.remove();

			if (child.text().equals(""))
				continue;

			news = new News();
			news.setType(NewsType.CONTENT);

			try
			{
				if(child.children().size()==1)
				{
					Element cc = child.child(0);
					if(cc.tagName().equals("b"))
					{
						news.setType(NewsType.BOLD_TITLE);
					}
				}

			} catch (IndexOutOfBoundsException e)
			{
				e.printStackTrace();
			}
			news.setContent(child.outerHtml());
			newses.add(news);
		}
		newsDto.setNewses(newses);
		return newsDto;
	}

測试代码：

@org.junit.Test
	public void test02()
	{
		NewsItemBiz biz = new NewsItemBiz();
		try
		{
			NewsDto newsDto = biz.getNews("http://www.csdn.net/article/2014-04-17/2819363-all-about-ddos");

			List<News> newses = newsDto.getNewses();
			for(News news : newses)
			{
				System.out.println(news);

			}			

			System.out.println("-----");
			System.out.println(newsDto.getNextPageUrl());;
		} catch (CommonException e)
		{
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

然后我们能够拿到这种结果数据：

好了，如今准备把解析完毕的数据用到我们的app上。

上一教程已经完毕了Xlist的显示。上拉与下拉。如今给它加入OnItemClickListener:

mXListView.setOnItemClickListener(new OnItemClickListener()
		{
			@Override
			public void onItemClick(AdapterView<?

> parent, View view, int position, long id)
			{
				NewsItem newsItem = mDatas.get(position-1);
				Intent intent = new Intent(getActivity(), NewsContentActivity.class);
				intent.putExtra("url", newsItem.getLink());
				startActivity(intent);
			}

		});

到达显示内容的Activity页面：

package com.zhy.csdndemo;

import java.util.List;

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.os.Looper;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ProgressBar;

import com.zhy.bean.CommonException;
import com.zhy.bean.News;
import com.zhy.biz.NewsItemBiz;
import com.zhy.csdndemo.adapter.NewContentAdapter;

public class NewsContentActivity extends Activity implements IXListViewLoadMore
{

	private XListView mListView;

	/**
	 * 该页面的url
	 */
	private String url;
	private NewsItemBiz mNewsItemBiz;
	private List<News> mDatas;

	private ProgressBar mProgressBar;
	private NewContentAdapter mAdapter;

	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.news_content);

		mNewsItemBiz = new NewsItemBiz();

		Bundle extras = getIntent().getExtras();
		url = extras.getString("url");

		mAdapter = new NewContentAdapter(this);

		mListView = (XListView) findViewById(R.id.id_listview);
		mProgressBar = (ProgressBar) findViewById(R.id.id_newsContentPro);

		mListView.setAdapter(mAdapter);
		mListView.disablePullRefreash();
		mListView.setPullLoadEnable(this);

		mListView.setOnItemClickListener(new OnItemClickListener()
		{
			@Override
			public void onItemClick(AdapterView<?> parent, View view, int position, long id)
			{

				News news = mDatas.get(position - 1);
				String imageLink = news.getImageLink();
				//Toast.makeText(NewContentActivity.this, imageLink, 1).show();
				Intent intent = new Intent(NewsContentActivity.this,ImageShowActivity.class);
				intent.putExtra("url", imageLink);
				startActivity(intent);
			}
		});

		mProgressBar.setVisibility(View.VISIBLE);
		new LoadDataTask().execute();

	}

	@Override
	public void onLoadMore()
	{

	}

	class LoadDataTask extends AsyncTask<Void, Void, Void>
	{

		@Override
		protected Void doInBackground(Void... params)
		{
			try
			{
				mDatas = mNewsItemBiz.getNews(url).getNewses();
			} catch (CommonException e)
			{
				Looper.prepare();
				Toast.makeText(getApplicationContext(), e.getMessage(), 1).show();
				Looper.loop();
			}

			return null;
		}

		@Override
		protected void onPostExecute(Void result)
		{
			if(mDatas == null)
				return ;
			mAdapter.addList(mDatas);
			mAdapter.notifyDataSetChanged();
			mProgressBar.setVisibility(View.GONE);
		}

	}

	/**
	 * 点击返回button
	 * @param view
	 */
	public void back(View view)
	{
		finish();
	}

}

接下来看这个Activity中ListView的Adapter

package com.zhy.csdndemo.adapter;

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

import android.content.Context;
import android.graphics.Bitmap;
import android.text.Html;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
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.zhy.bean.News;
import com.zhy.bean.News.NewsType;
import com.zhy.csdndemo.R;

public class NewContentAdapter extends BaseAdapter
{
	private LayoutInflater mInflater;
	private List<News> mDatas = new ArrayList<News>();

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

	public NewContentAdapter(Context context)
	{
		mInflater = LayoutInflater.from(context);

		imageLoader.init(ImageLoaderConfiguration.createDefault(context));
		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 addList(List<News> datas)
	{
		mDatas.addAll(datas);
	}

	@Override
	public int getCount()
	{
		return mDatas.size();
	}

	@Override
	public Object getItem(int position)
	{
		return mDatas.get(position);
	}

	@Override
	public long getItemId(int position)
	{
		return position;
	}

	@Override
	public int getItemViewType(int position)
	{
		switch (mDatas.get(position).getType())
		{
		case NewsType.TITLE:
			return 0;
		case NewsType.SUMMARY:
			return 1;
		case NewsType.CONTENT:
			return 2;
		case NewsType.IMG:
			return 3;
		case NewsType.BOLD_TITLE:
			return 4;
		}
		return -1;
	}

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

	@Override
	public boolean isEnabled(int position)
	{
		switch (mDatas.get(position).getType())
		{
		case NewsType.IMG:
			return true;
		default:
			return false;
		}
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent)
	{
		News news = mDatas.get(position); // 获取当前项数据

		Log.e("xxx", news.toString());

		ViewHolder holder = null;
		if (null == convertView)
		{
			holder = new ViewHolder();
			switch (news.getType())
			{
			case NewsType.TITLE:
				convertView = mInflater.inflate(R.layout.news_content_title_item, null);
				holder.mTextView = (TextView) convertView.findViewById(R.id.text);
				break;
			case NewsType.SUMMARY:
				convertView = mInflater.inflate(R.layout.news_content_summary_item, null);
				holder.mTextView = (TextView) convertView.findViewById(R.id.text);
				break;
			case NewsType.CONTENT:
				convertView = mInflater.inflate(R.layout.news_content_item, null);
				holder.mTextView = (TextView) convertView.findViewById(R.id.text);
				break;
			case NewsType.IMG:
				convertView = mInflater.inflate(R.layout.news_content_img_item, null);
				holder.mImageView = (ImageView) convertView.findViewById(R.id.imageView);
				break;
			case NewsType.BOLD_TITLE:
				convertView = mInflater.inflate(R.layout.news_content_bold_title_item, null);
				holder.mTextView = (TextView) convertView.findViewById(R.id.text);
				break;
			}
			convertView.setTag(holder);
		} else
		{
			holder = (ViewHolder) convertView.getTag();
		}

		if (null != news)
		{
			switch (news.getType())
			{
			case NewsType.IMG:
				imageLoader.displayImage(news.getImageLink(), holder.mImageView, options);
				break;
			case NewsType.TITLE:
				holder.mTextView.setText(news.getTitle());
				break;
			case NewsType.SUMMARY:
				holder.mTextView.setText(news.getSummary());
				break;
			case NewsType.CONTENT:
				holder.mTextView.setText("\u3000\u3000"+Html.fromHtml(news.getContent()));
				break;
			case NewsType.BOLD_TITLE:
				holder.mTextView.setText("\u3000\u3000"+Html.fromHtml(news.getContent()));
			default:

				// holder.mTextView.setText(Html.fromHtml(item.getContent(),
				// null, new MyTagHandler()));
				// holder.content.setText(Html.fromHtml("<ul><bold>加粗</bold>sdfsdf<ul>",
				// null, new MyTagHandler()));
				break;
			}
		}
		return convertView;
	}

	private final class ViewHolder
	{
		TextView mTextView;
		ImageView mImageView;
	}
}

我们复写了getViewTypeCount ， getItemViewType 。isEnabled 由于我们的item的样式不止一种。且为显示图片的那个Item让它能够点击。

最后就是图片展示的Activity:

package com.zhy.csdndemo;

import android.app.Activity;
import android.graphics.Bitmap;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.Toast;

import com.polites.android.GestureImageView;
import com.zhy.csdndemo.util.FileUtil;
import com.zhy.csdndemo.util.Http;

public class ImageShowActivity extends Activity
{

	private String url;
	private ProgressBar mLoading;
	private GestureImageView mGestureImageView;
	private Bitmap mBitmap;

	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_image_page);

		// 拿到图片的链接
		url = getIntent().getExtras().getString("url");
		mLoading = (ProgressBar) findViewById(R.id.loading);
		mGestureImageView = (GestureImageView) findViewById(R.id.image);

		new DownloadImgTask().execute();

	}

	/**
	 * 点击返回button
	 *
	 * @param view
	 */
	public void back(View view)
	{
		finish();
	}

	/**
	 * 点击下载button
	 *
	 * @param view
	 */
	public void downloadImg(View view)
	{
		mGestureImageView.setDrawingCacheEnabled(true);
		if (FileUtil.writeSDcard(url, mGestureImageView.getDrawingCache()))
		{
			Toast.makeText(getApplicationContext(), "保存成功", Toast.LENGTH_SHORT).show();
		} else
		{
			Toast.makeText(getApplicationContext(), "保存失败", Toast.LENGTH_SHORT).show();
		}
		mGestureImageView.setDrawingCacheEnabled(false);
	}

	class DownloadImgTask extends AsyncTask<Void, Void, Void>
	{
		@Override
		protected Void doInBackground(Void... params)
		{
			mBitmap = Http.HttpGetBmp(url);
			return null;
		}

		@Override
		protected void onPostExecute(Void result)
		{
			mGestureImageView.setImageBitmap(mBitmap);
			mLoading.setVisibility(View.GONE);
			super.onPostExecute(result);
		}

	}
}

好了，省略了一些辅助类的方法和布局文件。

以下看下效果。

好了，上传文件限制2M。没办法录太多。

源代码点击此处下载