Android-支持动态表情、文字混排MixTextView
1.前言
我们知道Textview能够支持显示静态图，但是能不能支持gif动态图了，如动态表情了。
原生的TextView目前暂不支持gif动图，我们通过自定义TextView，让其支持动态表情和文字混排，这就是我们要讲的MixTextView，我们先来看看效果图，再看具体的实现：
MixTextView动态表情效果图
2.动态表情编码
每一个gif动态表情都有一个特定的编码和path，如微笑的编码是：[微笑]，path是smile.gif，通过EmotionString我们会将微笑的编码解析成动态表情。
我们在emotion工程的assets目录下面放置了五个动态表情，编码分别是：[微笑], [笑cry], [流汗], [阴险], [色]。
object EmotionConst {
val EMOTION_CODE: Array<String> = arrayOf("[微笑]", "[笑cry]", "[流汗]", "[阴险]", "[色]")
val EMOTION_PATH: Array<String> = arrayOf(
"smile.gif", "tearsofjoy.gif", "sweat.gif", "sinister.gif",
"heart_eyes.gif"
)
val MAX_PROXY_DRAWABLE_SIZE: Int = 1000
val NORMAL_EMOTION_BITMAP_WIDTH_MIDDIP = 24//中屏手机对应的手机像素高度
}
3.动态表情预加载
动态表情的预加载主要是通过EmotionPool实现的，里面用到Glide库，我们会将每个gif表情解析成GifDrawable，然后存在一个HashMap，key是该动态表情对应path，value对应的是GifDrawable。动态表情的预加载的代码如下：
/**
* 动态表情预加载
*/
fun loadGifEmotions(context: Context) {
for (itemPath in EmotionConst.EMOTION_PATH) {
loadSingleGifEmotion(context, itemPath, null)
}
}
/**
* 加载单个动态表情
*/
fun loadSingleGifEmotion(context: Context, emotionPath: String, paramsEmotion: Emotion?) {
if (TextUtils.isEmpty(emotionPath)) {
return
}
var emotion = if (paramsEmotion != null) {
paramsEmotion
} else {
Emotion()
}
emotion.mFlash = true
val `is` = context.assets.open("emotion/$emotionPath")
var bitmap = BitmapFactory.decodeStream(`is`)
`is`.close()
emotion.mFirstFrame = bitmap
var filePath = "file:///android_asset/emotion/$emotionPath"
Glide.with(context).load(filePath).asGif().into(GifDrawableTarget(object : IGifDrawableLoad {
override fun loadComplete(gifDrawable: GifDrawable) {
emotion.mEmotionDrawable = gifDrawable
addCoolEmotion(emotionPath, emotion)
}
}))
}
4.动态表情的解析
EmotionString是继承自SpannableStringBuilder，EmotionString里面有一个ArrayList<AgentDrawable> mAgentDrawables变量，该变量主要存储代理的Drawable，即AgentDrawable。
AgentDrawable是继承Drawable，里面有一个drawable，是GifDrawable类型，GifDrawable的每一帧的播放都是通过AgentDrawable来实现的。
查找动态表情并设置成ImageSpan：
/****
* 查找动态表情标识并设置成ImageSpan
* @param emotionPath
* @param leftIndex
* @param rightindex
*/
private fun updateSpanFromEmotionName(emotionPath: String, leftIndex: Int, rightIndex: Int) {
//传入动态表情的path，通过path去找Emotion
val emotion = EmotionPool.getInstance(mContext).getEmotion(mContext, emotionPath)
if (emotion != null) {
if (emotion.mFlash && emotion.mEmotionDrawable != null && mAgentDrawables.size < EmotionConst.MAX_PROXY_DRAWABLE_SIZE) {
appendAgentDrawable(emotion.mEmotionDrawable!!, leftIndex, rightIndex)
} else {
val span = EmotionPool.getInstance(mContext).getEmotionSpan(mContext, emotion, isEditView || fontSizeBig)
setSpan(span.copy(), leftIndex, rightIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
}
}
}
保存代理的AgentDrawable：
/**
* 添加AgentDrawable，设置ImageSpan并开始播放Gif动画
* @param gifDrawable
*/
fun appendAgentDrawable(gifDrawable: GifDrawable, leftIndex: Int, rightIndex: Int) {
val proxyDrawable = AgentDrawable(gifDrawable)
mAgentDrawables.add(proxyDrawable)
val imageSpan = GifImageSpan(proxyDrawable)
setSpan(imageSpan, leftIndex, rightIndex, SPAN_EXCLUSIVE_EXCLUSIVE)
playGifDrawable()
}
EmotionString会把动态表情的编码解析成AgentDrawable，然后通过AgentDrawable生成GifImageSpan，最后设定MixTextView的CharSequence，这个时候，我们会播放mAgentDrawables里面存储的每一项AgentDrawable的GifDrawable。
播放GifDrawable的代码：
/**
* 添加AgentDrawable，设置ImageSpan并开始播放Gif动画
*
* @param gifDrawable
*/
fun appendAgentDrawable(gifDrawable: GifDrawable, leftIndex: Int, rightIndex: Int) {
val proxyDrawable = AgentDrawable(gifDrawable)
mAgentDrawables.add(proxyDrawable)
val imageSpan = GifImageSpan(proxyDrawable)
setSpan(imageSpan, leftIndex, rightIndex, SPAN_EXCLUSIVE_EXCLUSIVE)
playGifDrawable()
}
5.动态表情的播放
通过动态表情的解析，我们播放了每一个GifDrawable，但是对应的TextView并没有更新，因此，我们看到的还是一张张静态图。
为了TextView有效地播放动态，我们还需要在在播放GifDrawable的时候刷新TextView，这里我们自定义了一个TextView：MixTextView。
MixTextView
class MixTextView @JvmOverloads constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int = 0) : TextView(context, attrs, defStyleAttr) {
init {
val watchers = ArrayList<NoCopySpan>()
watchers.add(GifWatcher(this))
setSpannableFactory(MixSpannableFactory(watchers))
}
override fun setText(text: CharSequence, type: TextView.BufferType) {
super.setText(text, TextView.BufferType.SPANNABLE)
}
}
我们为MixTextView设定了SpanWatcher，即GifWatcher，GifWatcher会为GifImageSpan设定一个refresh的Listener，refresh主要的做的事就是不停的刷新MixTextView，这样，GifDrawable在播放的同时，MixTextView也在不停地刷新，我们就看到了一张张的动态表情。
GifWatcher(主要代码)
class GifWatcher(view: View) : SpanWatcher, IRefresh {
private var mLastTime: Long = 0
private val mViewWeakReference: WeakReference<View> = WeakReference(view)
override fun onSpanAdded(text: Spannable, what: Any, start: Int, end: Int) {
if (what is RefreshSpan) {
val drawable = what.getInvalidateDrawable()
drawable?.addIRefresh(this)
}
}
/**
* 刷新view
*/
override fun onRefresh(): Boolean {
val view = mViewWeakReference.get() ?: return false
val context = view.context
if (context is Activity) {
if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.JELLY_BEAN_MR1){
if (context.isDestroyed) {
mViewWeakReference.clear()
return false
}
}
if (context.isFinishing) {
mViewWeakReference.clear()
return false
}
}
val currentTime = System.currentTimeMillis()
if (currentTime - mLastTime > REFRESH_INTERVAL) {
mLastTime = currentTime
view.invalidate()
}
return true
}
}
AgentDrawable的一些功能主要是委托DelegateRefreshDrawable来实现，GifDrawable的刷新会调到 invalidateDrawable的invalidateDrawable(drawable: Drawable)方法，我们在onSpanAdded的回调方法给DelegateRefreshDrawable设定了GifWatcher的IRefresh接口回调，因此 invalidateDrawable方法最终会调到GifWatcher的的onRefresh()方法。
DelegateRefreshDrawable :invalidateDrawable(drawable: Drawable） --> GifWatcher :onRefresh()
6.API使用
我们现在布局里面写一个MixTextView，然后new EmotionString，里面的字符串带有动态表情的编码，如下：
val emotionStr = EmotionString(instance, resources.getString(R.string.emoiton_str))
mixTv.text = emotionStr
7.说明
DynamicEmotion项目地址：MixTextView。
参考的项目地址：SpEditTool，emotion。
