Android開發筆記(一百七十一)使用Glide加載網絡圖片

如何方便而又快速地顯示網絡圖片,一直是安卓網絡編程的熱門課題,前些年圖片緩存框架Picasso、Fresco等等大行其道,以至於谷歌按捺不住也開發了自己的Glide開源庫。由於Android本身就是谷歌開發的,Glide與Android系出同門,因此Glide成爲事實上的官方推薦圖片緩存框架。不過Glide並未集成到Android的SDK當中,開發者需要另外給App工程導入Glide庫,也就是修改模塊的build.gradle,在dependencies節點內部添加如下一行依賴庫配置:

    implementation 'com.github.bumptech.glide:glide:4.11.0'

導包完成之後,即可在代碼中正常使用Glide。當然Glide的用法確實簡單,默認情況只要以下這行代碼就夠了:

        Glide.with(活動實例).load(網址字符串).into(圖像視圖);

可見Glide的圖片加載代碼至少需要三個參數,說明如下:
1、當前頁面的活動實例,參數類型爲Activity。如果是在頁面代碼內部調用,則填寫this表示當前活動即可。
2、網絡圖片的鏈接地址,以http或者https打頭,參數類型爲字符串。
3、準備顯示網絡圖片的圖像視圖實例,參數類型爲ImageView。
假設在Activity內部調用Glide,且圖片鏈接放在mImageUrl,演示的圖像視圖名叫iv_network,那麼實際的Glide加載代碼是下面這樣的:

        Glide.with(this).load(mImageUrl).into(iv_network);

如果不指定圖像視圖的拉伸類型,Glide默認採用FIT_CENTER方式顯示圖片,相當於在load方法和into方法中間增加調用fitCenter方法,就像如下代碼這般:

        // 顯示方式爲容納居中fitCenter
        Glide.with(this).load(mImageUrl).fitCenter().into(iv_network);

除了fitCenter方法,Glide還提供了centerCrop方法對應CENTER_CROP,提供了centerInside方法對應CENTER_INSIDE,其中增加centerCrop方法的加載代碼如下所示:

        // 顯示方式爲居中剪裁centerCrop
        Glide.with(this).load(mImageUrl).centerCrop().into(iv_network);

增加centerInside方法的加載代碼如下所示:

        // 顯示方式爲居中入內centerInside
        Glide.with(this).load(mImageUrl).centerInside().into(iv_network);

另外,Glide還支持圓形剪裁,即只顯示圖片中央的圓形區域,此時方法調用改成了circleCrop,具體代碼示例如下:

        // 顯示方式爲圓形剪裁circleCrop
        Glide.with(this).load(mImageUrl).circleCrop().into(iv_network);

以上四種顯示方式的界面效果分別如下列四圖所示。


雖然Glide支持上述四種顯示類型,但它無法設定FIT_XY對應的平鋪方式,若想讓圖片平鋪至充滿整個圖像視圖,還得調用圖像視圖的setScaleType方法,將拉伸類型設置爲ImageView.ScaleType.FIT_XY。
一旦把圖像視圖的拉伸類型改爲FIT_XY,則之前的四種顯示方式也將呈現不一樣的景象,拉伸類型變更後的界面分別如下列四圖所示。


圖片緩存框架之所以高效,是因爲它不但封裝了訪問網絡的步驟,而且引入了三級緩存機制。具體說來,是先到內存中查找圖片,有找到就直接顯示內存圖片,沒找到的話再去磁盤查找圖片;在磁盤能找到就直接顯示磁盤圖片,沒找到的話再去請求網絡;如此便形成“內存→磁盤→網絡”的三級緩存。
對於Glide而言,默認已經開啓了三級緩存機制,當然也可以根據實際情況另行調整。除此之外,Glide還提供了一些個性化的功能,方便開發者定製不同場景的需求。具體到編碼上,則需想辦法將個性化選項告知Glide,比如下面這句圖片加載代碼:

        Glide.with(this).load(mImageUrl).into(iv_network);

可以拆分爲以下兩行代碼:

        // 構建一個加載網絡圖片的建造器
        RequestBuilder<Drawable> builder = Glide.with(this).load(mImageUrl);
        builder.into(iv_network); // 在圖像視圖上展示網絡圖片

原來load方法返回的是請求建造器,調用建造器對象的into方法,方能在圖像視圖上展示網絡圖片。除了into方法,建造器RequestBuilder還提供了apply方法,該方法表示啓用指定的請求選項。於是添加了請求選項的完整代碼示例如下:

        // 構建一個加載網絡圖片的建造器
        RequestBuilder<Drawable> builder = Glide.with(this).load(mImageUrl);
        RequestOptions options = new RequestOptions(); // 創建glide的請求選項
        // 在圖像視圖上展示網絡圖片。apply方法表示啓用指定的請求選項
        builder.apply(options).into(iv_network);

可見請求選項爲RequestOptions類型,詳細的選項參數就交給它的下列方法了:
placeholder:設置加載開始的佔位圖。在得到網絡圖片之前,會先在圖像視圖展現佔位圖。
error:設置發生錯誤的提示圖。網絡圖片獲取失敗之時,會在圖像視圖展現提示圖。
override:設置圖片的尺寸。注意該方法有多個重載方法,倘若調用只有一個參數的方法並設置Target.SIZE_ORIGINAL,表示展示原始圖片;倘若調用擁有兩個參數的方法,表示先將圖片縮放到指定的寬度和高度,再展示縮放後的圖片。
diskCacheStrategy:設置指定的緩存策略。
skipMemoryCache:設置是否跳過內存緩存(但不影響硬盤緩存)。爲true表示跳過,爲false表示不跳過。
disallowHardwareConfig:關閉硬件加速,防止過大尺寸的圖片加載報錯。
fitCenter:保持圖片的寬高比例並居中顯示,圖片需要頂到某個方向的邊界但不能越過邊界,對應拉伸類型FIT_CENTER。
centerCrop:保持圖片的寬高比例,充滿整個圖像視圖,剪裁之後居中顯示,對應拉伸類型CENTER_CROP。
centerInside:保持圖片的寬高比例,在圖像視圖內部居中顯示,圖片只能拉小不能拉大,對應拉伸類型CENTER_INSIDE。
circleCrop:展示圓形剪裁後的圖片。
另外,Glide允許播放加載過程的漸變動畫,讓圖片從迷霧中逐漸變得清晰,有助於提高用戶體驗。這個漸變動畫通過建造器的transition方法設置,調用代碼例子如下所示:

        builder.transition(DrawableTransitionOptions.withCrossFade(3000)); // 設置時長3秒的漸變動畫

加載網絡圖片的漸變過程效果如下面兩圖所示。

 


點此查看Android開發筆記的完整目錄

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章