二十二、图文混合排版

原创 2016年08月29日 16:32:47

我们在APP上看的帖子,有文字又有图片,经过我个人分析,应该就是通过图文混合排版实现的,主要用到的类就是SpannableStringBuilder。

在帖子中显示的图片,保存在服务器时,就是一个链接地址,为了便于我们在文章中把图片链接地址找出来,我们规定图片链接的格式是:{image=链接地址},这样我们就可以通过正则表达式找出图片链接和图片的位置,然后替换成图片插入到文章中。


一、使用正则表达式

String pattern = "\\{image=.*?\\}"; // 最小匹配
Pattern r = Pattern.compile(pattern);
Matcher m = r.matcher(postInfo.content);
while(m.find()) {
    final String url = m.group();
    /*
       其他逻辑
    */
 }
一开始我的正则表达式是:

{image=.*?}
一直测试都通不过,不能获取到正常的字符串,后来经过群里的热心网友指点,才发现需要对中括号做转义,因为中括号在正则表达式里有特殊含义,加了两个反斜杠解决问题。


二、链接替换成图片

先把代码贴出:

SpannableStringBuilder ssb = new SpannableStringBuilder(postInfo.content);
String pattern = "\\{image=.*?\\}"; 
Pattern r = Pattern.compile(pattern);
Matcher m = r.matcher(postInfo.content);
while(m.find()) {
    final String url = m.group();    // ---------------1
    final String urlFinal = getImageUrl(url);   // ---------------2

    ssb.setSpan(new DynamicDrawableSpan() {
        @Override
        public Drawable getDrawable() {
            final UrlDrawable drawable = new UrlDrawable();  // ---------------3
            ImageLoader.getInstance().loadImage(urlFinal, new SimpleImageLoadingListener() {
                @Override
                public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
                    drawable.bitmap = loadedImage;  // ---------------4
                    drawable.setBounds(0, 0, loadedImage.getWidth(), loadedImage.getHeight());
                    textView.invalidate();
                    textView.setText(textView.getText());
                }
            });
            return drawable;
        }
    }, m.start(), m.end(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
}
textView.setText(ssb);
在1处,利用正则表达式获取到链接

{image=http://img2.imgtn.bdimg.com/it/u=3883416401,3783004807&fm=21&gp=0.jpg}
再在2处自己写的方法拿出图片链接

http://img2.imgtn.bdimg.com/it/u=3883416401,3783004807&fm=21&gp=0.jpg
在3的地方是我们自定义的一个类:

public class UrlDrawable extends BitmapDrawable {
    Bitmap bitmap;

    @Override
    public void draw(Canvas canvas) {
        if(bitmap != null){
            canvas.drawBitmap(bitmap, 0, 0, getPaint());
        }
    }
}
当从网络获取到图片后,重绘图片。

然后利用ImageLoader异步从网络获取图片。4的地方获取到图片后,刷新图片出来。

文章内容是:

是公司公司的发货多喝点大会堂的很简单dsfgs多喝点大会堂的很简单dsfgs多喝点大会堂的很简单dsfgs多喝点大会堂的很简单dsfgs多喝点大会堂的很简单dsfgs高东方风格和发动机45641515回家过{image=http://img2.imgtn.bdimg.com/it/u=3883416401,3783004807&fm=21&gp=0.jpg}跟对方回复或第三个是公司的股东会的双击回到电话电话单双色入获得获得

效果图:

问题:当图片很多时,加载会出现问题。


参考:

https://github.com/nostra13/Android-Universal-Image-Loader/wiki/Quick-Setup

http://www.jianshu.com/p/3a5b18c7861a

版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

二十二、图文混合排版

我们在APP上看的帖子,有文字又有图片,经过我个人分析,应该就是通过图文混合排版实现的,主要用到的类就是SpannableStringBuilder。 在帖子中显示的图片,保存在服务器时,就是一个链接...

Coco2dx 图文混排 (二) 文字缓存

我们使用CCRenderTexture来缓存文字,这样文字的渲染效率要高一些 这里就需要用到CCSpriteBatchNode来绘制大量的CCSprite 这样的绘制有个人好处就是不用切换纹理,众...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

Unity UGUI图文混排源码(二)

为了方便整理,申请了一个专栏,链接:Unity UGUI图文混排专栏

iOS使用textView图文混排 -- 二

这一种方法是使用CoreText。实现下图效果的更简单便捷的时还有可以直接设置文字的环绕方式。      iOS sdk中为我们提供了一套完善的文字排版开发组件:CoreText...

图文混排

using UnityEngine; using System.Collections; using System.Collections.Generic;using System.Text.Regu...

图文混排

local ImgTextControl = class(ImgTextControl,function() return cc.Node:create() end) TextHAlignment =...

图文混排

图文混排

图文混排

我知道的有两种方法可以实现图文混排,一种是UIWebView实现,一种是用coreText实现 第一、使用UIWebView实现图文混排 1、创建两个视图控制器vc1和vc2,并且分别添加一个UI...

图文混排

github 的demon如下: https://github.com/CoderMaDongJun/RichText

图文混排

首先导入所需的库CoreText import UIKitclass ViewController: UIViewController { @IBOutlet weak var textLab...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)