天天看点

简单的图文混排功能

实现原理:自定义一个GraphTextLayout继承LinearLayout,跟后台约定一个图片标签(如<’img src=”xxxx.jpg”/>),然后GraphTextLayout对外开放一个方法接收显示的文字用正则去匹配图片标签,通过截取字符串来动态添加TextView显示文字,ImageView显示图片。

主要代码如下:

private String mRegEx_img = “<.img[^>]+src\s*=\s*‘\”[‘\”][^>]*>”;(因为显示问题,img标签前多加了个“.”,拷贝后可以去掉)

private List<.MessgeItem> mItemList = new ArrayList<>();

(因为显示问题,MessgeItem前多加了个“.”,拷贝后可以去掉)

private void initMessageData(String message){
    String tmpStr = message;
    Pattern p_image = Pattern.compile(mRegEx_img);
    Matcher m_image = p_image.matcher(tmpStr);
    while (m_image.find()) {
        //第一个匹配到的图片标签
        String imgStr = m_image.group(0);
        int index = tmpStr.indexOf(imgStr);
        if (index!=0) {
            //如果图片不在最前面,就截取图片标签的文字并添加到list中
            String textContent = tmpStr.substring(0,index);
            addMessageItem(textContent, true);
        }
        //读取图片标签中的url并添加到list中
        String url = imgStr.substring(10, imgStr.length()-2);
        addMessageItem(url, false);

        //将tmpStr截取掉第一个图片标签及之前的文字,进行下次循环截取
        tmpStr = tmpStr.substring(imgStr.length()+index, tmpStr.length());
    }
    //如果循环查询图片标签结束,tmpStr还有内容说明是剩余纯文字,将文字添加到list中
    if (!TextUtils.isEmpty(tmpStr)){
        addMessageItem(tmpStr, true);
    }
}

public void addMessageItem(String content, boolean isText){
    MessageItem item = new MessageItem();
    item.content = content;
    item.isText = isText;
    mItemList.add(item);
}

class MessageItem{
    public boolean isText;
    public String content;

/**
 * 添加TextView和ImageView
 */
private void addViewToLayout(){
    for (MessageItem item : mItemList){
        if (item.isText){
            addTextView(mLayout,item.content);
        }else {
            addImageView(mLayout, item.content);
        }
    }
}