天天育儿网 > 直播间聊天item图文混排思路

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

时间：2020-05-12 03:15:00

相关推荐

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

1.版本需求

a.初版本

b.表情包版本

2.思路剖析

a.拼接格式

b.生成格式的操作

c.遍历所有文字，替换图片

d.网络图片的替换逻辑

e.本地图片的替换

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

g.注意

先上设计图

1.版本需求

a.初版本

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

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

b.表情包版本

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

SpannableStringBuilder用法1参考：/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参考：/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 = pile(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());//生成图片资源idif (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);}@Overridepublic 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;}@Overrideprotected Bitmap doInBackground(TextView... params) {textView = params[0];try {//下载网络图片，以下是使用Picasso和Glide获取网络图片例子，也可以其他方式下载网络图片// 使用Picasso获取网络图片Bitmapreturn 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;}}@Overrideprotected 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;@Overridepublic void draw(Canvas canvas) {// override the draw to facilitate refresh function laterif (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;}