作者： vivo 互聯網客户端團隊- Zhang Qin

本文從桌面掛件開發過程中遇到的GIF圖片難以加載的問題展開，分別介紹了現有的掛件中加載GIF圖片的兩種可行方案——ViewFlipper和AnimatedImageDrawable，同時闡述了兩種的方案的優缺點。然後針對現有方案中的痛點，結合現有方案，提出通過網絡下發GIF並通過逐幀解析得到幀圖片，再採用ViewFlipper來實現加載的方案，解決痛點中的引入資源過多導致包體增大的問題，使掛件既能不增加包體又能展示GIF。

1分鐘看圖掌握核心觀點👇

一、背景

眾所周知，Android原生的原子組件（AppWidget，又名桌面掛件）所能使用的View有限，僅能支持如下的：

layout（佈局）：

• AdapterViewFlipper

• FrameLayout

• GridLayout

• GridView

• LinearLayout

• ListView

• RelativeLayout

• StackView

• ViewFlipper

widgets（小部件）：

• AnalogClock

• Button

• Chronometer

• ImageButton

• ImageView

• ProgressBar

• TextClock

• TextView

從API 31開始，還支持如下的小部件和佈局：

• CheckBox

• RadioButton

• RadioGroup

• Switch

需要注意一點，除了上述這些之外，其餘所有的都不支持，包括繼承自這些類的子類同樣也不支持。因此我們能夠看出，開發AppWidget的侷限性比較大，只有限定的佈局和小部件能夠使用，且不能通過繼承來實現自定義的炫酷效果。這裏也解釋了為什麼筆者一開始不直接使用Lottie、PAG等來實現複雜的動畫，完全是被限制了。

不僅如此，組件內由於使用的都是Remoteviews，Remoteviews可以在其它進程中進行顯示，我們可以跨進程更新它的界面。Remoteviews在Android中的主要應用是通知欄和桌面掛件。也正式掛件中使用的是Remoteviews，所以我們不能像普通Android應用一樣使用findViewById或者viewbinding來獲取View的對象並通過view對象來設置相應的屬性等。在掛件中只能使用Remoteviews中的一些方法，這些方法基本都是通過反射方式進行封裝來實現的，比如設置ImageView的圖片，Remoteviews中只提供瞭如下四種方法：

/**
 * Equivalent to calling {@link ImageView#setImageResource(int)}
 *
 * @param viewId The id of the view whose drawable should change
 * @param srcId The new resource id for the drawable
 */
publicvoidsetImageViewResource(@IdResint viewId, @DrawableResint srcId){
    setInt(viewId, "setImageResource", srcId);
}
  
/**
 * Equivalent to calling {@link ImageView#setImageURI(Uri)}
 *
 * @param viewId The id of the view whose drawable should change
 * @param uri The Uri for the image
 */
publicvoidsetImageViewUri(@IdResint viewId, Uri uri){
    setUri(viewId, "setImageURI", uri);
}
  
/**
 * Equivalent to calling {@link ImageView#setImageBitmap(Bitmap)}
 *
 * @param viewId The id of the view whose bitmap should change
 * @param bitmap The new Bitmap for the drawable
 */
publicvoidsetImageViewBitmap(@IdResint viewId, Bitmap bitmap){
    setBitmap(viewId, "setImageBitmap", bitmap);
}
  
/**
 * Equivalent to calling {@link ImageView#setImageIcon(Icon)}
 *
 * @param viewId The id of the view whose bitmap should change
 * @param icon The new Icon for the ImageView
 */
publicvoidsetImageViewIcon(@IdResint viewId, Icon icon){
    setIcon(viewId, "setImageIcon", icon);
}

從源碼中可以看到，setImageViewResource 方法只能傳入int類型的資源，也就是在資源文件中的資源ID，除此之外就是Bitmap、Uri和Icon類型，無法支持Drawable等類型。由此可見，組件中的View其實只能包含普通View的一部分功能，限制比較明顯。

二、掛件加載 GIF 的可行方案

言歸正傳，首先，我們介紹下在組件中加載GIF的可行方案，主要有兩種：

2.1 方案一：使用ViewFlipper來實現逐幀動畫的效果

此方案是利用Remoteviews支持的ViewFlipper控件，配合多個ImageView來循環顯示，達到類似逐幀動畫的效果。佈局內容如下：

<ViewFlipper
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_gravity="end|center_vertical"
    android:autoStart="true"
    android:flipInterval="90">
  
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/before_sign_in_anim0" />
  
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/before_sign_in_anim15" />
  
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/before_sign_in_anim28" />
  
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/before_sign_in_anim43" />
  
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/before_sign_in_anim57" />
  
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/before_sign_in_anim71" />
  
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/before_sign_in_anim85" />
  
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/before_sign_in_anim100" />
</ViewFlipper>

