加载gif图的两种方法及各自的差异

时间：2021-10-06 20:35:49

目前分析的两种方法是glide加载和三方库android_gif_drawable，它们之间各有差异，下面慢慢来分析。

glide在as中添加：

    compile 'com.github.bumptech.glide:glide:3.7.0'
    compile 'com.android.support:support-v4:19.1.0'

android_gif_drawable的： 

compile 'pl.droidsonroids.gif:android-gif-drawable:1.1.+'

首先是从网络获取gif图的资源，但是，gif图分两种，分别是以gif后缀的和jpg后缀的资源名。

比如：http://img3.imgtn.bdimg.com/it/u=3343246039,1378013988&fm=21&gp=0.jpg和http://img5.duitang.com/uploads/blog/201405/05/20140505162717_dKQEE.thumb.200_0.gif

这两张都是gif的图片，所以上面的两种加载gif图的方法就可不相同了。
加载网络会用到AsyncHttp,之前的文章有：http://blog.csdn.net/zhangli_/article/details/50328033

看布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/image1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

    <pl.droidsonroids.gif.GifImageView
        android:id="@+id/image2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
</LinearLayout>


Test1:网络加载以.jpg为后缀的gif图

MianActivity: 
package com.zhangli.giftest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
import android.widget.Toast;
import com.bumptech.glide.Glide;
import com.loopj.android.http.AsyncHttpClient;
import com.loopj.android.http.AsyncHttpResponseHandler;
import java.io.IOException;
import cz.msebera.android.httpclient.Header;
import pl.droidsonroids.gif.GifDrawable;
import pl.droidsonroids.gif.GifImageView;

public class MainActivity extends AppCompatActivity {
    private String gifUrl = "http://img3.imgtn.bdimg.com/it/u=3343246039,1378013988&fm=21&gp=0.jpg";
    ImageView image1;
    GifImageView image2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        image1 = (ImageView) findViewById(R.id.image1);
        image2 = (GifImageView) findViewById(R.id.image2);

        /**
         * image1使用glide加载gif
         */
        Glide.with(this).load(gifUrl).into(image1);

        /**
         * image2使用GifImageView加载gif
         */
        AsyncHttpClient asyncHttpClient = new AsyncHttpClient();
        asyncHttpClient.get(gifUrl, new AsyncHttpResponseHandler() {
            @Override
            public void onSuccess(int i, Header[] headers, byte[] bytes) {
                GifDrawable drawable = null;
                try {
                    drawable = new GifDrawable(bytes);
                } catch (IOException e) {
                    e.printStackTrace();
                }
                image2.setBackgroundDrawable(drawable);
            }
            @Override
            public void onFailure(int i, Header[] headers, byte[] bytes, Throwable throwable) {
                Toast.makeText(getApplicationContext(),
                        "加载网络图片出错", Toast.LENGTH_SHORT).show();
            }
        });
    }
}
记得加上网络访问权限。

看看两个加载的反应。

加载gif图的两种方法及各自的差异

这是我已经运行过一次的了，因为临时打开的话真的是很慢。glide设为缓存，所以glide加载的这么快；再看Toast打印加载错误，说明在android_gif_drawable网络加载以jpg为后缀的gif图是不行的。


Test2:网络加载以.gif为后缀的gif图

private String gifUrl = "http://img5.duitang.com/uploads/blog/201405/05/20140505162717_dKQEE.thumb.200_0.gif";

改了资源路径，其他不变。

看效果：

加载gif图的两种方法及各自的差异


这里宽高指定的是wrap_content，所以大小我们先不去管它。同样的，这也是我刚已经运行了一次的，两种方法都是可以加载出来的，但是android_gif_drawable加载出来的gif图看起来很流畅，可能也有大小的原因。


Test3:加载本地的以.jpg为后缀的gif图

主要的代码：

        /**
         * image1使用glide加载gif
         */
        Glide.with(this).load(R.drawable.gif5).into(image1);

        /**
         * image2使用GifImageView加载gif
         * 如果加载的是gif动图，第一步需要先将gif动图资源转化为GifDrawable
         * 将gif图资源转化为GifDrawable
         */
        GifDrawable gifDrawable = null;
        try {
            gifDrawable = new GifDrawable(getResources(), R.drawable.gif5);
            image1.setImageDrawable(gifDrawable);
        } catch (IOException e) {
            e.printStackTrace();
        }

再看布局： 

 <ImageView
        android:id="@+id/image1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1"/>

    <pl.droidsonroids.gif.GifImageView
        android:id="@+id/image2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1"/>

    <pl.droidsonroids.gif.GifTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:drawableTop="@drawable/gif5"
        android:layout_weight="1"
        android:gravity="center"
        android:text="gif图"
        android:textColor="@android:color/holo_red_light"/>

这里添加了android_gif_drawable的第二个view：GifTextView，直接在布局中就定死了资源。

效果图：

加载gif图的两种方法及各自的差异


这次全部都加在出来了，但是这样是仅限本地的资源的。


Test4:加载本地的以.gif为后缀的gif图

代码和布局都没变，只是将gif换成了本地的以gif后缀的资源。

看效果：

加载gif图的两种方法及各自的差异

恩，都加载出来了，这次还是刚才运行了一次的，不得不说glide加载gif真的是超慢的，这次我指定了宽高都是150dp,因为刚开始glide加载不出来，我猜测图片太大的原因，确实是有这个原因的。

好了，这差不多就是这两种方法的差异了。



标签：

相关文章