Android实现图文混排（2）通过webview实现并实现点击图片处理事件

来源：互联网发布：村淘宝网编辑：程序博客网时间：2024/06/06 02:48

还是上次的图文混排研究在一个开源项目看到是用的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 centerbottom;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 scrollcenter bottom;-webkit-background-size: 320px 1px;}}

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

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /><title>登录手机QQ空间</title><style type="text/css"></style></head><body><div id="header"><div id="site-logo"><img src="http://119.167.195.52/waplogo/default/logo_qzone_b.gif" alt="logo"/><br/></div><div id="main-nav-host">欢迎来到手机QQ空间</div></div><div class="module"><div class="module-content"><div class="spacing-5 border-btm"><form id="qq_loginform" action="http://pt.3g.qq.com/qzoneLogin?sid=AZP1KWgBaSOw3QwFs-iTkTO8&aid=nLoginqz&vdata=CD88B677D371568499FD19EB7E8BA14D" method="post"><p class="tabs-1">QQ号码:</p><p class="tabs-1"><input name="qq" type="text" maxlength="40" value="" /></p><p class="tabs-1 margin-t-5">QQ密码:</p><p class="tabs-1"><input name="pwd" type="password" value="" /></p><p class="tabs-1 margin-t-5"><input type="submit" class="btn-s" value="登录" /></p></body></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;@Overrideprotected 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() {@Overridepublic 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();}}

Android实现图文混排（2） 通过webview实现 并实现点击 图片处理事件

Android实现图文混排（2）通过webview实现并实现点击图片处理事件