二十二、图文混合排版

原创 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

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

Bootstrap:常用的排版风格

-强调相关的类在Bootstrap中除了使用标签`、`等说明正文某些字词、句子的重要性,Bootstrap还定义了一套类名,这里称其为强调类名(类似前面说的“.lead”),这些强调类都是通过颜色来表...
  • sinat_21326585
  • sinat_21326585
  • 2016年03月18日 16:03
  • 787

Latex排版全解

Latex排版全解 http://www.cnblogs.com/jingwhale/p/4250296.html   LATEX(英语发音:/ˈleɪtɛk/ LAY-tek...
  • zdy0_2004
  • zdy0_2004
  • 2015年01月26日 21:00
  • 2889

TextView和Editext里面的ImageSpan居中对齐

做论坛或者空间的时候会有表情之类的,但发现表情嵌入到TextView里面不居中对齐了。 有时候的需求是要居中对齐的,特别是表情这样的小图。刚开始一直看textview的代码,看能不能做下手脚,单找了...
  • u013171787
  • u013171787
  • 2015年12月13日 17:41
  • 303

CSS基础学习十九:CSS布局之图文混排,图像签名,多图拼接和图片特效

学习了CSS布局的定位和浮动,我们可以简单地做出很多排版和内容拼接。今天就来做几个简单的实例展示现在 流行的DIV+CSS布局的方便好用之处。顺便也说一下CSS3新增的样式属性box-shadow和...
  • erlian1992
  • erlian1992
  • 2015年12月04日 18:11
  • 8213

Android文本排版实现

在项目中有一个小功能需要实现,就是对多行文本进行排版布局,每一行的内容又分为两部分,左边为标题,右边为描述,左边内容长度不确定,右边的内容需要对齐,如有换行也需要对齐右边的文本。效果图       效...
  • xueshanhaizi
  • xueshanhaizi
  • 2016年04月18日 16:18
  • 3638

cocos2dx图文混排(三)

有了文字渲染 那么图片渲染是很简单的(是个人都知道拉 CCSprite* S = CCSprite::createWidthSpriteFrame(FrameName) ); 那么我们只要创建一个...
  • whbzealot
  • whbzealot
  • 2014年01月11日 14:29
  • 1357

Html5+Css3实现简单表格排版

1.html5实现初步布局 CS 142 Project 1, Problem 1 --> --> Item Manufacturer Size Unit Price Qua...
  • isGt93
  • isGt93
  • 2015年10月02日 17:42
  • 621

Egret图文混排

Egret图文混排
  • Egret_or_Unity
  • Egret_or_Unity
  • 2017年04月05日 14:15
  • 1528

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

前段时间做了一个Android会议管理系统,项目需求涉及到EditText的图文混排,如图: 在上图的”会议详情”中,需要支持文本和图片的混合插入,下图演示输入的示例: 当会议创建完成以后,保...
  • LeoLeoHan
  • LeoLeoHan
  • 2016年01月01日 17:33
  • 8531

算法导论(二十二)——图的基本算法

作者:disappearedgod 文章出处:http://blog.csdn.net/disappearedgod/article/details/32337799 时间:2014-6-25...
  • disappearedgod
  • disappearedgod
  • 2014年06月25日 00:09
  • 707
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:二十二、图文混合排版
举报原因:
原因补充:

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