如何在Android的TextView或EditText中添加动态表情符号

Question

关于这个问题，我使用ImageSpan将图片添加到TextView中，但是它无法进行动画。你有什么建议吗？
我尝试扩展AnimationDrawable将drawable添加到ImageSpan中，但是它没有起作用。

public class EmoticonDrawalbe extends AnimationDrawable {
    private Bitmap bitmap;
    private GifDecode decode;
    private int gifCount;

    public EmoticonDrawalbe(Context context, String source) {
        decode = new GifDecode();
        decode.read(context, source);
        gifCount = decode.getFrameCount();
        if (gifCount <= 0) {
            return;
        }
        for (int i = 0; i < gifCount; i++) {
            bitmap = decode.getFrame(i);
            addFrame(new BitmapDrawable(bitmap), decode.getDelay(i));
        }
        setOneShot(false);
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        start();
    }
}

- Stay

Answer 1

我会尝试以下两种方法中的一种：

• 将动画图片（可能是一个.gif文件？）拆分为单独的帧并将其组合成AnimationDrawable，然后将其传递给ImageSpan的构造函数。
• 子类化ImageSpan并覆盖onDraw()方法，以添加自己的逻辑来绘制不同的帧，基于某种计时器。有一个API演示，说明了如何使用Movie类加载一个动画gif，这可能值得一看。

大修改： 好的，抱歉没有早点回复，但我不得不抽出一些时间来自己调查一下这个问题。由于我可能需要在未来的项目中使用这个解决方案之一，所以我已经试过了。不幸的是，我遇到了使用AnimationDrawable时的类似问题，这似乎是由DynamicDrawableSpan（ImageSpan的间接超类）使用的缓存机制引起的。

对我来说另一个问题是，似乎没有一种简单的方法来使Drawable或ImageSpan无效。Drawable实际上具有invalidateDrawable(Drawable)和invalidateSelf()方法，但在我的情况下，第一个没有任何效果，而后者仅在附加了一些神奇的Drawable.Callback时起作用。我找不到任何关于如何使用它的合适文档...

因此，我向上推进逻辑树以解决问题。我要提前警告这可能不是最优解决方案，但现在它是唯一一个我能够让它工作的方案。您可能不会遇到问题，如果您偶尔使用我的解决方案，但我绝对会避免用表情符号填满整个屏幕。我不确定会发生什么，但再说一次，我可能不想知道。

废话不多说，这里是代码。我添加了一些注释，使其自我解释。我很可能使用了不同的Gif解码类/库，但它应该可以与任何存在的解码器一起使用。

AnimatedGifDrawable.java

public class AnimatedGifDrawable extends AnimationDrawable {

    private int mCurrentIndex = 0;
    private UpdateListener mListener;

    public AnimatedGifDrawable(InputStream source, UpdateListener listener) {
        mListener = listener;
        GifDecoder decoder = new GifDecoder();
        decoder.read(source);

        // Iterate through the gif frames, add each as animation frame
        for (int i = 0; i < decoder.getFrameCount(); i++) {
            Bitmap bitmap = decoder.getFrame(i);
            BitmapDrawable drawable = new BitmapDrawable(bitmap);
            // Explicitly set the bounds in order for the frames to display
            drawable.setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());
            addFrame(drawable, decoder.getDelay(i));
            if (i == 0) {
                // Also set the bounds for this container drawable
                setBounds(0, 0, bitmap.getWidth(), bitmap.getHeight());
            }
        }
    }

    /**
     * Naive method to proceed to next frame. Also notifies listener.
     */
    public void nextFrame() {
        mCurrentIndex = (mCurrentIndex + 1) % getNumberOfFrames();
        if (mListener != null) mListener.update();
    }

    /**
     * Return display duration for current frame
     */
    public int getFrameDuration() {
        return getDuration(mCurrentIndex);
    }

    /**
     * Return drawable for current frame
     */
    public Drawable getDrawable() {
        return getFrame(mCurrentIndex);
    }

    /**
     * Interface to notify listener to update/redraw 
     * Can't figure out how to invalidate the drawable (or span in which it sits) itself to force redraw
     */
    public interface UpdateListener {
        void update();
    }

}