ViewFlipper中的一些常用方法如下：

• setInAnimation：設置View或ImageView進入屏幕時使用的動畫

• setOutAnimation：設置View或ImageView退出屏幕時使用的動畫

• showNext：調用該方法來顯示ViewFlipper裏的下一個View或ImageView

• showPrevious：調用該方法來顯示ViewFlipper的上一個View或ImageView

• setFilpInterval：設置View或ImageView之間切換的時間間隔

• startFlipping：使用上面設置的時間間隔來開始切換所有的View或ImageView，切換會循環進行

• stopFlipping：停止View或ImageView切換

• isAutoStart：是否自動開始播放

在作為動畫設置時，需要在xml文件中設置autoStart屬性為true，保證動畫能夠自動播放。

優點：

• 各版本兼容性好，ViewFlipper是API 11時引入的，目前應該不會有比這低的了；

缺點：

• ImageView過多，代碼也多，修改替換麻煩；

• 在Remoteviews中，ViewFlipper的很多方法無法使用，比如停止播放等。

2.2 方案二：使用AnimatedImageDrawable來顯示GIF動畫

Android 9.0 中引入了一個新的Drawable來顯示GIF圖片：AnimatedImageDrawable，對應的xml標籤是<animated-image>，這樣一來，我們可以直接將一個GIF圖片before_sign_in.gif放到drawable目錄中，然後新建一個before_sign_in_anim.xml來引用：

<?xml version="1.0" encoding="utf-8"?>
<animated-image xmlns:android="http://schemas.android.com/apk/res/android"
    android:autoStart="true"
    android:autoMirrored="true"
    android:src="@drawable/ic_test_gif" />

其中的ic_test_gif就是我們的.gif文件。

我們可以看下AnimatedImageDrawable的屬性：

<!-- Drawable used to draw animated images(gif). -->
    <declare-styleable name="AnimatedImageDrawable">
        <!-- Identifier of the image file. This attribute is mandatory.
             It must be an image file with multiple frames, e.g. gif or webp -->
        <attr name="src" />
        <!-- Indicates if the drawable needs to be mirrored when its layout direction is
             RTL(right-to-left). -->
        <attr name="autoMirrored" />
        <!-- Replace the loop count in the encoded data. A repeat count of 0 means that
             the animation will play once, regardless of the number of times specified
             in the encoded data. Setting this to infinite(-1) will result in the
             animation repeating as long as it is displayed(once start() is called). -->
        <attr name="repeatCount"/>
        <!-- When true, automatically start animating. The default is false, meaning
             that the animation will not start until start() is called. -->
        <attr name="autoStart" />
    </declare-styleable>

從中我們可以發現，這裏可以設置repeatCount循環次數，設置為0的話表示只播放一次。

此時，我們只需要將drawable設置給ImageView即可，在Remoteviews中，考慮到版本兼容問題，我們通過如下方式設置：

remoteViews.setImageViewResource(
    R.id.abnormal_static_cat,
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
        R.drawable.before_sign_in_anim
    } else {
        R.drawable.before_sign_in_static
    }
)

優點：資源少，一個GIF只要一個xml，且替換簡單；

缺點：只有Android9以上的系統可以用。

2.3 現有方案的痛點

上述描述的兩種方案中，都會引入很多資源文件，這必然會增加應用的包體，導致包體增大不少，因此可以考慮通過服務端下發的方式來實現，那麼問題就來了：

1）如果通過方案一，那麼客户端必須寫定一個xml，寫定一定數量的ImageView來供下發的圖片加載，當然了，可以動態的添加，但這裏是組件，動態添加會比普通的view動態添加稍微麻煩些，這個我們後面再説。

2）如果通過方案二，那麼就有問題了，前面已經提到了，組件裏面的ImageView是不支持通過Drawable對象來設置內容的，這就導致了就算我們能夠得到AnimatedImageDrawable對象，我們也沒辦法設置，況且要得到這樣一個Drawable，也比較困難（沒有深究如何得到）。

戛然而止了，兩個方案實現起來聽着都不太靠譜，那麼有沒有什麼好的方案呢？

三、可行方案探索

3.1 初探

想到這裏，大家可能會問，為什麼不使用Glide呢？這個強大的圖片加載庫總不會沒有這樣的方法吧？

確實，Glide給AppWidget提供了專門的圖片加載方式，其實現方式如下：

