Aandroid 图片加载库Glide 实战（一），初始，加载进阶到实践

最新推荐文章于 2023-02-09 19:10:07 发布

Tamic大白

最新推荐文章于 2023-02-09 19:10:07 发布

阅读量1.6k

点赞数

分类专栏： Android进阶多媒体/图像/影视频文章标签：图片加载 glide glide 内存

Android进阶同时被 2 个专栏收录

36 篇文章 2 订阅

订阅专栏

多媒体/图像/影视频

9 篇文章 0 订阅

订阅专栏

原文： http://blog.csdn.net/sk719887916/article/details/39989293 skay

初识Glide

为何使用 Glide？
有经验的 Android 开发者可以跳过这节，但对于初学者来说，你可能会问自己为什么你想要去用 Glide，而不是自己去实现。

Android 在处理图片工作的时候显得有点娘，因为它会以像素形式加载图片到内存中去，一张照片平均普通的手机摄像头尺寸是 2592x1936 像素（5百万像素）将大约会分配 19MB 内存。对于复杂的网络情况，缓存和图片处理，如果你用了一个测试完善开发完成的库，如 Glide，你会省下大量的时间，还不会让你头疼！

在这个系列，我们将看到 Glide 的很多特性，去看下这篇博客的提纲，并考虑你是否真的要去开发所有这些功能。

添加 Glide

希望我们现在已经说服你去用一个库去处理你的图片加载请求了。如果你想要了解更多 Glide 的情况，这就是为你准备的指南！

首先，添加 Glide 到你的依赖中，写这篇博客的时候，最新的版本是 Glide 是 3.6.1(译者：现在是3.7.0了)

Gradle

和大多数依赖一样，在一个 Gradle 项目中在你的 build.gradle 中添加下面这行代码：

compile 'com.github.bumptech.glide:glide:3.6.1'

Maven

Glide 也支持 Maven 项目：

<dependency>
    <groupId>com.github.bumptech.glide</groupId>
    <artifactId>glide</artifactId>
    <version>3.6.1</version>
    <type>aar</type>
    </dependency>

第一次：从一个 URL 中加载图片
就像 Picasso， Glide 库是使用流接口(fluent interface)。对一个完整的功能请求，Glide 建造者要求最少有三个参数。

with(Context context) - 对于很多 Android API 调用，Context 是必须的。Glide 在这里也一样
load(String imageUrl) - 这里你可以指定哪个图片应该被加载，同上它会是一个字符串的形式表示一个网络图片的 URL
into(ImageView targetImageView) 你的图片会显示到对应的 ImageView 中。

理论解释总是苍白的，所以，看一下实际的例子吧：

    ImageView targetImageView = (ImageView) findViewById(R.id.imageView);
    String internetUrl = "http://i.imgur.com/DvpvklR.png";

    Glide
    .with(context)
    .load(internetUrl)
    .into(targetImageView);

就这样！如果图片的 URL 存在并且你的 ImageView 是可见的，你会在几秒后看到图片。万一图片不存在，Glide 会返回一个错误的回调（我们会在后面讨论这个）。你可能已经相信这三行代码对你而言是有用的，但是这只是冰山一角啦。

加载方式

从资源中加载

首先从Android 资源中加载，使用一个资源 id (int)，来替换之前使用字符串去指明一个网络 URL 的情况。

int resourceId = R.mipmap.ic_launcher;
    
    　Glide
    .with(context)
    .load(resourceId)
    .into(imageViewResource);

如果你对于 R.mipmap 有困惑，这是 Android 处理 icon 的新方式。

当然，你可以直接为 ImageView 类去设置资源。然而，如果你用的高级话题如动态转换来说，这可能是比较有趣的。

从文件中加载

其次是从文件中加载，当你让用户选择一张照片去显示图像（比如画廊）这可能会比较有用。该参数只是一个文件对象。我们看一个例子：

　　　//这个文件可能不存在于你的设备中。然而你可以用任何文件路径，去指定一个图片路径。
　　
　　 `　

File file = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), "Running.jpg");`
    
    Glide
    .with(context)
    .load(file)
    .into(imageViewFile);

从 Uri 中加载
最后，你也指定一个 Uri 来加载图片。该请求和之前的没有什么不同。

//这可能是任何 Uri。为了演示的目的我们只是用一个 launcher icon 去创建了一个 Uri
　

`Uri uri = resourceIdToUri(context, R.mipmap.future_studio_launcher);`

    Glide
    .with(context)
    .load(uri)
    .into(imageViewUri);

一个小助手功能：简单的从资源 id 转换成 Uri。

    public static final String ANDROID_RESOURCE = "android.resource://";
    public static final String FOREWARD_SLASH = "/";
    
    private static Uri resourceIdToUri(Context context, int resourceId) {
    return Uri.parse(ANDROID_RESOURCE + context.getPackageName() + FOREWARD_SLASH + resourceId);
    }

