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

最新推荐文章于 2021-05-26 13:23:11 发布

sfshine

最新推荐文章于 2021-05-26 13:23:11 发布

阅读量5.8k

点赞数 1

分类专栏： Android

本文链接：https://blog.csdn.net/sfshine/article/details/8452314

版权

Android 专栏收录该内容

471 篇文章 0 订阅

订阅专栏

还是上次的图文混排研究在一个开源项目看到是用的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文件将来会在网络中获取

<?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;

	@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();
	}
}