Glide — 適配器 (ListView, GridView)

原文：ListAdapter (ListView, GridView)
作者：Norman Peitek
翻譯：Dexter0218

這個系列的前兩篇文章已經展示了如何加載一張圖片到ImageVIew里。這一節我們要展示ListView和GridView里adapter如何處理每個單元內的ImageView加載圖片。這跟相冊應用處理圖片類似。

Glide 系列概覽

1. 入門簡介
2. 高級加載
3. 適配器(ListView, GridView)
4. 占位圖& 淡入淡出動畫
5. 圖片大小 & 縮放
6. 播放GIF & 視頻
7. 緩存基礎
8. 請求優先級
9. 縮略圖
10. 回調：定制view中使用SimpleTarget和ViewTarget
11. 通知欄和桌面小控件的圖片加載
12. 異常: 調試和報錯處理
13. 自定義變換
14. 用animate()定制動畫
15. 整合網絡協議棧
16. 用Modules定制Glide
17. Glide Module 案例: 接受自簽名HTTPS證書
18. Glide Module 案例: 自定義緩存
19. Glide Module 案例: 通過加載自定義大小圖片優化
20. 動態使用 Model Loaders
21. 如何旋轉圖片
22. 系列綜述

相冊展示: ListView

第一步，我們需要準備些測試圖片。我們從eatfoody.com網站獲取一些美食圖片鏈接imgur

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的layout文件，非常簡單：

<?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"/>

這個xml文件里的配置會影響到列表里的每個圖片，所有圖片的高度都設置為200dp，寬度適配設備的寬度。雖然上面的配置顯示出的圖片不是很優美，但這不是本文的重點關注的內容。

在我們看到結果之前，我們需要為這個ListView實現這個adapter。讓我們的美食圖片綁定到適配器，每一欄顯示一張圖片。

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;
    }
}

在ImageListView的getView（）方法里，你會驚奇地發現Glide的調用是跟之前介紹的常規加載方法一致，不管在什么樣子的app中使用Glide，使用Glide的方式都是一樣的。

作為一個資深的Android開發者，你應當知道如何在ListView復用layout，來讓滑動操作更加快速流暢。你不用擔心滑動過程中的一些其他問題，Glide可以自動地處理請求的取消、ImageView的回收，并且加載正確的圖片到對應的ImageView里。

ListView with eatfoody Images

Glide的強項: 緩存

當你不斷向上向下滑動多次后，你會發現圖片會比之前加載地更快。在新手機上，可能需要稍微多等一會。你可以很容易想到，這些圖片由于被緩存到磁盤上，用的時候不必再從網絡獲取。Glide的緩存實現是基于Picasso的一個方法，讓你可以更簡單地使用。具體可以緩存的大小取決于設備磁盤的大小。

當加載一張圖片時，Glide使用這些資源：內存、磁盤和網絡（根據由快到慢）。第二次加載的時候，你啥都不用做，一旦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"/>

上面的效果如下：

GridView with eatfoody Images

其他應用: 當ImageVIew是一個子控件

目前為止，我們只介紹了整個adapter內只有一個ImageView。當ImageView只是adapter內很多控件中的一小部分控件時，這個方法依然適用。只是你的getView()代碼可能有些許不一樣，但用Glide加載都是一樣的方式。

展望

到目前為止，你已經學會了在Android中用Glide加載圖片90%的情況。在我們學習剩余的一些情況前，我們先解釋一下Glide額外的功能。隨后的文章，我們將介紹占位圖和動畫。