高仿B站自定义表情

在之前的文章给你的 Android App 添加自定义表情
中我们介绍了自定义表情的原理，没看过的建议看一下。这一篇文章将介绍它的应用，这里以B站的自定义表情面板为例，效果如下：

自定义表情的大小

在给你的 Android App 添加自定义表情

的文章中，我们说过当我们写死表情的大小时，文字的 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的使用

总结

核心部分的代码已经介绍了，完整代码还在整理，后面放出来。最后求一个免费的赞吧🥺