android平臺TextView使用ImageSpan畫廊GIF圖像
android-gif-drawable(https://github.com/koral--/android-gif-drawable/releases)開源項目---是一個蠻不錯的android gif顯示實現.本文在android-gif-drawable基礎上介紹怎樣實現TextView、EditText上展現Gif動態圖。
網上有蠻多介紹這個框架使用的文章，比方http://www.open-open.com/lib/view/open1404888098200.html。
核心類GifDrawable間隔必定時間讀取下一幀數據，而後運行invalidateSelf()----》CallBack::invalidateDrawable()---》View::verifyDrawable()和View::invalidate()，該幀數據刷新流程就運行結束。
而android-gif-drawable框架眼下已支持GifImageView、GifImageButton、GifTextView三個android widget，且
GifImageView、GifImageButton支持對src和backgroud設置Gif，而GifTextView對支持backgroud和CompoundDrawables設置Gif。
現在很是多app都支持Gif表情。但貌似尚未一個app對輸入框(等)支持GIF。而基本所有的表情圖片(包含Emoji)都是使用ImageSpan實現的。但默認的ImageSpan是沒法支持GIF的。
參考android-gif-drawable框架中gif幀數據刷新流程，要支持GIF需要考慮並完畢如下三個操做：
1)對ImageSpan中的GifDrawable，什麼時候設置其Callback，又什麼時候清空該Callback，眼下TextView、ImageSpan和Spaned都沒有設置Callback的地方。咱們需要找一個合適的地方將TextView設置爲GifDrawable的Callback；
2)在TextView::invalidateDrawable()中實現對GifDrawable的校驗，即驗證該GifDrawable是TextView的內容，需要刷新；
3)在TextView::invalidateDrawable()中實現怎樣刷新TextView顯示；
首先對於1)。咱們參考下ImageView和TextView實現。ImageView的src drawable相應實現例如如下：
/**
* Sets a drawable as the content of this ImageView.
*
* @param drawable The drawable to set
*/
public void setImageDrawable(Drawable drawable) {
if (mDrawable != drawable) {
...
updateDrawable(drawable);
...
}
}
private void updateDrawable(Drawable d) {
if (mDrawable != null) {
mDrawable.setCallback(null);
unscheduleDrawable(mDrawable);
}
mDrawable = d;
if (d != null) {
d.setCallback(this);
if (d.isStateful()) {
d.setState(getDrawableState());
}
d.setLevel(mLevel);
d.setLayoutDirection(getLayoutDirection());
d.setVisible(getVisibility() == VISIBLE, true);
mDrawableWidth = d.getIntrinsicWidth();
mDrawableHeight = d.getIntrinsicHeight();
applyColorMod();
configureBounds();
} else {
mDrawableWidth = mDrawableHeight = -1;
}
}
也就是說，ImageView在設置其src時。清空舊mDrawable的callback，而後將新設置的src drawable的callback設置爲ImageView自己。
同理。TextView對於CompoundDrawables的callback處理也是在setCompoundDrawables()時。
而ImageSpan需要在什麼時機設置GifDrawable的callback呢，
public class GifImageSpan extends ImageSpan{
private Drawable mDrawable = null;
public GifImageSpan(Drawable d) {
super(d);
mDrawable = d;
}
public GifImageSpan(Drawable d, int verticalAlignment) {
super(d, verticalAlignment);
mDrawable = d;
}
@Override
public Drawable getDrawable() {
return mDrawable;
}
}
public class GifEditText extends EditText {
private GifSpanChangeWatcher mGifSpanChangeWatcher;
public GifEditText(Context context) {
super(context);
initGifSpanChangeWatcher();
}
public GifEditText(Context context, AttributeSet attrs) {
super(context, attrs);
initGifSpanChangeWatcher();
}
public GifEditText(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initGifSpanChangeWatcher();
}
private void initGifSpanChangeWatcher() {
mGifSpanChangeWatcher = new GifSpanChangeWatcher(this);
addTextChangedListener(mGifSpanChangeWatcher);
}
@Override
public void setText(CharSequence text, BufferType type) {
CharSequence oldText = null;
try {
//EditText的默認mText爲""。是一個String。但getText()強轉爲Editable，尼瑪。僅僅能try/catch了
oldText = getText();
//首先清空所有舊GifImageSpan的callback和oldText上的GifSpanChangeWatcher
if (!TextUtils.isEmpty(oldText) && oldText instanceof Spannable) {
Spannable sp = (Spannable) oldText;
final GifImageSpan[] spans = sp.getSpans(0, sp.length(), GifImageSpan.class);
final int count = spans.length;
for (int i = 0; i < count; i++) {
spans[i].getDrawable().setCallback(null);
}
final GifSpanChangeWatcher[] watchers = sp.getSpans(0, sp.length(), GifSpanChangeWatcher.class);
final int count1 = watchers.length;
for (int i = 0; i < count1; i++) {
sp.removeSpan(watchers[i]);
}
}
} catch (Exception e) {
}
if (!TextUtils.isEmpty(text)) {
if (!(text instanceof Editable)) {
text = new SpannableStringBuilder(text);
}
}
if (!TextUtils.isEmpty(text) && text instanceof Spannable) {
Spannable sp = (Spannable) text;
//設置新text中所有GifImageSpan的callback爲當前EditText
final GifImageSpan[] spans = sp.getSpans(0, sp.length(), GifImageSpan.class);
final int count = spans.length;
for (int i = 0; i < count; i++) {
spans[i].getDrawable().setCallback(this);
}
//清空新text上的GifSpanChangeWatcher
final GifSpanChangeWatcher[] watchers = sp.getSpans(0, sp.length(), GifSpanChangeWatcher.class);
final int count1 = watchers.length;
for (int i = 0; i < count1; i++) {
sp.removeSpan(watchers[i]);
}
if (mGifSpanChangeWatcher == null) {
mGifSpanChangeWatcher = new GifSpanChangeWatcher(this);
}
//設置新text上的GifSpanChangeWatcher
sp.setSpan(mGifSpanChangeWatcher, 0, text.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE | (100 << Spanned.SPAN_PRIORITY_SHIFT));
}
super.setText(text, type);
}
}
public class GifSpanChangeWatcher implements SpanWatcher, TextWatcher{
private Drawable.Callback mCallback;
public GifSpanChangeWatcher(Drawable.Callback callback) {
mCallback = callback;
}
public void onSpanChanged(Spannable buf, Object what, int s, int e, int st, int en) {
//do nothing
}
public void onSpanAdded(Spannable buf, Object what, int s, int e) {
//設置callback
if (what instanceof GifImageSpan) {
((GifImageSpan)what).getDrawable().setCallback(mCallback);
}
}
public void onSpanRemoved(Spannable buf, Object what, int s, int e) {
//清空callback
if (what instanceof GifImageSpan) {
((GifImageSpan)what).getDrawable().setCallback(null);
}
}
@Override
public void afterTextChanged(Editable s) {
if (s != null) {
s.setSpan(this, 0, s.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE | (100 << Spanned.SPAN_PRIORITY_SHIFT));
}
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
// TODO Auto-generated method stub
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
// TODO Auto-generated method stub
}
}
也就是，在setText()和onSpanAdded()、onSpanRemoved()中運行操做(1)
而後，對於2)，相同參考ImageView和TextView
@Override
protected boolean verifyDrawable(Drawable dr) {
return mDrawable == dr || super.verifyDrawable(dr);
}
@Override
protected boolean verifyDrawable(Drawable who) {
final boolean verified = super.verifyDrawable(who);
if (!verified && mDrawables != null) {
return who == mDrawables.mDrawableLeft || who == mDrawables.mDrawableTop ||
who == mDrawables.mDrawableRight || who == mDrawables.mDrawableBottom ||
who == mDrawables.mDrawableStart || who == mDrawables.mDrawableEnd;
}
return verified;
}
直接上代碼
public class GifEditText extends EditText {
private GifImageSpan getImageSpan(Drawable drawable) {
GifImageSpan imageSpan = null;
CharSequence text = getText();
if (!TextUtils.isEmpty(text)) {
if (text instanceof Spanned) {
Spanned spanned = (Spanned) text;
GifImageSpan[] spans = spanned.getSpans(0, text.length(), GifImageSpan.class);
if (spans != null && spans.length > 0) {
for (GifImageSpan span : spans) {
if (drawable == span.getDrawable()) {
imageSpan = span;
}
}
}
}
}
return imageSpan;
}
}
getImageSpan()方法經過getSpans()獲取所有的GifImageSpan。而後對照drawable，返回對應的GifImageSpan。
最後。操做3）更新View顯示。相同參考下TextView
@Override
public void invalidateDrawable(Drawable drawable) {
if (verifyDrawable(drawable)) {
final Rect dirty = drawable.getBounds();
int scrollX = mScrollX;
int scrollY = mScrollY;
// IMPORTANT: The coordinates below are based on the coordinates computed
// for each compound drawable in onDraw(). Make sure to update each section
// accordingly.
final TextView.Drawables drawables = mDrawables;
if (drawables != null) {
if (drawable == drawables.mDrawableLeft) {
final int compoundPaddingTop = getCompoundPaddingTop();
final int compoundPaddingBottom = getCompoundPaddingBottom();
final int vspace = mBottom - mTop - compoundPaddingBottom - compoundPaddingTop;
scrollX += mPaddingLeft;
scrollY += compoundPaddingTop + (vspace - drawables.mDrawableHeightLeft) / 2;
} else if (drawable == drawables.mDrawableRight) {
final int compoundPaddingTop = getCompoundPaddingTop();
final int compoundPaddingBottom = getCompoundPaddingBottom();
final int vspace = mBottom - mTop - compoundPaddingBottom - compoundPaddingTop;
scrollX += (mRight - mLeft - mPaddingRight - drawables.mDrawableSizeRight);
scrollY += compoundPaddingTop + (vspace - drawables.mDrawableHeightRight) / 2;
} else if (drawable == drawables.mDrawableTop) {
final int compoundPaddingLeft = getCompoundPaddingLeft();
final int compoundPaddingRight = getCompoundPaddingRight();
final int hspace = mRight - mLeft - compoundPaddingRight - compoundPaddingLeft;
scrollX += compoundPaddingLeft + (hspace - drawables.mDrawableWidthTop) / 2;
scrollY += mPaddingTop;
} else if (drawable == drawables.mDrawableBottom) {
final int compoundPaddingLeft = getCompoundPaddingLeft();
final int compoundPaddingRight = getCompoundPaddingRight();
final int hspace = mRight - mLeft - compoundPaddingRight - compoundPaddingLeft;
scrollX += compoundPaddingLeft + (hspace - drawables.mDrawableWidthBottom) / 2;
scrollY += (mBottom - mTop - mPaddingBottom - drawables.mDrawableSizeBottom);
}
}
invalidate(dirty.left + scrollX, dirty.top + scrollY,
dirty.right + scrollX, dirty.bottom + scrollY);
}
}
計算compoundDrawable位置欄，而後運行invalidate。
對於GifEditText貌似也可以相似操做，依據GifImageSpan的start、end計算其位置欄，而後運行invalidate()。只是計算過程太過複雜了。只是android4.4的TextView提供這種方法void invalidateRegion(int start, int end, boolean invalidateCursor) 方法用於刷新start和end之間的區域，但仍是蠻複雜的看的人眼花繚亂。研究了下這種方法終因而由誰調用的。html
invalidateRegion()<<---invalidateCursor()<<---spanChange()<<---ChangeWatcher::onSpanChanged()、ChangeWatcher::onSpanAdded()、ChangeWatcher::onSpanRemoved()
也就是說，僅僅要TextView內容中span發生變化都會觸發invalidateRegion()來刷新相應區域和cursor。
@Override
public void invalidateDrawable(Drawable drawable) {
GifImageSpan imageSpan = getImageSpan(drawable);
Log.e("", "invalidateDrawable imageSpan:" + imageSpan);
if (imageSpan != null) {
CharSequence text = getText();
if (!TextUtils.isEmpty(text)) {
if (text instanceof Editable) {
Log.e("", "invalidateDrawable Editable:");
Editable editable = (Editable)text;
int start = editable.getSpanStart(imageSpan);
int end = editable.getSpanEnd(imageSpan);
int flags = editable.getSpanFlags(imageSpan);
editable.setSpan(imageSpan, start, end, flags);
}
}
} else {
super.invalidateDrawable(drawable);
}
}
直接又一次設置該ImageSpan就能夠觸發ChangeWatcher::onSpanChanged()回調。也就會立刻刷新其區域和cursor。
大功告成。執行ok。
上面是對EditText的實現，針對TextView實現略微有點差異
public class GifSpanTextView extends GifTextView {
private GifSpanChangeWatcher mGifSpanChangeWatcher;
public GifSpanTextView(Context context) {
super(context);
initGifSpanChangeWatcher();
}
public GifSpanTextView(Context context, AttributeSet attrs) {
super(context, attrs);
initGifSpanChangeWatcher();
}
public GifSpanTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initGifSpanChangeWatcher();
}
private void initGifSpanChangeWatcher() {
mGifSpanChangeWatcher = new GifSpanChangeWatcher(this);
addTextChangedListener(mGifSpanChangeWatcher);
}
@Override
public void setText(CharSequence text, BufferType type) {
type = BufferType.EDITABLE;
CharSequence oldText = getText();
if (!TextUtils.isEmpty(oldText) && oldText instanceof Spannable) {
Spannable sp = (Spannable) oldText;
final GifImageSpan[] spans = sp.getSpans(0, sp.length(), GifImageSpan.class);
final int count = spans.length;
for (int i = 0; i < count; i++) {
spans[i].getDrawable().setCallback(null);
}
final GifSpanChangeWatcher[] watchers = sp.getSpans(0, sp.length(), GifSpanChangeWatcher.class);
final int count1 = watchers.length;
for (int i = 0; i < count1; i++) {
sp.removeSpan(watchers[i]);
}
}
if (!TextUtils.isEmpty(text) && text instanceof Spannable) {
Spannable sp = (Spannable) text;
final GifImageSpan[] spans = sp.getSpans(0, sp.length(), GifImageSpan.class);
final int count = spans.length;
for (int i = 0; i < count; i++) {
spans[i].getDrawable().setCallback(this);
}
final GifSpanChangeWatcher[] watchers = sp.getSpans(0, sp.length(), GifSpanChangeWatcher.class);
final int count1 = watchers.length;
for (int i = 0; i < count1; i++) {
sp.removeSpan(watchers[i]);
}
if (mGifSpanChangeWatcher == null) {
mGifSpanChangeWatcher = new GifSpanChangeWatcher(this);;
}
sp.setSpan(mGifSpanChangeWatcher, 0, text.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE | (100 << Spanned.SPAN_PRIORITY_SHIFT));
}
super.setText(text, type);
}
private GifImageSpan getImageSpan(Drawable drawable) {
GifImageSpan imageSpan = null;
CharSequence text = getText();
if (!TextUtils.isEmpty(text)) {
if (text instanceof Spanned) {
Spanned spanned = (Spanned) text;
GifImageSpan[] spans = spanned.getSpans(0, text.length(), GifImageSpan.class);
if (spans != null && spans.length > 0) {
for (GifImageSpan span : spans) {
if (drawable == span.getDrawable()) {
imageSpan = span;
}
}
}
}
}
return imageSpan;
}
@Override
public void invalidateDrawable(Drawable drawable) {
GifImageSpan imageSpan = getImageSpan(drawable);
if (imageSpan != null) {
CharSequence text = getText();
if (!TextUtils.isEmpty(text)) {
if (text instanceof Editable) {
Editable editable = (Editable)text;
int start = editable.getSpanStart(imageSpan);
int end = editable.getSpanEnd(imageSpan);
int flags = editable.getSpanFlags(imageSpan);
editable.removeSpan(imageSpan);
editable.setSpan(imageSpan, start, end, flags);
}
}
} else {
super.invalidateDrawable(drawable);
}
}
}
設置其android:editable="true"或正上方setText(CharSequence text, BufferType type)將type設置BufferType.EDITABLE。java
相關文章
- 1. HTML圖像畫廊
- 2. Android textView文字添加圖片 imageSpan使用
- 3. 15個最佳jQuery圖像畫廊
- 4. Android畫廊效果
- 5. Android本身定義控件——3D畫廊和圖像矩陣
- 6. TN3畫廊–專業影像畫廊排名第一
- 7. android gif動畫
- 8. Android實例（一）—— 3D畫廊
- 9. Android ViewPager打造3D畫廊
- 10. Android筆記:TextView和編輯框中添加圖片,ImageSpan,SpannableStringBuilder用法
- 更多相關文章...
- • ionic 平臺 - ionic 教程
- • Docker 鏡像使用 - Docker教程
- • Composer 安裝與使用
- • 使用Rxjava計算圓周率
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
歡迎關注本站公眾號,獲取更多信息
