Android 详解实现TextView加载带图片标签的Html并按比例缩放

来源:互联网 发布:腾讯视频上传网络异常 编辑:程序博客网 时间:2024/03/29 20:36
    最近在做商城类项目,有这样一个需求:商品详情里边有一个商品描述,这个字段最初设计的是用来显示一段描述文字,做完以后设计说需要支持图文的详情,没办法改吧~谁让咱是程序猿呢,很自然的就想到TextView加载Html标签,加载不带图片的Html片段很简单只要setText(Html.fromHtml(...))就可以了,仔细看了下源码
/**     * Returns displayable styled text from the provided HTML string.     * Any <img> tags in the HTML will display as a generic     * replacement image which your program can then go through and     * replace with real images.     *     * <p>This uses TagSoup to handle real HTML, including all of the brokenness found in the wild.     */    public static Spanned fromHtml(String source) {        return fromHtml(source, null, null);    }
大概意思就是说此方法根据提供的Html返回一个带样式的字符串,然而所有的<img>标签将被显示成一个通用的图形,你可以在你的程序中替换为真正的图片,这不是扯呢吗?那是难倒服务器还单独把图片传过来?这显然不行啊,而且这个方法的实现是在
fromHtml(source, null, null);
中,进去接着看
/**     * Returns displayable styled text from the provided HTML string.     * Any <img> tags in the HTML will use the specified ImageGetter     * to request a representation of the image (use null if you don't     * want this) and the specified TagHandler to handle unknown tags     * (specify null if you don't want this).     *     * <p>This uses TagSoup to handle real HTML, including all of the brokenness found in the wild.     */    public static Spanned fromHtml(String source, ImageGetter imageGetter,                                   TagHandler tagHandler) {        Parser parser = new Parser();        try {            parser.setProperty(Parser.schemaProperty, HtmlParser.schema);        } catch (org.xml.sax.SAXNotRecognizedException e) {            // Should not happen.            throw new RuntimeException(e);        } catch (org.xml.sax.SAXNotSupportedException e) {            // Should not happen.            throw new RuntimeException(e);        }        HtmlToSpannedConverter converter =                new HtmlToSpannedConverter(source, imageGetter, tagHandler,                        parser);        return converter.convert();    }

跟上边一个参数的方法差不多,重点是这一句Returns displayable styled text from the provided HTML string. Any <img> tags in the HTML will use the specified ImageGetter to request a representation of the image (use null if you don't want this) and the specified TagHandler to handle unknown tags (specify null if you don't want this).大概意思是说任何<img>标签将使用指定的ImageGetter请求图像的表示,看完这个就感觉有点意思了,接着看

/**     * Retrieves images for HTML <img> tags.     */    public static interface ImageGetter {        /**         * This methos is called when the HTML parser encounters an         * <img> tag.  The <code>source</code> argument is the         * string from the "src" attribute; the return value should be         * a Drawable representation of the image or <code>null</code>         * for a generic replacement image.  Make sure you call         * setBounds() on your Drawable if it doesn't already have         * its bounds set.         */        public Drawable getDrawable(String source);    }
这是一个接口,需要我们自己实现,接口里边的方法是当HTML解释遇到 <img>标签时候会调用,参数source就是<img>中的src,也就是图片的路径了,好了到这里已经有点眉目了,前边不是说让用真实图片替换那个通用的图形嘛,这下有路径了,再看返回参数Drawable,好说啊,从一个网络地址获取Drawable没有直接方法,不过从一个流有啊,

/**     * Create a drawable from an inputstream     */    public static Drawable createFromStream(InputStream is, String srcName) {        Trace.traceBegin(Trace.TRACE_TAG_RESOURCES, srcName != null ? srcName : "Unknown drawable");        try {            return createFromResourceStream(null, null, is, srcName);        } finally {            Trace.traceEnd(Trace.TRACE_TAG_RESOURCES);        }    }
封装个方法以便以后使用(封装真的很重要)

Drawable getImageFromNetwork(String imageUrl) {        URL myFileUrl = null;        Drawable drawable = null;        try {            myFileUrl = new URL(imageUrl);        } catch (MalformedURLException e) {            e.printStackTrace();        }        try {            HttpURLConnection conn = (HttpURLConnection) myFileUrl                    .openConnection();            conn.setDoInput(true);            conn.connect();            InputStream is = conn.getInputStream();            drawable = Drawable.createFromStream(is, null);            is.close();        } catch (IOException e) {            e.printStackTrace();        }        return drawable;    }
好了,既然是读取网络上的图片就要考虑异步加载了,Android API > 9 (Honeycomb及之后)版本里,对UI线程/主线程里是不允许联网操作的,如果有网络操作,会抛出NetworkOnMainThreadException的异常,解决办法很简单,另起一个线程就可以了
new Thread(new Runnable() {            Message msg = Message.obtain();            @Override            public void run() {                Html.ImageGetter imageGetter=new Html.ImageGetter() {                    @Override                    public Drawable getDrawable(String source) {                        Drawable drawable =getImageFromNetwork(source);                        drawable.setBounds(0,0,drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());                        return drawable;                    }                };                CharSequence charSequence = Html.fromHtml(html, imageGetter, null);                msg.what = 0x101;                msg.obj = charSequence;                mHandler.sendMessage(msg);            }        }).start();
在线程里边加载html并通过imageGetter把解析出来的src转成Drawable,并把CharSequence传出去,写到这基本上功能就实现了,运行一下,图片也出来了

然而这是个虾米啊。。图片怎么辣么一丢丢,这特么怎么看,一万只草泥马在奔腾,接着改吧,既然小那就放大放大放大~~

刚才实现的ImageGetter里边不是有setBounds嘛,改一下宽高就行了,

 int screenWidth = getWindowManager().getDefaultDisplay().getWidth(); // 屏幕宽(像素,如:480px)     int screenHeight = getWindowManager().getDefaultDisplay().getHeight(); // 屏幕高(像素,     Log.e("getDefaultDisplay", "screenWidth=" + screenWidth + "; screenHeight=" + screenHeight);     int w=screenWidth/2;     int h=w/(drawable.getIntrinsicWidth()/drawable.getIntrinsicHeight());     drawable.setBounds(0,0,w,h);

宽取屏幕一半,高按原图比例缩放,到次才算大功告成,有什么不对的地方还请路过大神指导~

源码下载



2 0
原创粉丝点击