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: 0; padding: 0 8px; background-color: #efeff0; color: #333; word-wrap: break-word; } p { margin-top: 0; margin-bottom: 5pt; line-height: 1.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: 0 5pt; color: #464646; line-height: 1.3em; } .date { color: #8e8e8e; font-size: 12pt; padding: 8pt 0; } #content { font-size: 14pt; line-height: 1.8; } img { max-width: 310px; height: auto; } div.bimg { text-align: center; padding: 0; } .photo_title { font-weight: bold; font-size: 16pt; margin-top: 15px; } .langs_cn { color: #006200; } audio { width: 100% } * { -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, 0, 0, 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: 2) { #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(0); 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 = "发表时间:" + "19901195" + " 查看:" + "255"; 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 = 0, y = 0; switch (event.getAction()) { case MotionEvent.ACTION_DOWN: x = (int) event.getRawX(); y = (int) event.getRawY(); break; case MotionEvent.ACTION_UP: if (x - event.getX() < 5 && y - event.getY() < 5) { 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(), 10).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[4096]; for (int n; (n = in.read(b)) != -1;) { out.append(new String(b, 0, n)); } return out.toString(); } }
上图
代码：这里
