2. 程式人生 > >Android疑難雜症之（ImageView播放gif遇到的坑）

Android疑難雜症之（ImageView播放gif遇到的坑）

阿新 • • 發佈：2019-01-24

最近做專案需要用到gif圖片，專案中直接用的Glide的gif載入，還沒有時間去研究Glide的原始碼的，不得不說Glide很強大啊，以前在郭神的部落格中看到了一個播放Gif的ImageView,於是打算跟著敲一遍咯。
原文連結先附上：http://blog.csdn.net/sinyu890807/article/details/11100315
思路：
利用Movie類去播放gif格式檔案，然後不斷的畫在當前ImageView的canvas上，以幀計算。
這樣說可能有點抽象，直接上程式碼了。
不懂的自己去郭神部落格(^__^) 嘻嘻……
下面說說其中的幾個坑的地方：
1、有很多童鞋想必一開始也跟我一樣，就是在XML中給ImageView設定了src=”@drawable\xxxx”,然後我們在程式碼中需要拿到對應資源的id，對程式碼中的利用反射獲取resouceId不明白，下面帶著大家一起擼一擼程式碼。
text.xml檔案：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
 

    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.yqy.dialogdemo.MainActivity">

    <com.yqy.dialogdemo.AnimaImageView

 
        android:layerType="software"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:auto_play="false"
        android:src="@drawable/cat"/>
</RelativeLayout>

其中我們的android:src=”@drawable/cat”是一張gif圖片，然後我們在下面的程式碼中需要拿到對應的id。

private void obtainStyledAttr(Context context, AttributeSet attrs, int defStyleAttr) {
        TypedArray a=context.getTheme().obtainStyledAttributes(attrs,R.styleable.AnimaImageView,defStyleAttr,0);
        int resId=getIdentifier(a);
        if(resId!=0){
            // 當資源id不等於0時，就去獲取該資源的流
            InputStream is=getResources().openRawResource(resId);
            // 使用Movie類對流進行解碼
            mMovie=Movie.decodeStream(is);
            //mMovie不等null說明這是一個GIF圖片
            if(mMovie!=null){
                //是否自動播放
                isAutoPlay=a.getBoolean(R.styleable.AnimaImageView_auto_play,false);
                /**
                 * 獲取gif圖片大小
                 */
                Bitmap bitmap= BitmapFactory.decodeStream(is);
                bitmapSize=new BitmapSize(bitmap.getWidth(),bitmap.getHeight());
                bitmap.recycle();
                if(!isAutoPlay){
                    // 當不允許自動播放的時候，得到開始播放按鈕的圖片，並註冊點選事件
                    mStartBotton=BitmapFactory.decodeResource(getResources(),R.mipmap.icon_play);
                    setOnClickListener(this);
                }
            }
        }
        a.recycle();
    }

其中有一個方法。

