這個系列的前兩篇博客已經展示了如何去加載一張圖片到一個 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`。

**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 加載圖片的 90%的 Android 使用場景了。在我們覆蓋額外的案例之前,我們需要解釋 Glide 的額外能力(除了圖片加載和緩存)。即:下周將將會關注占位符和動畫。
- 前言
- 一開始
- 二加載進階
- 三ListAdapter(ListView, GridView)
- 四占位符 和 漸現動畫
- 五圖片重設大小 和 縮放
- 六顯示 Gif 和 Video
- 七緩存基礎
- 八請求優先級
- 九縮略圖
- 十回調:SimpleTarget 和 ViewTarget 用于自定義視圖類
- 十一加載圖片到通知欄和應用小部件中
- 十二異常:調試和錯誤處理
- 十三自定義轉換
- 十四用 animate() 自定義動畫
- 十五集成網絡棧
- 十六用 Module 自定義
- 十七Module 實例:接受自簽名證書的 HTTPS
- 十八Module 實例:自定義緩存
- 十九Module 實例:用自定義尺寸優化加載的圖片
- 二十動態使用 Model Loader
- 二十一如何旋轉圖像
- 二十二系列綜述