1. 程式人生 > >3.Glide使用之ListAdapter載入圖片篇

3.Glide使用之ListAdapter載入圖片篇

首先先介紹最簡單的列表圖片載入(單個ImageView元素)
最簡單的相簿樣式列表
1.定義資料來源(這裡上傳了一些網路圖片)

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

2.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)); } }

3.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"/>

4.定製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;
    }
}

雖然和常規的載入圖片的方式沒什麼區別,但需要注意的是,在ListView中我們一般會需要複用佈局的View來創造更快更平滑的使用者體驗。此處Glide會自動取消圖片的請求,清除圖片複用,載入正確合適的圖片顯示ImageView上。

強調一點:當你上下滾動列表時,你會發現圖片比第一次載入快很多,更新時,圖片載入幾乎不需要時間。不用猜了,這些圖片來自於快取,不會再次從網路載入。
Glide的快取實現是基於Picasso的,從而使快取實現對你來說更容易實現(這裡是對用過Picasso框架的夥伴而言的)。快取的大小取決於裝置的磁碟大小。
載入圖片的時候,Glide使用了三種資源:記憶體,磁碟,網路(速度由快變慢)。(tips:也就是三級快取實現)。當然,你什麼都不需要做,Glide會幫你實現,Glide隱藏了這些複雜的具體實現,並且實現了智慧快取圖片的大小。下面的博文會詳細介紹。

簡單的相簿圖片載入實現:GridView
和ListView的使用方式相同,甚至Adapter也相同,只是將ListView改為GridView

Activity layout

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

目前為止,我們只展示了item只為一個元素的ListView Adapter的用法,當然這種方式也適用於多個元素的Adapter item。getView()方法略有不同,但Glide載入圖片的程式碼是相同的。