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();
}
}
上图
代码:这里
Android 图文混排 通过webview实现并实现点击图片的更多相关文章
- Android图文混排-实现EditText图文混合插入上传
前段时间做了一个Android会议管理系统,项目需求涉及到EditText的图文混排,如图: 在上图的"会议详情"中.须要支持文本和图片的混合插入,下图演示输入的演示样例: 当会议 ...
- Android中Textview显示Html,图文混排,支持图片点击放大
本文首发于网易云社区 对于呈现Html文本来说,Android提供的Webview控件可以得到很好的效果,但使用Webview控件的弊端是效率相对比较低,对于呈现简单的html文本的话,杀鸡不必使用牛 ...
- Coretext实现图文混排及Gif图片播放
CoreText是iOS3.2推出的一套文字排版和渲染框架,可以实现图文混排,富文本显示等效果. CoreText中的几个重要的概念: CTFont CTFontCollection CTFontD ...
- 仿QQ聊天图文混排流程图【适用于XMPP】
图文混排流程图.graffle4.8 KB 下面附上图片素材: 表情.zip692.5 KB 下面是字符串与图片的详细对应关系: "[呲牙]& ...
- [Swift通天遁地]八、媒体与动画-(13)CoreText框架实现图文混排
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 使用android SpannableStringBuilder实现图文混排
项目开发中需要实现这种效果 多余两行,两行最后是省略号,省略号后面是下拉更多 之前用过的是Html.fromHtml去处理图文混排的,仅仅是文字后图片或者文字颜色字体什么的, 但是这里需要在最后文字的 ...
- Android 自绘TextView解决提前换行问题,支持图文混排
先看下效果图: 上面是MTextView,下面是默认的TextView. 一.原因 用最简单的全英文句子为例,如果有一个很长的单词,这一行剩余的空间显示不下了,那么规则就是不打断单词,而是把整个单词丢 ...
- 使用android SpannableStringBuilder实现图文混排,看到许多其他
项目开发需要达到这种效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZmFuY3lsb3ZlamF2YQ==/font/5a6L5L2T/fontsiz ...
- Android自动解析html带图片,实现图文混排
在android中,如何将html代码转换为text,然后显示在textview中呢,有一个简单直接的方法: textView.setText(Html.fromHtml(content)); 然而用 ...
随机推荐
- [BZOJ5248][2018九省联考]一双木棋
题目描述 https://www.lydsy.com/JudgeOnline/problem.php?id=5248 Solution 我们首先考虑放棋子的操作 发现它一定放棋子的部分是一个联通块 ...
- 使用二叉搜索树实现一个简单的Map
之前看了刘新宇大大的<算法新解>有了点收获,闲来无事,便写了一个二叉搜索树实现的Map类. java的Map接口有很多不想要的方法,自己定义了一个 public interface IMa ...
- webpack打包报错Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
npm install –save-dev extract-text-webpack-plugin@next 会下载到+ extract-text-webpack-plugin@4.0.0-beta. ...
- testng XMl 参数化
方法一: 方法二: 方法三: (1)如果测试的数据较多的情况下,很显然这种方式不适合,那么可以通过@DataProvider生成测试数据,通过@Test(dataProvider = "&q ...
- 第十篇--------javascript函数-参数
javascript函数的参数:形参,实参 //function 参数 //形参列表 function test(a,b,c,d){ //alert(test.length); //形参个数,4个 / ...
- Git提交项目到GitHub
一.GitHub新建项目 1.进入Github首页,点击New repository新建一个项目 2.填写相应信息后点击create即可 Repository name: 仓库名称 Descripti ...
- TortoiseGit学习系列之TortoiseGit基本操作拉取项目(图文详解)
前面博客 TortoiseGit学习系列之TortoiseGit基本操作克隆项目(图文详解) TortoiseGit学习系列之TortoiseGit基本操作修改提交项目(图文详解) TortoiseG ...
- InnoDB的B+树索引
B+树索引其本质就是B+树在数据库中的实现,但是B+索引在数据库中有一个特点就是其高扇出性,因此在数据库中,B+树的高度一般都在2-3层,也就是对于查找某一键值的行记录,最多只需要2到3次IO,这倒不 ...
- JDK1.7新特性(4):java语言动态性之反射API
直接通过一个代码示例来熟悉java中通过反射来对构造函数/域以及方法处理的相关API: package com.rampage.jdk7.chapter2; import java.lang.refl ...
- linux和Android的Makefile和android.mk
1. makefile 1.1 gcc的参数 -Wall: 是打开警告开关, -O: 代表默认优化,可选:-O0不优化,-O1低级优化,-O2中级优化,-O3高级优化,-Os代码空间优化. -g ...