🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
这个系列的前两篇博客已经展示了如何去加载一张图片到一个 ImageView中。这篇博客将会演示 ListView 和 GridView 的 adapter 中实现。每个单元格包含一个 ImageView。这有点类似于 很多图片画廊应用。  **画廊实现示例: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](https://developer.android.com/reference/android/widget/Adapter.html?hl=zh-cn)。让它看起来是简单的,并绑定我们的 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`。 ![](http://i.imgur.com/hPjQopT.png) **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"/> ~~~ 这是结果: ![](http://i.imgur.com/t9pbuLW.png) **其他应用:ImageView 作为元素** 目前为止,我们仅仅看了整个 adapter 的 item 是一个 `ImageView`。该方法仍然应用于一个或者多个 ImageView 作为 adapter item 的一部分的情况。你的 `getView()` 代码会有一点不同,但是 Glide 项的加载方式是完全相同的。 **展望** 在此,你已经学会如何用 Glide 加载图片的 90%的 Android 使用场景了。在我们覆盖额外的案例之前,我们需要解释 Glide 的额外能力(除了图片加载和缓存)。即:下周将将会关注占位符和动画。