val appwidgetTarget = AppWidgetTarget(context, R.id.abnormal_static_cat, remoteViews, ComponentName(context, TestWidgetProvider::class.java))
Glide.with(context)
   .asBitmap()
   .load(url)
   .into(appwidgetTarget)

但是從上面可以看出，這個只能加載Bitmap，如果是asGif，則在into時沒有target這個選項，只能into（ImageView）。因此這個方法也行不通。

3.2 思索與嘗試

這裏還要説一點，如果是將圖片下載到手機本地，再去讀取本地文件，還需要考慮存儲權限的問題，而這裏是原子組件，如果需要請求權限，那麼就得找一個落地頁去承載，且組件的卡片上最好也需要有這個説明，這樣的話UI改動會比較大，且如果沒有同意權限就會出現展示不了圖片的情況，這也很不友好。

綜上，只能在請求網絡圖片時就把GIF加載出來，這樣既不需要上述的那些繁瑣的權限授予過程，也不會增加包體的大小。

受到上面第一個方案的啓發，我們可以把GIF圖的逐幀圖片取出來，然後通過方案一來展示，這樣就能實現了。

3.2.1 獲取網絡 GIF 圖片

首先是拿到網絡的GIF圖片，這裏我們採用Glide來獲取(Glide還是好用啊），採用Glide還有一個好處是，Glide會針對圖片作緩存，這樣我們重複加載同一張圖不會重複消耗流量：

Glide.with(context)
    .asGif()
    .load(url)
    .diskCacheStrategy(DiskCacheStrategy.ALL)
    .submit(432, 432)
    .get()

3.2.2 得到 GIF 的逐幀圖片

然後是將得到的GIF進行解析，得到逐幀的圖片，這裏我們引入一個工具庫：implementation("pl.droidsonroids.gif:android-gif-drawable:1.2.24")，該庫在Vhub上已有上傳，可以直接使用：

@WorkerThread
fun getAllFrameBitmapByUrl(context: Context, url: String): MutableList<Bitmap> {
    val frameBitmaps: MutableList<Bitmap> = ArrayList()
    var gifDrawable: GifDrawable? = null
    try {
        val gif = Glide.with(context)
            .asGif()
            .load(url)
            .diskCacheStrategy(DiskCacheStrategy.ALL)
            .submit(432, 432)
            .get()
        gifDrawable = GifDrawable(gif.buffer)
        val totalCount = gifDrawable.numberOfFrames
        for(i in 0 until totalCount){
            frameBitmaps.add(gifDrawable.seekToFrameAndGet(i))
        }
    } catch (t: Throwable) {
        VLog.e(TAG, "getAllFrameBitmapByUrl Error.", t)
    } finally {
        gifDrawable?.stop()
    }
    return frameBitmaps
}

這樣我們就得到了包含GIF所有幀圖片的列表了（美滋滋~），接下來就可以根據方案一處理每一幀的圖片了。

3.2.3 加載

然後，就報錯了，lang.IllegalArgumentException: RemoteViews for widget update exceeds maximum bitmap memory usage (used: 236588800, max: 15396480)。由於Remoteviews是跨進程的傳輸，並不是傳統意義上的view，其內部是通過Binder來實現的，因此當ImageView去setImageBitmap的時候，需要注意設置進去的bitmap是否超過了大小限制。

最大的Size公式為：The total Bitmap memory used by the RemoteViews object cannot exceed that required to fill the screen 1.5 times, ie. (screen width x screen height x 4 x 1.5) bytes.也就是RemoteViews 對象使用的總 Bitmap 內存不能超過填滿屏幕 1.5 倍所需的內存，即 (屏幕寬度 x 屏幕高度 x 4 x 1.5) 字節。這個在AppWidgetServiceImpl.java中有相應的定義：

privatevoidcomputeMaximumWidgetBitmapMemory(){
    Display display = mContext.getDisplayNoVerify();
    Point size = new Point();
    display.getRealSize(size);
    // Cap memory usage at 1.5 times the size of the display
    // 1.5 * 4 bytes/pixel * w * h ==> 6 * w * h
    mMaxWidgetBitmapMemory = 6 * size.x * size.y;
}

而且，RemoteViews源碼內部維護了一個：BitmapCache mBitmapCache, 每次設置bitmap進來，都會被緩存起來，最終計算RemoteViews佔用內存大小的話，也會把這塊算進去。

/**
     * Call a method taking one Bitmap on a view in the layout for this RemoteViews.
     * @more
     * <p class="note">The bitmap will be flattened into the parcel if this object is
     * sent across processes, so it may end up using a lot of memory, and may be fairly slow.</p>
     *
     * @param viewId The id of the view on which to call the method.
     * @param methodName The name of the method to call.
     * @param value The value to pass to the method.
     */
    publicvoidsetBitmap(@IdResint viewId, String methodName, Bitmap value){
        addAction(new BitmapReflectionAction(viewId, methodName, value));
    }
  
...
  
    BitmapReflectionAction(@IdResint viewId, String methodName, Bitmap bitmap) {
       this.bitmap = bitmap;
       this.viewId = viewId;
       this.methodName = methodName;
       bitmapId = mBitmapCache.getBitmapId(bitmap);
    }
  
...
  
    publicintgetBitmapId(Bitmap b){
        if (b == null) {
            return -1;
        } else {
            int hash = b.hashCode();
            int hashId = mBitmapHashes.get(hash, -1);
            if (hashId != -1) {
                return hashId;
            } else {
                if (b.isMutable()) {
                    b = b.asShared();
                }
                mBitmaps.add(b);
                mBitmapHashes.put(mBitmaps.size() - 1, hash);
                mBitmapMemory = -1;
                return (mBitmaps.size() - 1);
           }
       }
   }

這裏由於GIF解析出來的幀圖片太多，如果每一張都設置的話，確實太多了，那麼就需要採取採樣的方式，目前設定的是每5張中取一張，然後設置了每一張圖片的大小也不能超過閾值，另外總體也設置了一個閾值，防止超過報錯。這裏就會出現兩個問題，一個是單張圖片限制了大小閾值，必定會出現壓縮、採樣，導致單張圖片質量下降，不像原先那麼高清，第二個是幀圖片太多，就算單張限制了閾值，總體也會超過總體的閾值，在超過總體前一幀時直接return，這樣就會導致最終的動畫和GIF相比可能被截斷。反覆試驗，找了個相對平衡的點，既保證單張圖片的清晰度，也保證整體的完整性，但這個方案不夠健壯，會隨着GIF圖的變化出現不同的問題。

下面介紹下上面説的這個方案，原理上基本清晰，就是通過ViewFlipper，向其中動態添加ImageView，每一個ImageView加載一幀圖片，從而達到動畫效果。

val viewFlipper = RemoteViews(context.packageName, R.layout.sign_in_view_flipper)
var allSize = 0
kotlin.run {
    frameBitmaps.forEachIndexed { index, it ->
        logger.d("allSize = $allSize, index = $index")
        if (index % 5 != 0) {
            return@forEachIndexed
        }
        val ivRemoteViews = RemoteViews(context.packageName, R.layout.sign_in_per_frame_bitmap_view)
        var bitmapSize = GifDownloadUtils.getBitmapSize(it)
        var bitmap = it
        val matrix = Matrix()
        var scale = 432f / bitmap.width
        logger.d("start, bitmapSize = $bitmapSize")
        matrix.setScale(scale, scale)
        while (bitmapSize >= GifDownloadUtils.MAX_WIDGET_BITMAP_MEMORY) {
            bitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.width, bitmap.height, matrix, true)
            bitmapSize = GifDownloadUtils.getBitmapSize(bitmap)
            logger.d("bitmapSize = $bitmapSize, scale = $scale")
            scale /= 2f
            matrix.setScale(scale, scale)
        }
        allSize += bitmapSize
        logger.d("allSize = $allSize")
        if (allSize >= GifDownloadUtils.maxTotalWidgetBitmapMemory()) {
            return@run
        }
        ivRemoteViews.setImageViewBitmap(R.id.iv_per_frame, bitmap)
        viewFlipper.addView(R.id.view_flipper, ivRemoteViews)
    }
}
  
logger.d("addView")
// 這裏是由於addView添加的View都會顯示在最上面，所以這裏通過在原卡片中添加相同id的view，先把原卡的移除，再把新建的添加進去，達到更新的效果，這樣佈局的層級就還是原先的層級。
remoteViews.removeAllViews(R.id.view_flipper)
remoteViews.addView(R.id.view_flipper, viewFlipper)

其中frameBitmaps就是上面獲得的所有圖片。

到這裏網絡GIF圖片的加載也基本完成了。

四、總結

上述提出的加載網絡GIF的方案，雖然解決了現有方案中加載GIF需要引入很多圖片資源或者GIF資源，導致包體大小增加的問題，但是如果GIF圖片本身質量較高，通過新方案可能會降低GIF的質量。

上述三種方案的優缺點和適用場景總結如下：

總而言之，具體採用哪種方案需要根據實際開發的具體需要來實現，綜合方案的優缺點和適用場景來選擇。