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

上图

代码：这里

转载于:https://www.cnblogs.com/zhujiabin/p/4206336.html

Android 图文混排通过webview实现并实现点击图片相关推荐

android 点击图片事件,android图文混排点击事件
图文混排顾名思义就是把文字和图片混合排列在一起,比较简单的需求我们也可以通过TextView和ImageView配合使用来达到目的,但是遇到稍微复杂一些的情况这种方法就不适用了. 做这样一个按钮: 对 ...
android多媒体图文混排,android图文混排
背景最近我们的产品来了个新的模块,给学生做题提高成绩的.需求如下: 支持单选.多选.填空题支持图片文字混排输入框有交互,排版精致美观为了体验优化,不能使用网页实现效果思路分析我们的图文混排 ...
Android图文混排－实现EditText图文混合插入上传
前段时间做了一个Android会议管理系统,项目需求涉及到EditText的图文混排,如图: 在上图的"会议详情"中,需要支持文本和图片的混合插入,下图演示输入的示例: 当会议创建 ...
Android图文混排（仿QQ空间评论）
你知道TextView中可以"塞入"图片么? 之前项目需求,做一个类似QQ的点赞评论功能,效果图如下: 本文主要讲解评论这一块,至于点赞和表情帖,后续再说. 评论功能的介绍:评论内 ...
RichEditeText——android图文混排富文本文章编辑器实现详解
需求:android 实现富文本编辑器,并且实现html解析和生成. 功能点: 字体加粗,斜体,下划线,删除线字体设置大小默认大(18px),中(16px),小(14px) 字体设置颜色换行 ...
Android 图文混排异步加载图片
学习老罗课程的练习实例 1.原始json数据来自图灵机器人,URL为:http://www.tuling123.com/openapi/api?key=36082454b270b90d0900d251 ...
Android-实现图文混排编辑
RichTextX RichTextX一个帮助开发者实现Android图文混排编辑和显示的库. 开源地址:https://github.com/shine56/RichTextX 添加依赖 imple ...
[Swift通天遁地]八、媒体与动画-(13)CoreText框架实现图文混排
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
Android使用HtmlTextView控件实现新闻详情图文混排
在实现新闻详情的时候,安卓也有类似富文本的控件,但是使用webview或者textview等方法,每种方法各有优劣,不是很完美.今天给大家介绍一个安卓控件--HtmlTextView,实现详情页图文混 ...

Android 图文混排通过webview实现并实现点击图片

Android 图文混排通过webview实现并实现点击图片相关推荐

最新文章

热门文章

Android 图文混排 通过webview实现并实现点击图片

Android 图文混排 通过webview实现并实现点击图片相关推荐

最新文章

热门文章

Android 图文混排通过webview实现并实现点击图片

Android 图文混排通过webview实现并实现点击图片相关推荐