Android 图文混排通过webview实现并实现点击图片

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在一个开源项目看到是用的webview 实现的
1. 这是在asset中的一个模板html

<html>
<head>
<title>News Detail</title>
<meta name="viewport" content="width=device-width, minimum-scale=0.5, initial-scale=1.2, maximum-scale=2.0, user-scalable=1" />
<link rel="stylesheet" type="text/css" href="css.css" /> </head>
<body>
<div id="header">
<h3>
#title#
</h3>
<div class="date">#time#</div>
</div>
<div id="content">
#content#
</div>
</body>
</html>

2.模板的css

body {
font-family: Helvetica, "Microsoft Yahei", Verdana, Helvetica, SimSun,
Arial, "Arial Unicode MS", MingLiu, PMingLiu, "MS Gothic", sans-serief;
margin: ;
padding: 8px;
background-color: #efeff0;
color: #;
word-wrap: break-word;
} p {
margin-top: ;
margin-bottom: 5pt;
line-height: .6em;
} #header {
text-align: center;
background: transparent url('webBgLine.png') repeat-x scroll center
bottom;
padding-top: 6pt;
margin-bottom: 5pt;
-webkit-background-size: 320px 2px;
} #header h3 {
margin-bottom: 0px;
margin-top: 5px;
font-size: 16pt;
padding: 5pt;
color: #;
line-height: .3em;
} .date {
color: #8e8e8e;
font-size: 12pt;
padding: 8pt ;
} #content {
font-size: 14pt;
line-height: 1.8;
} img {
max-width: 310px;
height: auto;
} div.bimg {
text-align: center;
padding: ;
} .photo_title {
font-weight: bold;
font-size: 16pt;
margin-top: 15px;
} .langs_cn {
color: #;
} audio {
width: %
} * {
-webkit-touch-callout: none;
/* prevent callout to copy image, etc when tap to hold */
/*-webkit-text-size-adjust: none;*/
/* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color: rgba(, , , 0.15);
/* make transparent link selection, adjust last value opacity 0 to 1.0 */
/*-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
} @media screen and (-webkit-device-pixel-ratio: ) {
#header {
background-image: transparent url('webBgLine@2x.png') repeat-x scroll
center bottom;
-webkit-background-size: 320px 1px;
}
}

3.测试的一个html文件将来会在网络中获取

主要的代码：

package com.su.imagetextview; import java.io.IOException;
import java.io.InputStream; import android.app.Activity;
import android.content.res.AssetManager;
import android.os.Bundle;
import android.util.Log;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnLongClickListener;
import android.view.View.OnTouchListener;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebView.HitTestResult;
import android.widget.Toast; public class WebViewActitivy extends Activity {
private String TAG = "WebViewActitivy";
private WebView webView; @Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.webview);
super.onCreate(savedInstanceState);
webView = (WebView) findViewById(R.id.news_body_webview_content);
webView.getSettings().setDefaultTextEncodingName("utf-8");// 避免中文乱码
webView.addJavascriptInterface(this, "javatojs");
webView.setScrollBarStyle();
WebSettings webSetting = webView.getSettings();
webSetting.setJavaScriptEnabled(true);
webSetting.setNeedInitialFocus(false);
webSetting.setSupportZoom(true);
webSetting.setCacheMode(WebSettings.LOAD_DEFAULT
| WebSettings.LOAD_CACHE_ELSE_NETWORK); try {
// 读取来自assets的信息实际操作 _newsContent 来自网络
String _newsContent = getStringFromAssets("test.html");
// 这是本地的html模板
String htmlContent = getStringFromAssets("NewsDetail.html"); // 替换文本
String newsInfo = "发表时间:" + "" + " 查看:" + "";
String newsTitle = "测试Html图文混排";
String LOCAL_PATH = "file:///android_asset/";// 本地html
// 替换信息加载到html模板中
webView.loadDataWithBaseURL(
LOCAL_PATH,
htmlContent.replace("#title#", newsTitle)
.replace("#time#", newsInfo)
.replace("#content#", _newsContent), "text/html",
"utf-8", null);
webView.setOnTouchListener(touchlistener);
/**
* 长按获取图片地址可以进行放大保存等操作
*/
webView.setOnLongClickListener(new OnLongClickListener() { @Override
public boolean onLongClick(View v) {
HitTestResult hitTestResult = ((WebView) v)
.getHitTestResult();
if (hitTestResult.getType() == HitTestResult.IMAGE_TYPE
|| hitTestResult.getType() == HitTestResult.IMAGE_ANCHOR_TYPE
|| hitTestResult.getType() == HitTestResult.SRC_IMAGE_ANCHOR_TYPE) {
Log.e(TAG, "保存这个图片！"
+ hitTestResult.getExtra().toString());
}
return true;
}
}); } catch (Exception e) {
// TODO: handle exception
} } /**
* 只能通过实现这个方法来模拟点击事件直接点击没效果
*/ private OnTouchListener touchlistener = new OnTouchListener() { public boolean onTouch(View v, MotionEvent event) {
float x = , y = ;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
x = (int) event.getRawX();
y = (int) event.getRawY();
break; case MotionEvent.ACTION_UP:
if (x - event.getX() < && y - event.getY() < ) {
HitTestResult hitTestResult = ((WebView) v)
.getHitTestResult();
if (hitTestResult.getType() == HitTestResult.IMAGE_TYPE
|| hitTestResult.getType() == HitTestResult.IMAGE_ANCHOR_TYPE
|| hitTestResult.getType() == HitTestResult.SRC_IMAGE_ANCHOR_TYPE) {
Log.e(TAG, "保存这个图片！"
+ hitTestResult.getExtra().toString());
Toast.makeText(
WebViewActitivy.this,
"保存这个图片！" + hitTestResult.getExtra().toString(),
).show();
}
} break;
} return false;
} }; String getStringFromAssets(String path) throws IOException {
AssetManager assetManager = getAssets();
InputStream inputStream = assetManager.open(path);
return inputStream2String(inputStream); } public static String inputStream2String(InputStream in) throws IOException {
StringBuffer out = new StringBuffer();
byte[] b = new byte[];
for (int n; (n = in.read(b)) != -;) {
out.append(new String(b, , n));
}
return out.toString();
}
}