android gif GifDrawable Glide

Android使用GifDrawable工具加載gif動圖

Luca Lin 2019/08/12 09:50:03
67

l   前言:

   現代通訊軟體、付款軟體眾多,有許多需要登入後才能使用的app,並大多擁有可以編輯自己個人資料的功能,從早期只有個人資料表格,現在還加上了個人大頭貼,可讓個人頁面更加豐富。而在有個人大頭貼之後,又出現了可動態顯示的動動大頭貼,使介面更加活潑了。那第一個想到的動圖就是gif了,那要怎麼把gif動圖放到大頭貼欄位上呢?又應該要怎麼實現呢?

        事實上要在app上實現gif動圖的方法還不少,技術上也不相同,這時候開發者就會開始比較優劣了,此次我試了幾個方式,並從中挑選出一個最好使用的工具來詳細說明,那就是GifDrawable。並搭配Glide技術簡化加載圖片的程序,可以做到相當不錯的效果喔!

        關於Glide, 顧名思義是滑順、滑行的意思,放到功能上解釋就有可以很順暢處理事件的意涵。Android上的Glide主要是負責圖片與影片加載的技術,使原本繁複的流程變得簡易且順暢,它是由bumptech的作者製作,並放在github上供開發者使用,並且日後也被廣泛地運用到google的開源項目中。使用Glide的要求也不高,API Level 10以上的專案就能使用了,那就一起來看看要怎麼使用吧!

使用範例:

        直接試作一個例子,並利用製作過程來說明如何使用會比較好理解,假設我們需要做一個用戶的動動大頭貼,然後必須是圓形表示,最後的效果如下圖所示:

圖片來源:比特小兔

本次sample圖片來源著重在網路資源的加載,並在上方加一個輸入框,讓圖片來源可因不同的網址來源更換並顯示在app上。

加載gif動圖的方式其實有好幾種,例如使用webView、或是逐幀播放方式、或是使用surfaceView方式刻畫、及使用VideoView方式播放等等,但在寫此文章時測試了一下,發現不論哪個方法,撰寫起來多少都會有點麻煩而且有些不足的地方,那如果用GifDrawable搭配Glide呢?答案是肯定的,以下就先針對這個方法說明使用步驟。

一、 使用GifDrawable

n   導入Glide套件包

首先在android專案內的build.gradle檔案內加入此行:compile 'com.github.bumptech.glide:glide:4.8.0' ,這是glide工具的導入工作。


 

目前已經出到了4.8.0版,實際操作的版本可能會更新,但不影響基本加載的操作

n   導入GifDrawable

一樣在android專案內的build.gradle(app)加入此行:implementation 'pl.droidsonroids.gif:android-gif-drawable:1.1.17'


然後在build.gradle(project)中加入mavencentral()參數

 

 

n   Xml佈局

導入完成之後,即可以在xml檔案中直接呼叫剛剛導入的物件了,在layout檔案中可以參考這樣的設定:

最下面的GifImageView就是GifDrawable下的一個view,它使用起來相當的簡單,就跟一般在使用ImageView一樣,如果圖片來源在本地端,只要直接設定好src,然後就好了!反觀gif圖也是這樣,就是這麼簡單!在java檔中完全不用任何設定。此view會自動幫您判斷檔案來源是不是屬於gif動態圖檔,若不是動圖的話,它便會以靜態圖檔表示,在使用上並不容易出錯。

n   從網路來源加載gif動圖

如果圖片的來源是從網路,那就需要做一點設定了,流程為在編輯欄中輸入圖片網址,按下Change按鈕後,更換原本的圖片。稍候可以來看一下加載的地方。

 

n   Glide加載圖片

 

Glide就像是一個容器,只要將所需的內容放到這裡,它就會幫你處理加載問題並顯示出來了,使用前請記得在manifest文檔中添加網路權限:

再來就是收集它所需要的內容了,其實也就是urlPathgifImageView本身而已,urlPath就先指定某個gif的網址,gifImageView將它綁定ID後裝上Glide,最後的寫法是這樣子的:

(PS:在將圖片綁定至ImageView時也是一樣的寫法)

介面看起來十分好理解,讀取url路徑之後裝進view裡面即可,來看看效果吧!

到這為止,就已經可以根據您輸入的圖片網址用Glide輕鬆的顯示出來囉!但是目前顯示出來的動圖是方形,再來要處理的就是圓形裁切了,這個要怎麼做呢?其實不用擔心,Glide也幫我們做好了!

 

