直播间聊天item图文混排思路
目录
1.版本需求
a.初版本
b.表情包版本
2.思路剖析
a.拼接格式
b.生成格式的操作
c.遍历所有文字，替换图片
d.网络图片的替换逻辑
e.本地图片的替换
f.本地图片快速存储到map
g.注意
先上设计图
1.版本需求
a.初版本
一开始，不需要展示聊天表情，就偷懒用textview展示html代码，前面搞几个图片控件，后面html的文字前面整几个空格，代码如下：
private String nullStrHtml = " ";
Html.fromHtml(nullStrHtml +
""
+ chatBean.getName()
+ "" + "" + " 关注了主播" + ""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 {
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 emojiMap = new HashMap();//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 emojiMap = new HashMap();//[可爱],emoji_1
//解析字符
private void ParseData(List 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 getEmojiFile(Context context) {
try {
List list = new ArrayList();
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);
}