二十二、图文混合排版

太过爱你忘了你带给我的痛 2022-07-17 03:21 161阅读 0赞

我们在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}跟对方回复或第三个是公司的股东会的双击回到电话电话单双色入获得获得

效果图：

![Center][]

问题：当图片很多时，加载会出现问题。

参考：

[https://github.com/nostra13/Android-Universal-Image-Loader/wiki/Quick-Setup][https_github.com_nostra13_Android-Universal-Image-Loader_wiki_Quick-Setup]

[http://www.jianshu.com/p/3a5b18c7861a][http_www.jianshu.com_p_3a5b18c7861a]

[Center]: /images/20220717/d3628844dd354c88bb0512f442b88cae.png
[https_github.com_nostra13_Android-Universal-Image-Loader_wiki_Quick-Setup]: https://github.com/nostra13/Android-Universal-Image-Loader/wiki/Quick-Setup
[http_www.jianshu.com_p_3a5b18c7861a]: http://www.jianshu.com/p/3a5b18c7861a