android+图文资讯,Android实现图文混排（2） 通过webview实现 并实现点击 图片...

本帖最后由 sfshine 于 2012-12-31 16:04 编辑

还是上次的图文混排研究 在一个开源项目看到是用的webview 实现的 那我也来试试

1. 这是在asset中的一个 模板html

News Detail

#title#

#time#

#content#

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

}

}

上图