這個需求，比較少見，但是我遇到了。
剛開始覺得很簡單，畢竟 Android 的 TextView 還是很強大。直接 Html.fromHtml()不就行了。
騷年，你想的太簡單了。首先圖片就不行，其次你也不知道服務端會給你什么標簽，好吧。關于圖片不顯示我在網上查了點資料，重寫ImageGetter.代碼貼上
/**
* 重寫圖片加載接口
*/
private class HtmlImageGetter implements Html.ImageGetter {
private TextView textView;
public HtmlImageGetter(TextView v) {
textView = v;
}
/**
* 獲取圖片
*/
@Override
public Drawable getDrawable(String source) {
URLDrawable d = new URLDrawable(textView.getContext());
LoadImageAsyncTask loadImageAsyncTask = new LoadImageAsyncTask(textView, d);
loadImageAsyncTask.execute(source);
return d;
}
class LoadImageAsyncTask extends AsyncTask<String, Void, Drawable> {
private URLDrawable mDrawable;
private TextView textView;
private final Context context;
public LoadImageAsyncTask(TextView v, URLDrawable drawable) {
this.textView = v;
context = textView.getContext();
mDrawable = drawable;
}
@Override
protected Drawable doInBackground(String... params) {
String source = params[0];
return fetchDrawable(source);
}
//預定圖片寬高比例為 4:3
@SuppressWarnings("deprecation")
public Rect getDefaultImageBounds(Context context) {
Display display = ((Activity) context).getWindowManager().getDefaultDisplay();
int width = display.getWidth();
int height = (width * 3 / 4);
return new Rect(0, 0, width, height);
}
public Drawable fetchDrawable(String s) {
Drawable drawable = null;
URL url;
try {
url = new URL(s);
URLConnection conn = url.openConnection();
conn.connect();
InputStream in;
in = conn.getInputStream();
drawable = Drawable.createFromStream(in, SystemClock.currentThreadTimeMillis()+".jpg");
LogUtils.d("pcx", "drawable "+ drawable);
} catch (Exception e) {
return null;
}
return drawable;
}
/**
* 圖片下載完成后執行
*/
@Override
protected void onPostExecute(Drawable drawable) {
LogUtils.d("pcx", "drawable != null && mDrawable != null" + (drawable != null && mDrawable != null));
if (drawable != null && mDrawable != null) {
mDrawable.drawable = drawable;
textView.invalidate();
textView.requestLayout();
// CharSequence t = textView.getText();
// textView.setText(t);
}
}
}
}
private class URLDrawable extends BitmapDrawable {
protected Drawable drawable;
@SuppressWarnings("deprecation")
public URLDrawable(Context context) {
this.setBounds(getDefaultImageBounds(context));
drawable = context.getResources().getDrawable(R.drawable.defaultimg);
drawable.setBounds(getDefaultImageBounds(context));
}
@Override
public void draw(Canvas canvas) {
if (drawable != null) {
drawable.draw(canvas);
}
}
@SuppressWarnings("deprecation")
public Rect getDefaultImageBounds(Context context) {
Display display = ((Activity) context).getWindowManager().getDefaultDisplay();
int width = display.getWidth();
int height = (int) (width * 3 / 4);
Rect bounds = new Rect(0, 0, width, height);
return bounds;
}
}
是的，確實可以實現，但是圖片的寬高并不是想象中那么好控制，其次我這邊圖片加載太慢了，同條件下用Fresco 早就加載出來了，這邊還沒有出來。
我猜測可能這個是 Android 早期的方式，那個時候耗時操作還有在 MainThread.但是現在不可以了，所以用了古老的AsyncTask去處理，在速度方面太不理想了。
必殺技
直接去解析好了。
我很開心的寫了如下代碼。
if (!TextUtils.isEmpty(product.htmlStr)) {
Html.TagHandler handler = new Html.TagHandler() {
int contentIndex = 0;
/**
* opening : 是否為開始標簽
* tag: 標簽名稱
* output:輸出信息，用來保存處理后的信息
* xmlReader: 讀取當前標簽的信息，如屬性等
*/
@Override
public void handleTag(boolean opening, String tag, Editable output, XMLReader xmlReader) {
LogUtils.d("PCX ", "handleTag--------- opening:" + opening + ",tag:" + tag);
if (!("html".equalsIgnoreCase(tag) || "body".equalsIgnoreCase(tag))) {
if ("img".equalsIgnoreCase(tag)) {
if (opening) {//獲取當前標簽的內容開始位置
lists.add(true);
LogUtils.d("PCX ", " tag:" + tag + ", lists.add(true);");
// try {
// final String imgUrl = (String) xmlReader.getProperty("src");
// LogUtils.d("pcx", " imgUrl------- " + imgUrl);
// } catch (Exception e) {
// LogUtils.e("pcx", " Exception------- " + e.toString());
// }
}
} else {
if (opening) {//獲取當前標簽的內容開始位置
contentIndex = output.length();
lists.add(false);
LogUtils.d("PCX ", " tag:" + tag + ", lists.add(false);");
Field elementField ;
try {
// get the private attributes of the xmlReader by reflection by rekire
//http://stackoverflow.com/questions/6952243/how-to-get-an-attribute-from-an-xmlreader?rq=1
elementField = xmlReader.getClass().getDeclaredField("theNewElement");
elementField.setAccessible(true);
Object element = elementField.get(xmlReader);
Field attsField = element.getClass().getDeclaredField("theAtts");
attsField.setAccessible(true);
Object atts = attsField.get(element);
Field dataField = atts.getClass().getDeclaredField("data");
dataField.setAccessible(true);
String[] data = (String[]) dataField.get(atts);
Field lengthField = atts.getClass().getDeclaredField("length");
lengthField.setAccessible(true);
int len = (Integer) lengthField.get(atts);
for (int i = 0; i < len; i++) {
//這邊的src和type換成你自己的屬性名就可以了
// if("src".equals(data[i * 5 + 1])) {
// myAttributeA = data[i * 5 + 4];
// } else if("type".equals(data[i * 5 + 1])) {
// myAttributeB = data[i * 5 + 4];
// }
LogUtils.i("log", data[i * 5 + 1] + " : " + data[i * 5 + 4]);
}
} catch (Exception e) {
e.printStackTrace();
}
} else {
final int length = output.length();
String content = output.subSequence(contentIndex, length).toString();
// SpannableString spanStr = new SpannableString(content);
// spanStr.setSpan(new ForegroundColorSpan(Color.GREEN), 0, content.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
LogUtils.d("pcx", " content------- " + content);
// output.replace(contentIndex, length, spanStr);
stringLists.add(content);
}
}
}
}
};
// //這里面的resource就是fromhtml函數的第一個參數里面的含有的url
Html.ImageGetter imgGetter = new Html.ImageGetter() {
public Drawable getDrawable(String source) {
LogUtils.d("pcx", " source------- " + source);
imgLists.add(source);
return null;
}
};
// TextView textView = new TextView(this);
Spanned spanned = Html.fromHtml(product.htmlStr, null, handler);
LogUtils.d("pcx", "------- " + spanned.toString());
沒毛病啊，感覺馬上成功了，但是。
當我發覺不行的時候看下這個注釋就知道問題在哪里了??
/**
* Is notified when HTML tags are encountered that the parser does
* not know how to interpret.
*/
public static interface TagHandler {
/**
* This method will be called whenn the HTML parser encounters
* a tag that it does not know how to interpret.
*/
public void handleTag(boolean opening, String tag,
Editable output, XMLReader xmlReader);
}
不服氣的我去吧唧了下源碼，問題在這里，我們 Android 解析 HTML 標簽在這里解析的。然后不能識別的才回調，好吧，我的小九九破滅了。OOOOM
private void handleStartTag(String tag, Attributes attributes) {
if (tag.equalsIgnoreCase("br")) {
// We don't need to handle this. TagSoup will ensure that there's a </br> for each <br>
// so we can safely emite the linebreaks when we handle the close tag.
} else if (tag.equalsIgnoreCase("p")) {
handleP(mSpannableStringBuilder);
} else if (tag.equalsIgnoreCase("div")) {
handleP(mSpannableStringBuilder);
} else if (tag.equalsIgnoreCase("strong")) {
start(mSpannableStringBuilder, new Bold());
} else if (tag.equalsIgnoreCase("b")) {
start(mSpannableStringBuilder, new Bold());
} else if (tag.equalsIgnoreCase("em")) {
start(mSpannableStringBuilder, new Italic());
} else if (tag.equalsIgnoreCase("cite")) {
start(mSpannableStringBuilder, new Italic());
} else if (tag.equalsIgnoreCase("dfn")) {
start(mSpannableStringBuilder, new Italic());
} else if (tag.equalsIgnoreCase("i")) {
start(mSpannableStringBuilder, new Italic());
} else if (tag.equalsIgnoreCase("big")) {
start(mSpannableStringBuilder, new Big());
} else if (tag.equalsIgnoreCase("small")) {
start(mSpannableStringBuilder, new Small());
} else if (tag.equalsIgnoreCase("font")) {
startFont(mSpannableStringBuilder, attributes);
} else if (tag.equalsIgnoreCase("blockquote")) {
handleP(mSpannableStringBuilder);
start(mSpannableStringBuilder, new Blockquote());
} else if (tag.equalsIgnoreCase("tt")) {
start(mSpannableStringBuilder, new Monospace());
} else if (tag.equalsIgnoreCase("a")) {
startA(mSpannableStringBuilder, attributes);
} else if (tag.equalsIgnoreCase("u")) {
start(mSpannableStringBuilder, new Underline());
} else if (tag.equalsIgnoreCase("sup")) {
start(mSpannableStringBuilder, new Super());
} else if (tag.equalsIgnoreCase("sub")) {
start(mSpannableStringBuilder, new Sub());
} else if (tag.length() == 2 &&
Character.toLowerCase(tag.charAt(0)) == 'h' &&
tag.charAt(1) >= '1' && tag.charAt(1) <= '6') {
handleP(mSpannableStringBuilder);
start(mSpannableStringBuilder, new Header(tag.charAt(1) - '1'));
} else if (tag.equalsIgnoreCase("img")) {
startImg(mSpannableStringBuilder, attributes, mImageGetter);
} else if (mTagHandler != null) {
mTagHandler.handleTag(true, tag, mSpannableStringBuilder, mReader);
}
}
沒轍了，解析吧，我嘗試了 PULL SAX 解析，但是由于有一些標簽，比如空標簽。
經過一個小時奮斗，放棄了。
終于我還是用了第三方的，通常情況下我能不用就不用第三方，這次算我輸。
用的什么框架？
Jsoup
jsoup 是一款Java 的HTML解析器，可直接解析某個URL地址、HTML文本內容。它提供了一套非常省力的API，可通過DOM，CSS以及類似于jQuery的操作方法來取出和操作數據。
我們 Android 當然也有。
第一步
加入到我們項目
compile 'org.jsoup:jsoup:1.9.2'
第二步
算了還是直接上代碼吧，一步一步寫感覺怪怪的。
private void loadHtml() {
htmlList = new ArrayList<>();
if (!TextUtils.isEmpty(product.htmlStr)) {
Document parse = Jsoup.parse(product.htmlStr);
parseHtml(parse.getAllElements());
}
HtmlItemAdapter adapter = new HtmlItemAdapter(this, htmlList);
LinearLayoutManager mamager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
recyclerViewHtml.setLayoutManager(mamager);
recyclerViewHtml.setAdapter(adapter);
recyclerViewHtml.setNestedScrollingEnabled(false);
}
private void parseHtml(Elements allElements) {
for (int i = 0; i < allElements.size(); i++) {
Element element = allElements.get(i);
if (!(element.tagName().equalsIgnoreCase("#root") || element.tagName().equalsIgnoreCase("html") || element.tagName().equalsIgnoreCase("body") || element.tagName().equalsIgnoreCase("head"))) {
if (element.tagName().equalsIgnoreCase("img")) {
String src = element.attr("src");
htmlList.add(src);
LogUtils.d("pcx", src);
} else {
StringBuilder sb = new StringBuilder();
sb.append("<p");
Attributes attributes = element.attributes();
for (Attribute next : attributes) {
sb.append(" ");
sb.append(next.getKey());
sb.append("='");
sb.append(next.getValue());
sb.append("'");
}
sb.append(">");
sb.append(element.text());
sb.append("</p>");
htmlList.add(sb.toString());
LogUtils.d("pcx text", sb.toString());
}
}
}
}
簡單來說 就是把圖片拿出來，
剩下的標簽都保留原來的樣式再給 TextView。
HtmlItemAdapter 代碼
ublic class HtmlItemAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
private int imgPosition = 0;
private final ArrayList<String> mData;
private final Context mContext;
private ArrayList<String> imgList = new ArrayList<>();
private enum ITEM_TYPE {
ITEM_TYPE_IMAGE,
ITEM_TYPE_TEXT
}
public HtmlItemAdapter(Context context, ArrayList<String> aList) {
mData = aList;
mContext = context;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (viewType == ITEM_TYPE.ITEM_TYPE_IMAGE.ordinal()) {
return new ImageViewHolder(new SimpleDraweeView(mContext));
} else {
return new TextViewHolder(new TextView(mContext));
}
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if (holder instanceof TextViewHolder) {
((TextViewHolder) holder).mTextView.setText(Html.fromHtml(mData.get(position)));
} else if (holder instanceof ImageViewHolder) {
String s = mData.get(position);
imgList.add(s);
EzbuyImageLoaderUtil.loadImageWrapContent(s, ((ImageViewHolder) holder).mImageView);
((ImageViewHolder) holder).mImageView.setTag(imgPosition++);
}
}
@Override
public int getItemViewType(int position) {
String s = mData.get(position);
if (s.startsWith("http")) {
return ITEM_TYPE.ITEM_TYPE_IMAGE.ordinal();
} else {
return ITEM_TYPE.ITEM_TYPE_TEXT.ordinal();
}
}
@Override
public int getItemCount() {
return mData == null ? 0 : mData.size();
}
private class TextViewHolder extends RecyclerView.ViewHolder {
TextView mTextView;
TextViewHolder(View view) {
super(view);
this.mTextView = (TextView) view;
}
}
private class ImageViewHolder extends RecyclerView.ViewHolder {
SimpleDraweeView mImageView;
ImageViewHolder(View view) {
super(view);
this.mImageView = (SimpleDraweeView) view;
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
mImageView.setLayoutParams(lp);
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String[] urls = new String[imgList.size()];
imgList.toArray(urls);
Intent intent = new Intent(mContext, ScanPictureActivity.class);
mContext.startActivity(intent.putExtras(ScanPictureActivity.setArguments(urls, (int) v.getTag())));
}
});
}
}
}
之前我們是用 LinearLayout ，我覺得這個效率太差，所以換成了RecyclerView.
由于我們是嵌套在ScrollView里面所以滑動不是很流暢。
加這個代碼就行。
recyclerViewHtml.setNestedScrollingEnabled(false);
原來的 html
<div>
qfrwtfews</div>
<div>0.6</div>
<div>100</div>
<div>9000</div>
<div>jilhu</div>
<div/>
Logo打印
其實這個有 bug
在復雜布局下是實現不了的，百思不得姐后。
我決定再暴力點，鑒于 TextView 的強大兼容性，對不完整的 html 也可以解析顯示。
我決定用 img 標簽為分割線去切割了。
代碼如下：
if (!TextUtils.isEmpty(product.htmlStr)) {
Document parse = Jsoup.parse(product.htmlStr);
Elements img = parse.getElementsByTag("img");
for (Element ele : img) {
String s = ele.outerHtml();
String[] split = product.htmlStr.split(s);
htmlList.add(split[0]);
htmlList.add(ele.attr("src"));
product.htmlStr = product.htmlStr.substring(s.length()+split[0].length());
}
htmlList.add(product.htmlStr);
HtmlItemAdapter adapter = new HtmlItemAdapter(this, htmlList);
LinearLayoutManager mamager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
recyclerViewHtml.setLayoutManager(mamager);
recyclerViewHtml.setAdapter(adapter);
recyclerViewHtml.setNestedScrollingEnabled(false);
}
好了就這幾行代碼。
可能的問題
img 后的樣式可能會丟失。
但能接受。