AnimatedImageSpan.java

public class AnimatedImageSpan extends DynamicDrawableSpan {

    private Drawable mDrawable;

    public AnimatedImageSpan(Drawable d) {
        super();
        mDrawable = d;
        // Use handler for 'ticks' to proceed to next frame 
        final Handler mHandler = new Handler();
        mHandler.post(new Runnable() {
            public void run() {
                ((AnimatedGifDrawable)mDrawable).nextFrame();
                // Set next with a delay depending on the duration for this frame 
                mHandler.postDelayed(this, ((AnimatedGifDrawable)mDrawable).getFrameDuration());
            }
        });
    }

    /*
     * Return current frame from animated drawable. Also acts as replacement for super.getCachedDrawable(),
     * since we can't cache the 'image' of an animated image.
     */
    @Override
    public Drawable getDrawable() {
        return ((AnimatedGifDrawable)mDrawable).getDrawable();
    }

    /*
     * Copy-paste of super.getSize(...) but use getDrawable() to get the image/frame to calculate the size,
     * in stead of the cached drawable.
     */
    @Override
    public int getSize(Paint paint, CharSequence text, int start, int end, Paint.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;
    }

    /*
     * Copy-paste of super.draw(...) but use getDrawable() to get the image/frame to draw, in stead of
     * the cached drawable.
     */
    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
        Drawable b = getDrawable();
        canvas.save();

        int transY = bottom - b.getBounds().bottom;
        if (mVerticalAlignment == ALIGN_BASELINE) {
            transY -= paint.getFontMetricsInt().descent;
        }

        canvas.translate(x, transY);
        b.draw(canvas);
        canvas.restore();

    }

}

使用方法：

final TextView gifTextView = (TextView) findViewById(R.id.gif_textview);
SpannableStringBuilder sb = new SpannableStringBuilder();
sb.append("Text followed by animated gif: ");
String dummyText = "dummy";
sb.append(dummyText);
sb.setSpan(new AnimatedImageSpan(new AnimatedGifDrawable(getAssets().open("agif.gif"), new AnimatedGifDrawable.UpdateListener() {   
    @Override
    public void update() {
        gifTextView.postInvalidate();
    }
})), sb.length() - dummyText.length(), sb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
gifTextView.setText(sb);

如您所见，我使用了Handler来提供“ticks”以推进到下一帧。这样做的好处是仅在应该呈现新帧时才会触发更新。实际的重绘由包含AnimatedImageSpan的TextView进行。同时，缺点是每当在同一TextView（或多个）中有一堆动画gif时，视图可能会不断更新......明智使用它。

- MH.

---

抱歉，我可能暂时脑子短路了。我本意是写“AnimationDrawable”。我已经在我的回答中进行了更正。 - MH.

我也修正了我的问题，你可以看到我扩展了AnimationDrawable，但它不起作用。 - Stay

好的，我有一些时间自己去看了一下。请在我的更新答案中找到结果 - 希望能帮到你！ - MH.

有任何需要清理的吗？我认为这可能会泄漏？ - Rafael Sanches

很好的回答。我只发现了一个问题 - 文字底部的跨度对齐线。正在寻找解决方法... - Roman Truba

Answer 2

你可以使用 ObjectAnimator 来对 ImageSpan 中的 drawable 进行动画处理。

http://developer.android.com/reference/android/animation/ObjectAnimator.html

- Rajdeep Dua

---

很酷，我之前没有注意到这个类。看起来很有趣，尽管它只支持从API Level 11开始。 - MH.

谢谢您的建议，我会尝试的。 - Stay

请问您能否提供一个例子？谢谢！ - shiami