n   將來源圖片裁切成圓形

 

剛剛已經完成了加載圖片的動作,但出來的圖片會是原圖,也就是大部份是方形的格式,那如果是要做成圓形的大頭貼,要怎麼做呢?Glide幫我們想到這個問題,所以只要用一行代碼就能解決!只要在剛剛加載圖片的程式碼中加上這行:

它也是Glide本身之於RequestBuilder的物件方法,只要加上後,圖片就可以裁剪成圓形了,來看看效果吧:

(ps:針對Glide能處理的圖片裁切有許多種形式,有興趣的人可以自己更換看看)

現在就剩下最後一個步驟了,將圖縮至適當的大小以適合大頭貼的欄位所使用。其實最後一步也最簡單,可回歸到此viewxml設定,指定好寬高就可以了喔,測試的步驟如下:

 

 

要加載圖片時,使用Glide可讓加載步驟變得十分地簡單,就連gif動圖也不是問題,而此套件也是google官方認可,大家可以多加利用。總而言之,使用GifDrawable搭配Glide可以讓加載gif動圖變得簡單又好操作。接著來看看其它幾種方式能不能製做出一樣的效果吧!

 

二、 使用WebView實現gif動圖

剛才使用了GifDrawable+Glide可輕鬆實現,但其實還有其它方法可以做出類似的效果,我試著在加載步驟與效果上做了點比較,現在來看看WebView的效果吧

 

n   WebView加載gif

 

GifDrawable不同的是,WebView起初是為了實現現在app上瀏覽網頁時用的,所以必須在WebViewsetting上再多加設定一些設定值,以符合載入gif圖的格式:

 

做好上述設定之後,載入圖片來源,可以成功的讓gif圖動起來

眼尖的人可能已經發現了,那就是使用webview時,好像會連帶地將圖片以外的內容也一併載入了,雖然我們載入的是同一個圖片網址。載入的速度也不算慢,但有的甚至會將整個網頁內容秀出來。雖然可以達到gif顯示在app相同的效果,不過技術上會有點難控制如何只顯示圖片的部份,因為在測試過後略輸GifDrawable一籌。

三、 使用圖片逐幀播放來達到動圖效果

逐幀播放應該算是最原始也最基本的做法,就像早期在做動畫一樣,利用圖片一張一張的快速切換,造成視覺暫留的效果藉以達到動畫的目的。那在android中要怎麼製作呢

 

首先先取得圖檔,圖片來源我取自此篇教學的源檔:https://www.jianshu.com/p/55c457d885e5。這裡的做法是製作一個自定義的view,用來處理播放的效果覆蓋上原本的Activity上面,在自定的view上,連接著的layout並裝上一個imageView,將圖片輪流加在此imageView上:

接著在自定義的view上提供播放動畫的方法:

使用一個AnimationDrawable物件來承接輪流取到的圖片,然後加在imageView上,並設定開始播放,接著就在指定的頁面上加上此view:

最後在此頁上呼叫上面的playAnim()方法試試,效果如下

產生了錢幣撒落的動圖,看起來有達到了一樣的效果了,但事實上我只加了5~6張圖片,原檔有提供30張以上的圖,經測試後發現這樣的寫法容易造成OutOfMemory Error,原因是因為需要處理的圖片太多了,會造成記憶體空間不足,若圖片播放的長度很長,勢必要處理很多張圖,就很容易因記憶體不足而crash。實際上不是一個建議的處理方法。

 

 

l   小結

其它還有包括SurfaceViewVideoView的測試,效果其實不太完美,過程上也繁複許多,就沒有一併貼上來了,最建議的還是本文使用的GifDrawable,不單單是因為簡單好用,而是它的功能性也很強大,搭配Glide圖片搭載技術,就能像字面上的意思一樣能處理得非常順暢,不妨在遇到類似需求時可以試試看。此次測試的sample一樣放在我的github,有興趣的人可以載下來玩玩看喔!

l   參考來源:

一、 Glide by bumptech:

https://github.com/bumptech/glide

 

二、 5種實現Gif圖片播放:

https://www.jianshu.com/p/55c457d885e5

 

三、 android加載GifgifDrawable的使用:

https://blog.csdn.net/xiaomai949804781/article/details/52872409

 

四、 Glide加載圖片效果:

 

https://blog.csdn.net/zhangphil/article/details/52806374

 

 

 

Luca Lin