Android開(kāi)發(fā)之ImageView播放GIF動(dòng)畫(huà)實(shí)例
成都創(chuàng)新互聯(lián)是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來(lái)公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過(guò)去的十余年時(shí)間我們累計(jì)服務(wù)了上千家以及全國(guó)政企客戶，如成都辦公窗簾等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過(guò)硬的技術(shù)實(shí)力獲得客戶的一致稱贊。
Android的原生控件并不支持播放GIF格式的圖片，如果想在Android中顯示一張GIF動(dòng)態(tài)圖片，可以利用 ImageView控件來(lái)完成，但是放進(jìn)去之后，你會(huì)發(fā)現(xiàn)，ImageView它只會(huì)顯示這張圖片的第一幀，不會(huì)產(chǎn)生任何的動(dòng)畫(huà)效果。我們必須通過(guò)自定義控件的方式來(lái)實(shí)現(xiàn)ImageView播放GIF 圖片的功能。
首先我們來(lái)編寫(xiě)一個(gè)PowerImageView控件，讓它既能支持ImageView控件原生的所有功能，同時(shí)還可以播放GIF動(dòng)態(tài)圖片。
先新建一個(gè)項(xiàng)目PowerImageViewTest，這里使用Android 4.0+Eclipse。
由于是要自定義控件，會(huì)需要一些自定義的控件屬性，因此我們需要在values目錄下新建一個(gè)attrs.xml的文件，在這個(gè)文件中添加項(xiàng)目需要的自定義屬性。
這里我們目前暫時(shí)只需要一個(gè)自動(dòng)播放auto_play屬性，XML文件代碼如下：
?xml version="1.0" encoding="utf-8"?
這個(gè)文件完成之后，下面我們來(lái)開(kāi)始編寫(xiě)主類PowerImageView類，由于PowerImageView類需要支持ImageView的所有功能，我們必須要讓PowerImageView繼承自ImageView，代碼如下：
public class PowerImageView extends ImageView implements OnClickListener {
/**
* 播放GIF動(dòng)畫(huà)的關(guān)鍵類
*/
private Movie mMovie;
/**
* 開(kāi)始播放按鈕圖片
*/
private Bitmap mStartButton;
/**
* 記錄動(dòng)畫(huà)開(kāi)始的時(shí)間
*/
private long mMovieStart;
/**
* GIF圖片的寬度
*/
private int mImageWidth;
/**
* GIF圖片的高度
*/
private int mImageHeight;
/**
* 圖片是否正在播放
*/
private boolean isPlaying;
/**
* 是否允許自動(dòng)播放
*/
private boolean isAutoPlay;
/**
* PowerImageView構(gòu)造函數(shù)。
*
* @param context
*/
public PowerImageView(Context context) {
super(context);
}
/**
* PowerImageView構(gòu)造函數(shù)。
*
* @param context
*/
public PowerImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
/**
* PowerImageView構(gòu)造函數(shù)，在這里完成所有必要的初始化操作。
*
* @param context
*/
public PowerImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.PowerImageView);
int resourceId = getResourceId(a, context, attrs);
if (resourceId != 0) {
// 當(dāng)資源id不等于0時(shí)，就去獲取該資源的流
InputStream is = getResources().openRawResource(resourceId);
// 使用Movie類對(duì)流進(jìn)行解碼
mMovie = Movie.decodeStream(is);
if (mMovie != null) {
// 如果返回值不等于null，就說(shuō)明這是一個(gè)GIF圖片，下面獲取是否自動(dòng)播放的屬性
isAutoPlay = a.getBoolean(R.styleable.PowerImageView_auto_play, false);
Bitmap bitmap = BitmapFactory.decodeStream(is);
mImageWidth = bitmap.getWidth();
mImageHeight = bitmap.getHeight();
bitmap.recycle();
if (!isAutoPlay) {
// 當(dāng)不允許自動(dòng)播放的時(shí)候，得到開(kāi)始播放按鈕的圖片，并注冊(cè)點(diǎn)擊事件
mStartButton = BitmapFactory.decodeResource(getResources(),R.drawable.start_play);
setOnClickListener(this);
}
}
}
}
@Override
public void onClick(View v) {
if (v.getId() == getId()) {
// 當(dāng)用戶點(diǎn)擊圖片時(shí)，開(kāi)始播放GIF動(dòng)畫(huà)
isPlaying = true;
invalidate();
}
}
@Override
protected void onDraw(Canvas canvas) {
if (mMovie == null) {
// mMovie等于null，說(shuō)明是張普通的圖片，則直接調(diào)用父類的onDraw()方法
super.onDraw(canvas);
} else {
// mMovie不等于null，說(shuō)明是張GIF圖片
if (isAutoPlay) {
// 如果允許自動(dòng)播放，就調(diào)用playMovie()方法播放GIF動(dòng)畫(huà)
playMovie(canvas);
invalidate();
} else {
// 不允許自動(dòng)播放時(shí)，判斷當(dāng)前圖片是否正在播放
if (isPlaying) {
// 正在播放就繼續(xù)調(diào)用playMovie()方法，一直到動(dòng)畫(huà)播放結(jié)束為止
if (playMovie(canvas)) {
isPlaying = false;
}
invalidate();
} else {
// 還沒(méi)開(kāi)始播放就只繪制GIF圖片的第一幀，并繪制一個(gè)開(kāi)始按鈕
mMovie.setTime(0);
mMovie.draw(canvas, 0, 0);
int offsetW = (mImageWidth - mStartButton.getWidth()) / 2;
int offsetH = (mImageHeight - mStartButton.getHeight()) / 2;
canvas.drawBitmap(mStartButton, offsetW, offsetH, null);
}
}
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (mMovie != null) {
// 如果是GIF圖片則重寫(xiě)設(shè)定PowerImageView的大小
setMeasuredDimension(mImageWidth, mImageHeight);
}
}
/**
* 開(kāi)始播放GIF動(dòng)畫(huà)，播放完成返回true，未完成返回false。
*
* @param canvas
* @return 播放完成返回true，未完成返回false。
*/
private boolean playMovie(Canvas canvas) {
long now = SystemClock.uptimeMillis();
if (mMovieStart == 0) {
mMovieStart = now;
}
int duration = mMovie.duration();
if (duration == 0) {
duration = 1000;
}
int relTime = (int) ((now - mMovieStart) % duration);
mMovie.setTime(relTime);
mMovie.draw(canvas, 0, 0);
if ((now - mMovieStart) = duration) {
mMovieStart = 0;
return true;
}
return false;
}
/**
* 通過(guò)Java反射，獲取到src指定圖片資源所對(duì)應(yīng)的id。
*
* @param a
* @param context
* @param attrs
* @return 返回布局文件中指定圖片資源所對(duì)應(yīng)的id，沒(méi)有指定任何圖片資源就返回0。
*/
private int getResourceId(TypedArray a, Context context, AttributeSet attrs) {
try {
Field field = TypedArray.class.getDeclaredField("mValue");
field.setAccessible(true);
TypedValue typedValueObject = (TypedValue) field.get(a);
return typedValueObject.resourceId;
} catch (Exception e) {
e.printStackTrace();
} finally {
if (a != null) {
a.recycle();
}
}
return 0;
}
}
這個(gè)類的代碼注釋已經(jīng)非常詳細(xì)了，我再來(lái)簡(jiǎn)單地解釋一下?？梢钥吹?，我們重寫(xiě)了ImageView中所有的構(gòu)建函數(shù)，使得 PowerImageView的用法可以和ImageView完全相同。在構(gòu)造函數(shù)中，則是對(duì)所有必要的數(shù)據(jù)進(jìn)行了初始化操作。首先，我們調(diào)用了 getResourceId()方法去獲取圖片資源對(duì)應(yīng)的id值，在getResourceId()方法內(nèi)部是通過(guò)Java的反射機(jī)制來(lái)進(jìn)行獲取的。得到了圖片資源的id后，我們將它轉(zhuǎn)換成InputStream，然后傳入到Movie.decodeStream()方法中以解碼出Movie對(duì)象。如果得到的Movie對(duì)象等于null，說(shuō)明這是一張普通的圖片資源，就不再進(jìn)行任何特殊處理，因?yàn)楦割怚mageView都幫我們處理好了。如果得到的 Movie對(duì)象不等于null，則說(shuō)明這是一張GIF圖片，接著就要去獲取是否允許自動(dòng)播放、圖片的寬高等屬性的值。如果不允許自動(dòng)播放，還要給播放按鈕 注冊(cè)點(diǎn)擊事件，默認(rèn)是不允許自動(dòng)播放的。
接下來(lái)會(huì)進(jìn)入到onMeasure()方法中。在這個(gè)方法中我們進(jìn)行判斷，如果這是一張GIF圖片，則需要將PowerImageView的寬高重定義，使得控件的大小剛好可以放得下這張GIF圖片。
再往后就會(huì)進(jìn)入到onDraw()方法中。在這個(gè)方法里同樣先判斷當(dāng)前是一張普通的圖片還是GIF圖片，如果是普通的圖片就直接調(diào)用 super.onDraw()方法交給ImageView去處理就好了。如果是GIF圖片，則先判斷該圖是否允許自動(dòng)播放，允許的話就調(diào)用 playMovie()方法去播放GIF圖片就好，不允許的話則會(huì)先在PowerImageView中繪制該GIF圖片的第一幀，并在圖片上繪制一個(gè)播放 按鈕，當(dāng)用戶點(diǎn)擊了播放按鈕時(shí)，再去調(diào)用playMovie()方法去播放GIF圖片。
下面我們來(lái)看看playMovie()方法中是怎樣播放GIF圖片的吧?？梢钥吹?，首先會(huì)對(duì)動(dòng)畫(huà)開(kāi)始的時(shí)間做下記錄，然后對(duì)動(dòng)畫(huà)持續(xù)的時(shí)間做下記 錄，接著使用當(dāng)前的時(shí)間減去動(dòng)畫(huà)開(kāi)始的時(shí)間，得到的時(shí)間就是此時(shí)PowerImageView應(yīng)該顯示的那一幀，然后借助Movie對(duì)象將這一幀繪制到屏 幕上即可。之后每次調(diào)用playMovie()方法都會(huì)繪制一幀圖片，連貫起來(lái)也就形成了GIF動(dòng)畫(huà)。注意，這個(gè)方法是有返回值的，如果當(dāng)前時(shí)間減去動(dòng)畫(huà) 開(kāi)始時(shí)間大于了動(dòng)畫(huà)持續(xù)時(shí)間，那就說(shuō)明動(dòng)畫(huà)播放完成了，返回true，否則返回false。
完成了PowerImageView的編寫(xiě)，下面我們就來(lái)看一看如何使用它吧，其實(shí)非常簡(jiǎn)單，打開(kāi)或新建activity_main.xml，代碼如下所示：
relativelayout p=""
android:layout_width="match_parent"
android:layout_height="match_parent"
com.example.powerimageviewtest.powerimageview p=""
android:id="@+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/anim"
/
可以看到，PowerImageView的用法和ImageView幾乎完全一樣，使用android:src屬性來(lái)指定一張圖片即可，這里指定的anim就是一張GIF圖片。然后我們讓PowerImageView在布局里居中顯示MainActivity中的代碼都是自動(dòng)生成的，這里就不再貼出來(lái)了。在AndroidManifest.xml中還有一點(diǎn)需要注意，有些4.0 以上系統(tǒng)的手機(jī)啟動(dòng)了硬件加速功能之后會(huì)導(dǎo)致GIF動(dòng)畫(huà)播放不出來(lái)，因此我們需要在AndroidManifest.xml中去禁用硬件加速功能，可以通過(guò)指定android:hardwareAccelerated屬性來(lái)完成，代碼如下所示：
?xml version="1.0" encoding="utf-8"?
manifest p=""
package="com.example.powerimageviewtest"
android:versionCode="1"
android:versionName="1.0"
uses-sdk p=""
android:minSdkVersion="14"
android:targetSdkVersion="17" /
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme"
android:hardwareAccelerated="false"
android:name="com.example.powerimageviewtest.MainActivity"
android:label="@string/app_name"
現(xiàn)在可以來(lái)運(yùn)行一下代碼了，一打開(kāi)程序你就會(huì)看到GIF圖片的第一幀，點(diǎn)擊圖片之后就可以播放GIF動(dòng)畫(huà)了。
然后我們還可以通過(guò)修改activity_main.xml中的代碼，給它加上允許自動(dòng)播放的屬性，代碼如下所示：
relativelayout p=""
xmlns:attr=""
android:layout_width="match_parent"
android:layout_height="match_parent"
com.example.powerimageviewtest.powerimageview p=""
android:id="@+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/anim"
attr:auto_play="true"
/
這里使用了剛才我們自定義的屬性，通過(guò)attr:auto_play來(lái)啟用和禁用自動(dòng)播放功能?，F(xiàn)在將auto_play屬性指定成true后，PowerImageView上就不會(huì)再顯示一個(gè)播放按鈕，而是會(huì)循環(huán)地自動(dòng)播放動(dòng)畫(huà)。不僅如此，PowerImageView還繼承了ImageView原生的所有功能，只要指定的不是GIF圖 片，PowerImageView表現(xiàn)的結(jié)果就和ImageView完全一致，現(xiàn)在我們來(lái)放一張普通的PNG圖片，修改 activity_main.xml中的代碼，如下所示：
relativelayout p=""
android:layout_width="match_parent"
android:layout_height="match_parent"
com.example.powerimageviewtest.powerimageview p=""
android:id="@+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/myphoto"
/
這里在src屬性里面指定了一張名字為myphoto的PNG圖片,圖片在布局正中央顯示出來(lái)了，正是普通ImageView所具備的功能。我們還可以在PowerImageView中指定android:scaleType等屬性，用法和原生的ImageView完全一樣。
背景：在項(xiàng)目里某個(gè)需求實(shí)現(xiàn)的時(shí)候，有個(gè)圖標(biāo)有一個(gè)動(dòng)畫(huà)效果，為了達(dá)到UI要求的效果，試過(guò)多種方案，在這篇文章中講一下這些方案的用法，以及結(jié)合項(xiàng)目的現(xiàn)狀，做的一個(gè)方案選擇。
Link：
Glide是Android上比較常見(jiàn)的圖片加載框架了，在Android上是數(shù)一數(shù)二的圖片加載框架代表了，當(dāng)然，早期的類似 ImageLoader ， Picasso 這些，算是比較具有歷史性的圖片加載框架了。
Glide加載Gif的話，用到的是 GifDrawable 這個(gè)對(duì)象，一般我們用
去創(chuàng)建，當(dāng)然，如果你加載的是 Bitmap 或 GifDrawable，你可以判斷這個(gè)可繪制對(duì)象是否實(shí)現(xiàn)了 Animatable：
Link：
android-gif-drawable也是Android上比較火熱的圖片加載框架
這個(gè)庫(kù)播放Gif用到的也是 pl.droidsonroids.gif.GifDrawableGifDrawable 對(duì)象，不像Glide，它的創(chuàng)建的方式比較簡(jiǎn)單
可以根據(jù)需求，選擇不同的構(gòu)造器創(chuàng)建對(duì)象
GifDrawable 實(shí)現(xiàn)了 Animatable 跟 MediaPlayerControl 接口，所以你可以使用他們各自的方法甚至更多
使用 MediaPlayerControl
MediaPlayer的標(biāo)準(zhǔn)控件（如VideoView）可用于控制GIF動(dòng)畫(huà)并顯示其當(dāng)前進(jìn)度。
只需在 MediaController 上將 GifDrawable 設(shè)置為 MediaPlayer ，如下所示：
更多詳細(xì)用法見(jiàn) Github Usage
Link：android.jar-android.graphics.drawable
AnimatedImageDrawable是Android官方推出播放動(dòng)圖的類，優(yōu)點(diǎn)是官方穩(wěn)定高效，缺點(diǎn)是僅支持Android P版本(api=28)以上
使用方法也比較簡(jiǎn)單
Link：android.jar-android.graphics
android.graphics.Movie 也是Android自帶的類，可以用來(lái)加載播放Gif動(dòng)畫(huà)，實(shí)現(xiàn)起來(lái)相對(duì)來(lái)說(shuō)可能比較繁瑣，官方已經(jīng)將這個(gè)類標(biāo)記為 @Deprecated {@link android.graphics.drawable.AnimatedImageDrawable} ，但還是有必要講下。
主要的構(gòu)造方法有：
按來(lái)源分別可以從Gif文件的輸入流，文件路徑，字節(jié)數(shù)組中得到Movie的實(shí)列。然后我們可以通過(guò)操作Movie對(duì)象來(lái)操作Gif文件。
下面介紹下幾個(gè)方法：
關(guān)鍵是Movie官方?jīng)]有給出回調(diào)監(jiān)聽(tīng)，故我們需要手動(dòng)做監(jiān)聽(tīng)。
有興趣的可以看這一篇文章，寫(xiě)的很不錯(cuò)。 Android自定義View播放Gif動(dòng)畫(huà)
當(dāng)然，除了這些之外，還有跨平臺(tái)的解決方案，比起傳統(tǒng)的gif文件， Lottie 則是使用json文件來(lái)代表動(dòng)畫(huà)源文件。
Lottie 對(duì)APK的影響有多大？
Add the dependency to your project build.gradle file:
核心類：
加載動(dòng)畫(huà)：
Lottie 可以加載動(dòng)畫(huà)來(lái)自：
最簡(jiǎn)單的形式就是使用 LottieAnimationView ：
推薦使用 lottie_rawRes ，相對(duì)于使用指定的字符串文件名，你可以使用通過(guò) R 文件以靜態(tài)的引用形式指定你的動(dòng)畫(huà)文件.
更多詳細(xì)介紹及用法見(jiàn) 官方文檔
Link：
FrameSequenceDrawable 更多的是對(duì)webp格式的一個(gè)支持，所以當(dāng)要使用時(shí)，需要將你的gif轉(zhuǎn)為webp
來(lái)看下主要的構(gòu)造方法：
使用方法如下：
[Facebook/Fresco] ( ) 也支持gif的加載，大同小異，這里就不再過(guò)多介紹了。
Glide在部分設(shè)備上遇到了Gif變慢的問(wèn)題，詳見(jiàn) issues_2471
考慮到項(xiàng)目已經(jīng)集成了Glide了，就不打算再繼續(xù)引入第三方的庫(kù)了。又因?yàn)樵夭牡膯?wèn)題，無(wú)法導(dǎo)出Lottie格式的json文件。
故這一塊當(dāng)時(shí)做的就是 =androidP 用AnimatedImageDrawable，androidP 就用Glide，僅供參考。
1、Android端不支持gif圖片播放問(wèn)題
React Native 在Android端默認(rèn)是不支持gif圖片顯示的，需要在Android工程中新增一個(gè)配置即可支持gif圖片顯示。
在Android工程中里找到 android/app/build.gradle 文件
在dependencies字段中添加：
2、Android端gif圖片只播放一次問(wèn)題
如果能播放一次，說(shuō)明配置已經(jīng)沒(méi)有問(wèn)題了，檢查一下gif圖片自身是否設(shè)置成了無(wú)限播放，如果沒(méi)有設(shè)置為無(wú)限播放，在iOS端默認(rèn)也是無(wú)限播放，但在Android端是只播放一次，要解決這個(gè)問(wèn)題，需要重新導(dǎo)出gif圖片，并設(shè)置為無(wú)限播放。
1、下載安裝AnimGIF Live Wallpaper，值得注意的是，安裝成功之后，在應(yīng)用程序列表是無(wú)法找到它的圖標(biāo)，找到方式看下圖：2、進(jìn)入AnimGIF Live Wallpaper，點(diǎn)擊左下方的設(shè)置按鈕，選擇“Set GIF Image”按鈕即進(jìn)入文件目錄瀏覽，找到需要設(shè)置為壁紙的GIF動(dòng)圖，點(diǎn)擊設(shè)置壁紙即可。注意事項(xiàng)：1、GIF動(dòng)圖體積不要過(guò)大，盡量不要超過(guò)1M，否則會(huì)出現(xiàn)卡頓、掉幀等播放問(wèn)題；2、設(shè)置動(dòng)圖為壁紙后，會(huì)導(dǎo)致耗電量的增加。
重慶分公司
重慶分公司
