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(‘[email protected]‘) 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();
    }
}  

上图

代码:这里

时间: 2024-11-02 16:39:31

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

Android图文混排(一)-实现EditText图文混合插入上传

前段时间做了一个Android会议管理系统,项目需求涉及到EditText的图文混排,如图: 在上图的"会议详情"中,需要支持文本和图片的混合插入,下图演示输入的示例: 当会议创建完成以后,保存数据到服务器,然后查看刚刚创建好的会议,如图: 一.明确需求 首先,点击"会议详情"文本框中,正常输入文本,然后点击左下角的图片图标,进入系统的相册用来选择一张图片并插入到文本框中,你还可以将光标停留在任意的文字中间,完成图片的插入,回退建即可以逐个删除文字,也可以删除图片.

Android图文混排-实现EditText图文混合插入上传

前段时间做了一个Android会议管理系统,项目需求涉及到EditText的图文混排,如图: 在上图的"会议详情"中.须要支持文本和图片的混合插入,下图演示输入的演示样例: 当会议创建完毕以后,保存数据到server.然后查看刚刚创建好的会议.如图: 一.明白需求 首先.点击"会议详情"文本框中,正常输入文本,然后点击左下角的图片图标.进入系统的相冊用来选择一张图片并插入到文本框中,你还能够将光标停留在随意的文字中间,完毕图片的插入.回退建即能够逐个删除文字,也能够

NGUI研究之有点坑爹的图文混排

 最近研究了了一下NGUI的图文混排工具,得出的结论是有点坑爹..大家看看我的测试步骤,我用的是目前NGUI的版本3.6.6 . 当我在 Open BitMapFont Marker 的时候界面上出现Assets/NGUI/Editor/FreeType.dylib is missing 的字样.于是查了一下,大概意思是必须要把FreeType.dylib 文件拷贝在/usr/local/lib/FreeType.dylib路径下面.FreeType.dylib 文件在NGUI/Editor

仿QQ聊天图文混排流程图【适用于XMPP】

图文混排流程图.graffle4.8 KB 下面附上图片素材: 表情.zip692.5 KB 下面是字符串与图片的详细对应关系: "[呲牙]"字符串对应于图片名    f000.gif; "[调皮]"字符串对应于图片名    f001.gif; "[流汗]"字符串对应于图片名    f002.gif; "[偷笑]"字符串对应于图片名    f003.gif; "[再见]"字符串对应于图片名    f004.

Coretext实现富文本图文混排及Gif图片播放

CoreText是iOS3.2推出的一套文字排版和渲染框架,可以实现图文混排,富文本显示等效果. CoreText中的几个重要的概念:  CTFont CTFontCollection CTFontDescriptor CTFrame CTFramesetter CTGlyphInfo CTLine CTParagraphStyle CTRun CTTextTab CTTypesetter 先来了解一下该框架的整体视窗组合图: CTFrame 作为一个整体的画布(Canvas),其中由行(CTL

iOS 图文混排

1) 在iOS 7之前也有一种用于文字排版和渲染的技术——Core Text,而引入Text Kit的目的并非要取代Core Text. Core Text是面????层的文字排版和渲染技术,如果我们需要将文本内容??接渲染到图形上下文时,从性能角度考虑 ??,最佳??方案??是使用Core Text.??是从易??用性角度考虑??,使用Text Kit是最好的选择,因为??能直????接使用UIKit 提供的一些文本控件,例如:UITextView.UILabel和UITextField,对文

[Swift通天遁地]八、媒体与动画-(13)CoreText框架实现图文混排

本文将演示CoreText框架实现图文混排.CoreText(富文本)框架并不支持图片的绘制, 需要借助Core Graphics框架来进行图片的绘制. 图文混排的实现原理非常简单,就是在一个富文本中插入一个占位符, 表示此处需要插入一张图片.然后再由另一个图形绘制框架, 在占位符所在位置绘制指定的图片. 在项目文件夹上点击鼠标右键,弹出右键菜单. [New File]->[Cocoa Touch]->[Next]-> [Class]:CTImageView [Subclass of]:

Android Json数据的解析+ListView图文混排+缓存算法Lrucache 仿知乎

前几天心血来潮,打算根据看知乎的API自己做一个小知乎,定制的过程遇到ListView的优化问题及图片未缓存重加载等等许多问题,解决了以后打算和博友分享一下. 接口数据:http://api.kanzhihu.com/getpostanswers/20150925/archive 首先,Json数据太常用,相信每一位开发者Json的解析都是必备的.我们要准备以下知识: JavaBean,枚举你需要的元素,用来存储数据. 异步加载网络内容的必备途径,多线程加载+AsyncTask两种方式. Jso

Android 自绘TextView解决提前换行问题,支持图文混排

先看下效果图: 上面是MTextView,下面是默认的TextView. 一.原因 用最简单的全英文句子为例,如果有一个很长的单词,这一行剩余的空间显示不下了,那么规则就是不打断单词,而是把整个单词丢到下一行开始显示.这样本来没有错.一是咱们中国人都是方块字,怎么都放得下,不存在英文的这个问题.所以不习惯那个排版.二是如果TextView里面有图片,如图,不知道判断单词的代码是怎么弄得,总之它觉得最后一个啦字和后面的一串表情应该是一个整体,不能分开,就一起丢到第二行了,也就造成了这种难看的排版.