然而， Uri 不必从资源中去生成，它可以是任何 Uri。

画廊实现示例：ListView

首先我们需要一些测试图片。我们从我们的 eatfoody.com 项目中去拿了一些图片。

  public static String[] eatFoodyImages = {
    "http://i.imgur.com/rFLNqWI.jpg",
    "http://i.imgur.com/C9pBVt7.jpg",
    "http://i.imgur.com/rT5vXE1.jpg",
    "http://i.imgur.com/aIy5R2k.jpg",
    "http://i.imgur.com/MoJs9pT.jpg",
    "http://i.imgur.com/S963yEM.jpg",
    "http://i.imgur.com/rLR2cyc.jpg",
    "http://i.imgur.com/SEPdUIx.jpg",
    "http://i.imgur.com/aC9OjaM.jpg",
    "http://i.imgur.com/76Jfv9b.jpg",
    "http://i.imgur.com/fUX7EIB.jpg",
    "http://i.imgur.com/syELajx.jpg",
    "http://i.imgur.com/COzBnru.jpg",
    "http://i.imgur.com/Z3QjilA.jpg",
    };

其次，我们需要一个 activity，它创建一个 adapter 并设置给一个 ListView。

public class UsageExampleAdapter extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_usage_example_adapter);

        listView.setAdapter(new ImageListAdapter(UsageExampleAdapter.this, eatFoodyImages));
    }
}

再次，看下 adapter 的布局文件。这个 ListView 的 item 的布局文件是非常简单的。

 
    <?xml version="1.0" encoding="utf-8"?>
    <ImageView xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="200dp"/>

这回显示一个图片列表，每个的高度是 200dp，并且填充设备的宽度。显然，这不是最好的图片画廊，不过，不要在意这些细节。

在这之前，我们需要为 ListView 实现一个 adapter。让它看起来是简单的，并绑定我们的 eatfoody 样本图片到 adapter。每个 item 会显示一个图片。

 public class ImageListAdapter extends ArrayAdapter {
    private Context context;
    private LayoutInflater inflater;
    
    private String[] imageUrls;
    
    public ImageListAdapter(Context context, String[] imageUrls) {
    super(context, R.layout.listview_item_image, imageUrls);
    
    this.context = context;
    this.imageUrls = imageUrls;
    
    inflater = LayoutInflater.from(context);
    }
    
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
    if (null == convertView) {
    convertView = inflater.inflate(R.layout.listview_item_image, parent, false);
    }
    
    Glide
    .with(context)
    .load(imageUrls[position])
    .into((ImageView) convertView);
    
    return convertView;
    }

    }

有趣的事情发生在 ImageListAdapter 类里的 getView() 方法中。你会看到 Glide 调用方式和之前的’常规’加载图片的方式是完全一样的。不管你在应用中想要如何去加载，Glide 的使用方式总是一样的。

作为一个进阶的 Android 开发者你需要知道我们需要去重用 ListView 的布局，去创建一个快速又顺滑滚动的体验。Glide 的魅力是自动处理请求的取消，清楚 ImageView，并加载正确的图片到对应的 ImageView。

ListView with eatfoody Images

Glide 的一个优势：缓存
当你上下滚动很多次，你会看到图片显示的之前的快的多。在比较新的手机上，这甚至都不需要时间去等。你可以会猜测，这些图片可能是来自缓存，而不再是从网络中请求。Glide 的缓存实现是基于 Picasso，这对你来说会更加全面的而且做很多事情会更加容易。缓存实现的大小是依赖于设备的磁盘大小。

当加载图片时，Glide 使用3个来源：内存，磁盘和网络（从最快到最慢排序）。再说一次，这里你不需要做任何事情。Glide 帮你隐藏了所有复杂的情况，同时为你创建了一个智能的缓存大小。我们将在以后的博客中去了解这块缓存知识。

画廊实现示例：GridView

对于 GridView 来说这和 ListView 的实现并没有什么不同，你实际上可以用相同的 adapter，只需要在 activity 的布局文件改成 GridView:

   <?xml version="1.0" encoding="utf-8"?>
    <GridView
    android:id="@+id/usage_example_gridview"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:numColumns="2"/>

这是结果：

其他应用：ImageView 作为元素

目前为止，我们仅仅看了整个 adapter 的 item 是一个 ImageView。该方法仍然应用于一个或者多个 ImageView 作为 adapter item 的一部分的情况。你的 getView() 代码会有一点不同，但是 Glide 项的加载方式是完全相同的。

展望

下篇你将会看到 Glide 占位符和渐现动画，图片重设大小和缩放，显示 Gif 和 Video等相关技术

原文：http://mrfu.me/2016/02/27/Glide_Advanced_Loading/

CSDN原文： http://blog.csdn.net/sk719887916/article/details/39989293 skay