在之前的文章给你的 Android App 添加自定义表情 中我们介绍了自定义表情的原理，没看过的建议看一下。这一篇文章将介绍它的应用，这里以B站的自定义表情面板为例，效果如下：
自定义表情的大小
的文章中，我们说过当我们写死表情的大小时，文字的 textSize 变大变小时都会有一点问题。
文字大于图片大小时，在多行的情况下，只有表情的行间距明显小于其他行的间距。如图：
为什么会出现这种情况呢？如下图所示，我在top, ascent, baseline, descent, bottom的位置标注了辅助线。
可以很清晰的看到，在只有表情的情况下，top, ascent, descent, bottom的位置有明显的问题。原因是 DynamicDrawableSpan 的 getSize 方法里面对 FontMetricsInt 进行了修改。解决的方式很简单，就是注释掉修改代码就行，代码如下。修改后，效果如下图所示。
@Override
public int getSize(@NonNull Paint paint, CharSequence text, int start, int end, @Nullable FontMetricsInt fm) {
Drawable d = getDrawable();
Rect rect = d.getBounds();
//
// if (fm != null) {
// fm.ascent = -rect.bottom;
// fm.descent = 0;
//
// fm.top = fm.ascent;
// fm.bottom = 0;
// }
return rect.right;
}
不知道你还记不记得，我们说过getSize 的返回值是表情的宽度。上面的注释代码其实是设置了表情的高度，如果文本的大小少于表情时，就会显示不全，如下图所示：
那这种情况下，应该怎么办？这里不卖关子了，最终代码如下。解决方式非常简单就是分情况来判断。当文本的高度小于表情的高度时，设置 fm 的top, ascent, descent, bottom的值，让行的高度变大的同时让大的 emoji 图片居中。
@Override
public int getSize(@NonNull Paint paint, CharSequence text, int start, int end, @Nullable FontMetricsInt fm) {
Drawable d = getDrawable();
Rect rect = d.getBounds();
float drawableHeight = rect.height();
Paint.FontMetrics paintFm = paint.getFontMetrics();
if (fm != null) {
int textHeight = fm.bottom - fm.top;
if(textHeight <= drawableHeight) {//当文本的高度小于表情的高度时
//解决文字的大小小于图片大小的情况
float textCenter = (paintFm.descent + paintFm.ascent) / 2;
fm.ascent = fm.top = (int) (textCenter - drawableHeight / 2);
fm.descent = fm.bottom = (int) (textCenter + drawableHeight / 2);
}
}
return rect.right;
}
当然，你可能发现了，B站的 emoji 表情好像不是居中的。如下图所示，B站对 emoji 表情的处理类似基于 baseline 对齐。
上面最难理解的居中已经介绍，对于其他方式比如 baseline 和 bottom 就简单了。完整代码如下：
@Override
public int getSize(@NonNull Paint paint, CharSequence text, int start, int end, @Nullable FontMetricsInt fm) {
Drawable d = getDrawable();
if(d == null) {
return 48;
}
Rect rect = d.getBounds();
float drawableHeight = rect.height();
Paint.FontMetrics paintFm = paint.getFontMetrics();
if (fm != null) {
if (mVerticalAlignment == ALIGN_BASELINE) {
fm.ascent = fm.top = (int) (paintFm.bottom - drawableHeight);
fm.bottom = (int) (paintFm.bottom);
fm.descent = (int) paintFm.descent;
} else if(mVerticalAlignment == ALIGN_BOTTOM) {
fm.ascent = fm.top = (int) (paintFm.bottom - drawableHeight);
fm.bottom = (int) (paintFm.bottom);
fm.descent = (int) paintFm.descent;
} else if (mVerticalAlignment == ALIGN_CENTER) {
int textHeight = fm.bottom - fm.top;
if(textHeight <= rect.height()) {
float textCenter = (paintFm.descent + paintFm.ascent) / 2;
fm.ascent = fm.top = (int) (textCenter - drawableHeight / 2);
fm.descent = fm.bottom = (int) (textCenter + drawableHeight / 2);
}
}
}
return rect.right;
}
动态表情
动态表情实际上就是 gif 图。我们可以使用 android-gif-drawable 来实现。在 build.gradle 中增加依赖：
dependencies {
...
implementation 'pl.droidsonroids.gif:android-gif-drawable:1.2.25'
}
然后在我们创建自定义 ImageSpan 的时候传入参数就可以了：
val size = 192
val gifFromResource = GifDrawable(getResources(), gifData.drawableResource)
gifFromResource.stop()
gifFromResource.setBounds(0,0, size, size)
val content = mBinding.editContent.text as SpannableStringBuilder
val stringBuilder = SpannableStringBuilder(gifData.text)
stringBuilder.setSpan(BilibiliEmojiSpan(gifFromResource, ALIGN_BASELINE),
0, stringBuilder.length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
关于 android-gif-drawable 更具体用法可以看 Android加载Gif动画android-gif-drawable的使用
总结
核心部分的代码已经介绍了，完整代码还在整理，后面放出来。最后求一个免费的赞吧🥺
作者：小墙程序员
链接：https://juejin.cn/post/7196592276159823931
网友评论