二十二、图文混合排版

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

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

相关文章推荐

TextView图文混合排版

  • 2016年04月27日 16:43
  • 6.31MB
  • 下载

【Visual C++】游戏开发五十五 浅墨DirectX教程二十二 水乳交融的美学:alpha混合技术

在这篇文章里面,我们一起非常详细地探讨了Direct3D中Alpha混合相关的内容。首先是认识了Alpha通道与混合技术,然后结识了融合因子,了解了融合运算方式和融合因子的取法,以及Alpha的三处来...
  • zhmxy555
  • zhmxy555
  • 2013年11月11日 00:08
  • 28582

【Android游戏开发二十二】(图文详解)游戏中灵活实现动画播放!简述J2me的游戏类库与Android游戏开发!

李华明Himi 原创,转载务必在明显处注明:转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/android-game/361.html 由于写书的缘故,博...

Java调用Zebra条码打印机打印条码、中英文数字条码混合标签,可自由控制格式和排版(2)

我在上一篇文章中介绍了Java调用条码打印机的相关方法,但是在实际生产环境中发现了一些问题,于是在此给出解决办法。 上一个Demo存在的一些问题包括: 1.打印浓度和宽度必须在打印机控制面板设置; 2...

Java调用Zebra条码打印机打印条码、中英文数字条码混合标签,可自由控制格式和排版

Java调用Zebra条码打印机打印条码、中英文数字条码混合标签,可自由控制格式和排版。...

图文排版

作为一个新手在写页面的时候该用什么样的样式布局出最好的效果往往需要纠结一番,今天编写页面的时候我就犯了一个大错,页面在PC端的效果图如下所示:在最初看到这个效果图的时候,我首先想到的就是利用三个左浮动...

表格、矩形、正方形、类微信图文【瀑布流排版】列表jQuery分页插件

表格、矩形、正方形、类微信图文列表jQuery插件

分享一个菜鸟级别的FMTextView 图文排版,支持两端对齐,自定义行高等

春晚又顺利的度过了,就在今天我才好不容易把UITableView的图文排版搞定,过着新年,顺便也写写东西,纪录一点成长。 通过阅读别人的代码,发现有些富文本插件好牛,也好复杂,当然直接拿来用也可以的,...
  • dangfm
  • dangfm
  • 2014年01月31日 10:23
  • 1517

如何用微信编辑器排版出美观的图文消息

更多:http://www.webyang.net/Html/web/article_148.html 很多时候看到图文并茂、错落有致、优雅无比的图文消息,大多数不会HTML代码的小编总会羡慕不已。...
  • ycdyx
  • ycdyx
  • 2015年07月05日 15:06
  • 2112

微信编辑器——构思编辑器教你如何学好图文排版

对于很多运营微信公众号的人来说,如何运营好一个微信号并且随着运营时间的推移,公众号内的粉丝增加量以及文章的阅读量成为了很多运营者最为关心的问题。每每看到很多运营账号的文章可以展现出很多图文并茂、排版整...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:二十二、图文混合排版
举报原因:
原因补充:

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