直播系统源码，直播间的弹幕图文怎么实现的

2.思路剖析
a.拼接格式
直播系统源码将所有网络图片url和本地图片中文名，用[]符号包裹，后面遍历SpannableStringBuilder的时候，去动态替换成ImageSpan，

同时每次append（文字内容）的时候，也去修改对应位置的字体颜色和大小等。

格式大致如下：[http://用户等级图标][http://主播等级图标][房管]小明：我发送了消息[可爱][生气]

b.生成格式的操作

//处理内容文字操作
SpannableStringBuilder sp = null;
String imgContent = "";
private String imgMargin = " ";//文字间的空格
//拼接用户等级
if (chatBean.getUserDjUrl() != null && !chatBean.getUserDjUrl().equals("")) {
       imgContent += "[" + chatBean.getUserDjUrl() + "]" + imgMargin;
}
if (hostDj != null && !hostDj.equals("")) {//拼接主播等级
       imgContent += "[" + hostDj + "]" + imgMargin;
}
if (isHostManager) {
       imgContent += "[房管]" + imgMargin;
}
//发送消息类型
if (chatBean.getType() == 1) {
            sp = new SpannableStringBuilder(imgContent);
            String nameTex ="小明：";
            sp.append(nameTex);
            //小明:文字替换颜色，将对应位置颜色修改
            sp.setSpan(new ForegroundColorSpan(Color.parseColor(getUserColor(chatBean.getUserColor()))),
                    imgContent.length(),
                    imgContent.length() + nameTex.length(),
                    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            imgContent += nameTex;
            //getCommentContent就是发送的消息，对应位置修改颜色
            sp.append(chatBean.getCommentContent());
            sp.setSpan(new ForegroundColorSpan(Color.parseColor(defaultUserColor)),
                    imgContent.length(),
                    imgContent.length() + chatBean.getCommentContent().length(),
                    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            imgContent += chatBean.getCommentContent();
        }
 
//图片替换
FaceConversionUtil.getInstace().getExpressionString(sp, tv, mContext, textSize);
//整体字体大小修改
sp.setSpan(new AbsoluteSizeSpan(textSize, true), 0, imgContent.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); 
//展示
tv.setText(sp, TextView.BufferType.SPANNABLE);

c.直播系统源码遍历所有文字，替换图片

private String zzStr = "\\[[^\\]]+\\]";
 
//得到一个SpanableString对象，通过传入的字符串,并进行正则判断
    public SpannableStringBuilder getExpressionString(SpannableStringBuilder sp, TextView tv, Context mContext, int textSize) {
        Pattern sinaPatten = Pattern.compile(zzStr, Pattern.CASE_INSENSITIVE);
        try {
            dealExpression(mContext, sp, sinaPatten, 0, tv, textSize);
        } catch (Exception e) {
            Log.e("dealExpression", e.getMessage());
        }
        return sp;
    }
 
//对spanableString进行正则判断，如果符合要求，则以表情图片代替
    private void dealExpression(Context mContext, SpannableStringBuilder sp, Pattern pattern, int start, TextView tv, int textSize) throws Exception {
        Matcher matcher = pattern.matcher(sp);
        while (matcher.find()) {
            // 返回第一个字符的索引的文本匹配整个正则表达式,ture 则继续递归
            if (matcher.start() < start) {
                continue;
            }
            CenterAlignImageSpan imageSpan;
            String group = matcher.group();
            if (group.contains("http")) {
                String url = group.substring(1, group.length() - 1);//获取图片url（去掉'['和']'）
                Drawable drawableFromNet = new URLImageParser(tv, mContext, DensityUtil.dip2px(mContext, textSize)).getDrawable(url);//异步获取网络图片
                drawableFromNet.setBound(.....);
                imageSpan = new CenterAlignImageSpan(drawableFromNet);
                sp.setSpan(imageSpan, matcher.start(), matcher.end(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            } else {
                //本地图片
                Log.e("测试表情: ", "group=" + group);
                if (emojiMap.containsKey(group) && !emojiMap.get(group).equals("")) {
                    String value = emojiMap.get(group);
                    int resId = mContext.getResources().getIdentifier(value, "drawable", mContext.getPackageName());//生成图片资源id
                    if (resId != 0) {
                        Bitmap bitmap = BitmapFactory.decodeResource(mContext.getResources(), resId);
                        bitmap = Bitmap.createScaledBitmap(bitmap, DensityUtil.dip2px(mContext,36),DensityUtil.dip2px(mContext,36), true);
                        imageSpan = new CenterAlignImageSpan(bitmap);// 通过图片资源id来得到bitmap，用一个ImageSpan来包装   fixme 图片对齐方式
                        int end = matcher.start() + group.length();// 计算该图片名字的长度，也就是要替换的字符串的长度
                        // 将该图片替换字符串中规定的位置中
                        sp.setSpan(imageSpan, matcher.start(), end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                        if (end < sp.length()) {
                            // 如果整个字符串还未验证完，则继续。。
                            dealExpression(mContext, sp, pattern, end, tv, textSize);
                        }
                        break;
                    }
                }
            }
        }
    }

注意：上方网络图片加载代码片段有句：drawableFromNet.setBound(.....);这个一定要有！！！因为网络图片是异步加载，要提前通过setBound()确定一个矩形空间去占位，去展示图片。

注意上方的private String zzStr = "\\[[^\\]]+\\]"，会去匹配[可爱][http://主播等级图标]，然后用CenterAlignImageSpan去展示，CenterAlignImageSpan是自定义的，处理的图片居中显示的逻辑，如果直播系统源码用自带的ImageSpan，其第二个参数也可以设置对其方式（比如：ImageSpanImageSpan.ALIGN_BASELINE）

CenterAlignImageSpan代码如下：

public class CenterAlignImageSpan extends ImageSpan {
 
    public CenterAlignImageSpan(Drawable drawable) {
        super(drawable);
 
    }
 
    public CenterAlignImageSpan(Bitmap b) {
        super(b);
    }
 
    @Override
    public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom,
                     @NonNull Paint paint) {
        Drawable b = getDrawable();
        Paint.FontMetricsInt fm = paint.getFontMetricsInt();
        int transY = (y + fm.descent + y + fm.ascent) / 2 - b.getBounds().bottom / 2;//计算y方向的位移
        canvas.save();
        canvas.translate(x, transY);//绘制图片位移一段距离
        b.draw(canvas);
        canvas.restore();
    }
}

————————————————
声明：本文由云豹科技转发自只管羊毛薅博客，如有侵权请联系作者删除​