/**
     * 通過反射獲取src中的資源id
     * @param a
     */
    private int getIdentifier(TypedArray a) {
        try {
            Field mValueFiled = a.getClass().getDeclaredField("mValue");
            mValueFiled.setAccessible(true);
            TypedValue typedValue= (TypedValue) mValueFiled.get(a);
            return typedValue.resourceId;
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
        return 0;
    }

這是郭神給的程式碼，我一開始也有點懵逼，然後看了看ImageView的原始碼就知道了。
首先我們看看ImageView中是怎麼拿到src中的資源的，在ImageView的構造方法中我們看到了這麼一段程式碼：

 Drawable d = a.getDrawable(com.android.internal.R.styleable.ImageView_src);
        if (d != null) {
            setImageDrawable(d);
        }

可以看到在Android自帶的attr檔案中通過定義的attr拿到了src中的drawable檔案，然後我們看看getDrawable這個方法到底幹了什麼？

@Nullable
    public Drawable getDrawable(int index) {
        if (mRecycled) {
            throw new RuntimeException("Cannot make calls to a recycled instance!");
        }

        final TypedValue value = mValue;
        if (getValueAt(index*AssetManager.STYLE_NUM_ENTRIES, value)) {
            if (value.type == TypedValue.TYPE_ATTRIBUTE) {
                throw new UnsupportedOperationException(
                        "Failed to resolve attribute at index " + index + ": " + value);
            }
            return mResources.loadDrawable(value, value.resourceId, mTheme);
        }
        return null;
    }

看到這段程式碼的時候return mResources.loadDrawable(value, value.resourceId, mTheme);我們發現點不進去了，因為隱藏掉了，但是我們大致可以看到首先final TypedValue value = mValue;然後value.resourceId,“resourceId”應該就是我們需要的檔案id了。
我們點開TypedValue 類，看看其成員變數resourceId：

/** If Value came from a resource, this holds the corresponding resource id. */
    @AnyRes
    public int resourceId;

英語不是很好(^__^) 嘻嘻……，大致是“如果Value來自一個資源，那麼這個變數就擁有資源的id”，看到這裡我們終於發現了這就是我們設定的src中的資源id。

於是我們開始動工了首先拿到ImageView中的TypedValue物件”mValue”:

 /**
     * 通過反射獲取src中的資源id
     * @param a
     */
    private int getIdentifier(TypedArray a) {
        try {
            Field mValueFiled = a.getClass().getDeclaredField("mValue");
            mValueFiled.setAccessible(true);
            TypedValue typedValue= (TypedValue) mValueFiled.get(a);
            return typedValue.resourceId;
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
        return 0;
    }

現在看到這段程式碼是不是soeasy了，我想機智的你肯定分分鐘搞定了，（ps：看來大神也不是那麼好當的，背後付出了肯定很多很多，這也提醒我們想做一個資深的Android程式設計師，還是需要去好好研究下原始碼的(^__^) ……）

我第二個遇到的坑就是我照著程式碼擼了一遍後，發現還是顯示不出gif圖片，接著我們直接上了郭神的程式碼，還是不行，這時我想到了硬體加速的問題。
我一開始是直接加在了application中：

<application
        android:hardwareAccelerated="false"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

執行後果然可行，然後我想加在這範圍是不是太大了，然後我換到了xml佈局檔案中：

<com.yqy.dialogdemo.AnimaImageView
        android:layerType="none"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:auto_play="false"
        android:src="@drawable/cat"/>

加在這裡的時候我發現不行了？？？很鬱悶，接著我直接加到了程式碼中：

private void obtainStyledAttr(Context context, AttributeSet attrs, int defStyleAttr) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
            this.setLayerType(View.LAYER_TYPE_SOFTWARE,null);
        }

繼續執行就可以了。

然後我們修改了第二種方式：

  <com.yqy.dialogdemo.AnimaImageView
        android:layerType="software"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:auto_play="false"
        android:src="@drawable/cat"/>

執行可以了。。(^__^) 嘻嘻……！！

附上全部程式碼：

package com.yqy.dialogdemo;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Movie;
import android.os.Build;
import android.os.SystemClock;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.widget.ImageView;

import java.io.InputStream;
import java.lang.reflect.Field;

/**
 * @author EX_YINQINGYANG
 * @version [Android PABank C01, @2016-09-29]
 * @date 2016-09-29
 * @description 可以播放gif動畫的ImageView
 */
public class AnimaImageView extends ImageView implements View.OnClickListener {
    /**
     * 是否自動播放
     */
    private boolean isAutoPlay;
    /**
     * 播放GIF動畫的關鍵類
     */
    private Movie mMovie;
    /**
     * gif寬高
     */
    private BitmapSize bitmapSize;
    /**
     * 播放按鈕
     */
    private Bitmap mStartBotton;
    /**
     * 是否正在播放gif
     */
    private boolean isPlaying;
    /**
     * gif開始時間
     */
    private long mMovieStart;

    public AnimaImageView(Context context) {
        super(context);
    }

    public AnimaImageView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public AnimaImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
            this.setLayerType(View.LAYER_TYPE_SOFTWARE,null);
        }
        obtainStyledAttr(context,attrs,defStyleAttr);
    }

    private void obtainStyledAttr(Context context, AttributeSet attrs, int defStyleAttr) {
        TypedArray a=context.getTheme().obtainStyledAttributes(attrs,R.styleable.AnimaImageView,defStyleAttr,0);
        int resId=getIdentifier(a);
        if(resId!=0){
            // 當資源id不等於0時，就去獲取該資源的流
            InputStream is=getResources().openRawResource(resId);
            // 使用Movie類對流進行解碼
            mMovie=Movie.decodeStream(is);
            //mMovie不等null說明這是一個GIF圖片
            if(mMovie!=null){
                //是否自動播放
                isAutoPlay=a.getBoolean(R.styleable.AnimaImageView_auto_play,false);
                /**
                 * 獲取gif圖片大小
                 */
                Bitmap bitmap= BitmapFactory.decodeStream(is);
                bitmapSize=new BitmapSize(bitmap.getWidth(),bitmap.getHeight());
                bitmap.recycle();
                if(!isAutoPlay){
                    // 當不允許自動播放的時候，得到開始播放按鈕的圖片，並註冊點選事件
                    mStartBotton=BitmapFactory.decodeResource(getResources(),R.mipmap.icon_play);
                    setOnClickListener(this);
                }
            }
        }
        a.recycle();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //當時gif圖片的時候，控制元件寬高為gif檔案大小
        if(mMovie!=null){
            setMeasuredDimension(bitmapSize.width,bitmapSize.height);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //當為一張普通的圖片的時候
        if(mMovie==null){
            super.onDraw(canvas);
        }else{
            //如果自動播放的話，就直接播放
            if(isAutoPlay){
                playMovie(canvas);
                invalidate();
            }else{
                //如果已經點選了播放按鈕的話就開始播放gif
                if(isPlaying){
                    if(playMovie(canvas)){
                        isPlaying=false;
                    }
                    invalidate();
                }else{
                    // 還沒開始播放就只繪製GIF圖片的第一幀，並繪製一個開始按鈕
                    mMovie.setTime(0);
                    mMovie.draw(canvas, 0, 0);
                    int offsetW = (bitmapSize.width - mStartBotton.getWidth()) / 2;
                    int offsetH = (bitmapSize.height - mStartBotton.getHeight()) / 2;
                    canvas.drawBitmap(mStartBotton, offsetW, offsetH, null);
                }
            }
        }
    }
    /**
     * 開始播放GIF動畫，播放完成返回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);//不斷的設定gif的播放位置
        mMovie.draw(canvas, 0, 0);//將movie畫在canvas上
        //如果（當前時間-gif開始的時間=gif總時長）說明播放完畢了
        if ((now - mMovieStart) >= duration) {
            mMovieStart = 0;
            return true;
        }
        return false;
    }
    /**
     * 通過反射獲取src中的資源id
     * @param a
     */
    private int getIdentifier(TypedArray a) {
        try {
            Field mValueFiled = a.getClass().getDeclaredField("mValue");
            mValueFiled.setAccessible(true);
            TypedValue typedValue= (TypedValue) mValueFiled.get(a);
            return typedValue.resourceId;
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
        return 0;
    }

    /**
     * 當點選圖片的時候播放gif
     */
    @Override
    public void onClick(View v) {
        isPlaying = true;
        invalidate();
    }

    /**
     * BitmapSize
     */
    class BitmapSize{
        private int width;
        private int height;

        public BitmapSize(int width, int height) {
            this.width = width;
            this.height = height;
        }
    }
}

相關推薦

Android疑難雜症之（ImageView播放gif遇到的坑）

最近做專案需要用到gif圖片，專案中直接用的Glide的gif載入，還沒有時間去研究Glide的原始碼的，不得不說Glide很強大啊，以前在郭神的部落格中看到了一個播放Gif的ImageView,於是打算跟著敲一遍咯。 原文連結先附上：http://blog.

Android ImageView播放gif圖片

當點選圖片的時候，gif圖片播放，當沒有點選的時候是gif的第一幀，這時是一張圖片。 參考：https://blog.csdn.net/guolin_blog/article/details/11100315 首先在values目錄下新建一個attrs.xml的檔案 &

【朝花夕拾】Android效能篇之（一）序言及JVM

序言        筆者從事Anroid開發有些年頭了，深知掌握Anroid效能優化方面的知識的必要性，這是一個程式設計師必須修煉的內功。在面試中，它是面試官的摯愛，在工作中，它是程式碼質量的攔路虎，其重要性可見一斑。在團隊中，效能優化的工作又往往由經驗豐富的老師傅來

java疑難雜症之一（i+=和i=i+的區別）

這個問題起源於一道筆試題。short j=1；j=j+1；和short j=1；j+=1；有什麼錯，錯在哪？        1）都知道數字的字面量（直接量）預設int型別， 那麼short j=1沒

【朝花夕拾】Android效能篇之（六）Android程序管理機制

一、Android程序管理的特殊設計        Linux系統對程序的管理方式是一旦程序活動停止，系統就會結束該程序。儘管Android基於Linux Kernel，但在程序管理上，卻採取了另外一種獨特的設計：當程序活動停止時，系統並不會立刻結束它，而是會盡可能地將該程序儲存在記憶體中，在以後的某個時間，

Android疑難雜症大彙總

此文專門記載本人在開發過程中遇到的一些印象比較深刻的問題，以及踩過的一些坑，包括Gradle以及AndroidStudio都有，會一直持續更新~ 目錄 Android5.0以下（Android4.x）出現NoClassDefFoundError 執行專案時報錯Error

Android原始碼解析之（十）-->Launcher啟動流程

上一篇文章中我們講解了關於SystemServer程序相關的知識，我們知道SystemServer程序主要用於啟動系統的各種服務，二者其中就包含了負責啟動Launcher的服務，LauncherAppService。具體更多關於SystenServer的啟動

Android原始碼解析之（十三）-->apk安裝流程

上一篇文章中給大家分析了一下android系統啟動之後呼叫PackageManagerService服務並解析系統特定目錄，解析apk檔案並安裝的過程，這個安裝過程實際上是沒有圖形介面的，底層呼叫的是我們平時比較熟悉的adb命令，那麼我們平時安裝apk檔案的

Android原始碼解析之（十一）-->應用程序啟動流程

本節主要是通過分析Activity的啟動過程介紹應用程式程序的啟動流程。關於Android的應用程序在android guide中有這樣的一段描述： By default, every application runs in its own Linu

Android原始碼解析之（五）-->IntentService

上一篇文章中我們講解了HandlerThread，其本質上是一個Thread，只不過內部定義了其自身的Looper和MessageQueue。為了讓多個執行緒之間能夠方便的通訊，我們會使用Handler實現執行緒間的通訊。這個時候我們手動實現的多執行緒+Ha

Android原始碼解析之（九）-->SystemServer程序啟動流程

上面一文中我們講過android系統中比較重要的幾個程序：init程序，Zygote程序，SystemServer程序已經各種應用程序，其中Zygote程序是整個android系統的根程序，包含SystemServer程序已經各種應用程序在內的程序都是通過Z

Android原始碼解析之（四）-->HandlerThread

上一篇文章中我們講解了AsyncTast的基本使用以及實現原理，我們知道AsyncTask內部是通過執行緒池和Handler實現的，通過對執行緒池和handler的封裝實現了對非同步任務操作。更多關於AsyncTask相關的內容，可參考我的android原始

android疑難雜症

一、 同一個應用中有activity A 和activity B ,A和B的launchMode都是singleTask,主題都是theme="@android:style/Theme.Translu

Android TP驅動之（二）裝置樹解析

AndroidTP驅動之（二）裝置樹解析 0. 前情提要 上文中我們已經初步搭好了TP驅動的框架。當然我們還缺了重要的部分input子系統，這個不急，我們下一篇文章再敘。 本文我們來完成TP driver中對裝置樹的解析。 1. probe函式

Android原始碼解析之（七）-->LruCache快取類

android開發過程中經常會用到快取，現在主流的app中圖片等資源的快取策略一般是分兩級，一個是記憶體級別的快取，一個是磁碟級別的快取。 作為android系統的維護者google也開源了其快取方案，LruCache和DiskLruCache。從andr

【朝花夕拾】Android效能篇之（七）Android跨程序通訊

前言        Android系統的執行由大量相互獨立的程序相互協助來完成的，所以Android程序間通訊問題，是做好Android開發高階工程師必須要跨過的一道坎，也是面試時經常被問及到的知識點。但是，我們是否真的清楚，Android中都有哪些方式實現跨程序通訊

軟體測試環境構建疑難雜症之資料夾許可權

    今天，我剛好有時間總結一些軟體自動化測試過程中涉及到的幾個技術難點。這時，我的同事急匆匆的跑過來，說他搭建一個產品的軟體測試環境遇到了棘手的問題。    我同事提到的這個軟體測試環境我非常清楚，C#語言開發，B/S結構，該軟體測試環境配置可以說非常簡單，不應該會遇到問

Android MVP模式之（一）初識

MVP淺談 說到MVP模式，在這裡不得不提到MVC模式，我們來看看兩者的區別 **MVC** M：基本bean（java bean） V：View以及子類 C：Activity、Fragment以及子類 **MVP** M：資料層（資料

Android IPC簡介之（多程序模式）初識

前言 IPC是 Inter-Process Communication 的縮寫，含義為 程序間通訊 或者跨程序通訊，是指兩個程序之間進行資料交換的過程。 執行緒vs程序 執行緒： 執行緒是CPU排程的最小單元，同時執行緒是一種有限的系統資源。

【Android疑難雜症】GridView動態設定Item的寬高導致第一個Item不響應或顯示不正常的問題

在使用Android的GridView控制元件時，很多人都會碰到這麼個奇怪的問題：整個GridView中，所有item的響應都沒問題，只有第一個item不響應，或是顯示不正常，或是點完第一個item後不響應但再點其他的item後其他item會響應、同時第一個item也