oschina-app源碼解析-webview重組html

     有時候想用webview直接加載現成的我web頁面，但是web頁面直接放大手機上整體比較小，很難操作，說白了就是不合適，所以需要對html頁面進行重組,直接上完整代碼

String body = UIHelper.WEB_STYLE + newsDetail.getBody();
					// 讀取用戶設置：是否加載文章圖片--默認有wifi下始終加載圖片
					boolean isLoadImage;
					AppContext ac = (AppContext) getApplication();
					if (AppContext.NETTYPE_WIFI == ac.getNetworkType()) {
						isLoadImage = true;
					} else {
						isLoadImage = ac.isLoadImage();
					}
					if (isLoadImage) {
						// 過濾掉 img標籤的width,height屬性
						body = body.replaceAll(
								"(<img[^>]*?)\\s+width\\s*=\\s*\\S+", "$1");
						body = body.replaceAll(
								"(<img[^>]*?)\\s+height\\s*=\\s*\\S+", "$1");

						// 添加點擊圖片放大支持
						body = body.replaceAll("(<img[^>]+src=\")(\\S+)\"",
								"$1$2\" onClick=\"javascript:mWebViewImageListener.onImageClick('$2')\"");

					} else {
						// 過濾掉 img標籤
						body = body.replaceAll("<\\s*img\\s+([^>]*)\\s*>", "");
					}

					// 更多關於***軟件的信息
					String softwareName = newsDetail.getSoftwareName();
					String softwareLink = newsDetail.getSoftwareLink();
					if (!StringUtils.isEmpty(softwareName)
							&& !StringUtils.isEmpty(softwareLink))
						body += String
								.format("<div id='oschina_software' style='margin-top:8px;color:#FF0000;font-weight:bold'>更多關於: <a href='%s'>%s</a> 的詳細信息</div>",
										softwareLink, softwareName);

					// 相關新聞
					if (newsDetail.getRelatives().size() > 0) {
						String strRelative = "";
						for (Relative relative : newsDetail.getRelatives()) {
							strRelative += String
									.format("<a href='%s' style='text-decoration:none'>%s</a><p/>",
											relative.url, relative.title);
						}
						body += String.format(
								"<p/><hr/><b>相關資訊</b><div><p/>%s</div>",
								strRelative);
					}

					body += "<div style='margin-bottom: 80px'/>";

					System.out.println(body);

					mWebView.loadDataWithBaseURL(null, body, "text/html",
							"utf-8", null);
					mWebView.setWebViewClient(UIHelper.getWebViewClient());

全局樣式：

/** 全局web樣式 */
	public final static String WEB_STYLE = "<style>* {font-size:16px;line-height:20px;} p {color:#333;} a {color:#3E62A6;} img {max-width:310px;} "
			+ "img.alignleft {float:left;max-width:120px;margin:0 10px 5px 0;border:1px solid #ccc;background:#fff;padding:2px;} "
			+ "pre {font-size:9pt;line-height:12pt;font-family:Courier New,Arial;border:1px solid #ddd;border-left:5px solid #6CE26C;background:#f6f6f6;padding:5px;} "
			+ "a.tag {font-size:15px;text-decoration:none;background-color:#bbd6f3;border-bottom:2px solid #3E6D8E;border-right:2px solid #7F9FB6;color:#284a7b;margin:2px 2px 2px 0;padding:2px 4px;white-space:nowrap;}</style>";

上面全局樣式：“*”定義了字體大小以及行高；“p”標籤內的字體顏色；“a”標籤內的字體顏色；“img”標籤的圖片最大寬度；“pre”爲代碼樣式；

資訊內容是由服務返回的一串帶HTML標籤的字符串：

String body = newsDetail.getBody();

相關資訊則是由服務返回的數據組裝的：

String strRelative = "";
for(Relative relative : newsDetail.getRelatives()){
    strRelative += String.format("<a href='%s' style='text-decoration:none'>%s</a><p/>", relative.url, relative.title);
}

圖片處理
WebView上顯示圖片，不能直接顯示大圖，這會影響頁面的美觀以及用戶體驗，因此要過濾掉原始圖片的高寬屬性，使用全局的圖片樣式。同時客戶端可以根據用戶設置，是否加載圖片顯示，以達到節省流量的目的。

if(isLoadImage){
    //過濾掉 img標籤的width,height屬性
    body = body.replaceAll("(<img[^>]*?)\\s+width\\s*=\\s*\\S+","$1");
    body = body.replaceAll("(<img[^>]*?)\\s+height\\s*=\\s*\\S+","$1");
}else{
    //過濾掉 img標籤
    body = body.replaceAll("<\\s*img\\s+([^>]*)\\s*>","");
}

WebView展示HTML

mWebView.loadDataWithBaseURL(null, body, "text/html", "utf-8",null);

 

oschina-app完整源碼下載：http://download.csdn.net/detail/xiangxue336/7023661