直播间聊天item图文混排思路

最新推荐文章于 2022-06-06 10:56:18 发布

只管羊毛薅

最新推荐文章于 2022-06-06 10:56:18 发布

阅读量3.2k

点赞数 1

分类专栏：基础知识文章标签： android

本文链接：https://blog.csdn.net/qq_37321098/article/details/106682507

版权

基础知识专栏收录该内容

9 篇文章 0 订阅

订阅专栏

先上设计图

1.版本需求

a.初版本

一开始，不需要展示聊天表情，就偷懒用textview展示html代码，前面搞几个图片控件，后面html的文字前面整几个空格，代码如下：

private String nullStrHtml = "&nbsp;&nbsp;&nbsp;";

Html.fromHtml(nullStrHtml +
"<font color='" + getUserColor(chatBean.getUserColor()) + "'>" 
+ chatBean.getName() 
+ "</font>" + "<font color='#FFC152'>" + "&nbsp;关注了主播" + "</font>"

b.表情包版本

使用SpannableStringBuilder，动态替换指定位置的"特定字符"，替换成图片，当然也包括网络图片和本地图片。

SpannableStringBuilder用法1参考：https://blog.csdn.net/a214024475/article/details/53261122?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

SpannableStringBuilder用法2参考：https://blog.csdn.net/u013424496/article/details/51351541/

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();
    }
}

d.网络图片的替换逻辑

思路：通过Picasso拿到网络图片的bitmap，设置给ImageSpan

public class URLImageParser {

    private Context mContext;
    private TextView mTextView;
    private int mImageSize;

    /**
     *
     * @param textView 图文混排TextView
     * @param context
     * @param imageSize 图片显示高度
     */
    public URLImageParser(TextView textView, Context context, int imageSize) {
        mTextView = textView;
        mContext = context;
        mImageSize = imageSize;
    }

    public Drawable getDrawable(String url) {
        URLDrawable urlDrawable = new URLDrawable();
        new ImageGetterAsyncTask(mContext, url, urlDrawable).execute(mTextView);
        return urlDrawable;
    }

    public class ImageGetterAsyncTask extends AsyncTask<TextView, Void, Bitmap> {

        private URLDrawable urlDrawable;
        private Context context;
        private String source;
        private TextView textView;

        public ImageGetterAsyncTask(Context context, String source, URLDrawable urlDrawable) {
            this.context = context;
            this.source = source;
            this.urlDrawable = urlDrawable;
        }

        @Override
        protected Bitmap doInBackground(TextView... params) {
            textView = params[0];
            try {
                //下载网络图片，以下是使用Picasso和Glide获取网络图片例子，也可以其他方式下载网络图片

                // 使用Picasso获取网络图片Bitmap
                return Picasso.with(context).load(source).get();
                // 使用Glide获取网络图片Bitmap(使用Glide获取图片bitmap还有待研究)
//                return Glide.with(context).load(source).asBitmap().fitCenter().into(mImageSize * 3, mImageSize * 3).get();
            } catch (Exception e) {
                return null;
            }
        }

        @Override
        protected void onPostExecute(final Bitmap bitmap) {
            try {
                //获取图片宽高比
                float ratio = bitmap.getWidth() * 1.0f / bitmap.getHeight();
                Drawable bitmapDrawable = new BitmapDrawable(context.getResources(), bitmap);
                bitmapDrawable.setBounds(0, 0, (int) (mImageSize * ratio), mImageSize);
                //设置图片宽、高（这里传入的mImageSize为字体大小，所以，设置的高为字体大小，宽为按宽高比缩放）
                urlDrawable.setBounds(0, 0, (int) (mImageSize * ratio), mImageSize);
                urlDrawable.drawable = bitmapDrawable;
                //两次调用invalidate才会在异步加载完图片后，刷新图文混排TextView，显示出图片
                urlDrawable.invalidateSelf();
                textView.invalidate();
            } catch (Exception e) {
                /* Like a null bitmap, etc. */
            }
        }
    }

}

public class URLDrawable extends BitmapDrawable {
    
    protected Drawable drawable;
  
    @Override
    public void draw(Canvas canvas) {
        // override the draw to facilitate refresh function later
        if (drawable != null) {
            drawable.draw(canvas);
        }
    }
}

e.本地图片的替换

会把[房管][可爱]这些，事先存到到map中，存储格式为：

HashMap<String, String> emojiMap = new HashMap<String, String>();//key=[可爱]  value=emoji_1

上面的代码：matcher.group()得到的就是[可爱]，如果发现本地存储的map中有key为[可爱]，就拿到其drawable名emoji_1，

这图片是存储在drawable下的，通过如下代码拿到drawable的id：

int resId = mContext.getResources().getIdentifier(value, "drawable", mContext.getPackageName());

还有个方法就是：map存储格式为 key=[可爱] value=R.drawable.emoji_1，这样就可以直接拿到drawable了。

那么问题来了，怎么将本地图片快速存储到map中，当然这也一定是我们的准备工作

f.本地图片快速存储到map

先在assets在放置文件：

内容为：

emoji_0.png,[房管]
emoji_1.png,[可爱]
emoji_2.png,[笑脸]
emoji_3.png,[囧]
emoji_4.png,[生气]
emoji_5.png,[鬼脸]

然后我们一行一行的读，再保存到map中，这个相信大家应该都会。代码如下：

调用如下代码即可：

ParseData(getEmojiFile(context), context);

解析方法如下：

private HashMap<String, String> emojiMap = new HashMap<String, String>();//[可爱],emoji_1

//解析字符
    private void ParseData(List<String> data, Context context) {
        if (data == null) {
            return;
        }
        ChatEmoji emojEentry;
        try {
            //单行格式：emoji_1.png,[可爱]
            for (String str : data) {
                String[] text = str.split(",");
                String fileName = text[0].substring(0, text[0].lastIndexOf("."));
                emojiMap.put(text[1], fileName);
                Log.e("测试表情: ", "KEY=" + text[1] + "  VALUE=" + fileName +"  context.getPackageName()="+context.getPackageName());  
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    //从assest获取图片名
    public static List<String> getEmojiFile(Context context) {
        try {
            List<String> list = new ArrayList<String>();
            InputStream in = context.getResources().getAssets().open("emoji");
            BufferedReader br = new BufferedReader(new InputStreamReader(in, "UTF-8"));
            String str = null;
            while ((str = br.readLine()) != null) {
                list.add(str);
            }
            return list;
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }

g.注意

由于遍历SpannableStringBuilder，本身就耗时，所有我们聊天处，每处理一条消息，一定要定向的刷新，千万不能通过notifyDataSetChanged()做整体刷新，需要调用如下方法去添加和局部刷新数据：

//添加数据
public void addData(ChatBean data) {
        mList.add(data);
        notifyItemInserted(getItemCount());
        notifyItemRangeChanged(getItemCount(), 1);
}

只管羊毛薅

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
直播间聊天item图文混排思路

目录1.版本需求a.初版本b.表情包版本2.思路剖析a.拼接格式b.生成格式的操作c.遍历所有文字，替换图片d.网络图片的替换逻辑e.本地图片的替换f.本地图片快速存储到mapg.注意先上设计图1.版本需求a.初版本一开始，不需要展示聊天表情，就偷懒用textview展示html代码，前面搞几个图片控件，后面html的文字前面整几个空格，代码如下：private String nullStrHtml = "&nbsp;&n
复制链接

扫一扫

专栏目录