我們甚至沒有必要去解釋和討論:空 `ImageView` 在任何 UI 上都是不好看的。如果你用 Glide,你很可能是通過網絡連接加載圖像。根據你用戶的環境,這可能需要花費很多的時間。一個預期的行為是一個APP 去顯示一個占位符直到這張圖片加載處理完成。
Glide 的流式接口讓這個變得非常容易的去做到!只需要調用 `.placeHolder() `用一個 drawable(resource) 引用,Glide 將會顯示它作為一個占位符,直到你的實際圖片準備好。
Glide
.with(context)
.load(UsageExampleListViewAdapter.eatFoodyImages[0])
.placeholder(R.mipmap.ic_launcher) // can also be a drawable
.into(imageViewPlaceholder);
做為一個顯而易見的原因,你不能設置一個網絡 url 作為占位符,因為這也會被去請求加載的。App 資源和 drawable 能保證可用和可訪問的。然而,作為 load() 方法的參數,Glide 接受所有值。這可能不是可加載的(沒有網絡連接,服務器宕機…),刪除了或者不能訪問。在下一節中,我們將討論一個錯誤的占位符。
錯誤占位符:.error()?
假設我們的 App 嘗試從一個網站去加載一張圖片。Glide 給我們一個選項去獲取一個錯誤的回調并采取合適的行動。我們會在后面來討論,對現在來說,可能太復雜了。在大多數情況下使用占位符,來指明圖片不能被加載已經足夠了。
調用 Glide 的流式接口和之前顯示預加載占位符的例子是相同的,不同的是調用了名為 error() 的函數。
Glide
.with(context)
.load("http://futurestud.io/non_existing_image.png")
.placeholder(R.mipmap.ic_launcher) // can also be a drawable
.error(R.mipmap.future_studio_launcher) // will be displayed if the image cannot be loaded
.into(imageViewError);
就這樣。如果你定義的 load() 值的圖片不能被加載出來,Glide 會顯示 R.mipmap.future_studio_launcher 作為替換。再說一次,error()接受的參數只能是已經初始化的 drawable 對象或者指明它的資源(R.drawable.<drawable-keyword>)。
使用 crossFade()?
無論你是在加載圖片之前是否顯示一個占位符,改變 ImageView 的圖片在你的 UI 中有非常顯著的變化。一個簡單的選項是讓它改變是更加平滑和養眼的,就是使用一個淡入淡出動畫。Glide 使用標準的淡入淡出動畫,這是(對于當前版本3.6.1)默認激活的。如果你想要如強制 Glide 顯示一個淡入淡出動畫,你必須調用另外一個建造者:
Glide
.with(context)
.load(UsageExampleListViewAdapter.eatFoodyImages[0])
.placeholder(R.mipmap.ic_launcher) // can also be a drawable
.error(R.mipmap.future_studio_launcher) // will be displayed if the image cannot be loaded
.crossFade()
.into(imageViewFade);
crossFade() 方法還有另外重載方法 .crossFade(int duration)。如果你想要去減慢(或加快)動畫,隨時可以傳一個毫秒的時間給這個方法。動畫默認的持續時間是 300毫秒。
使用 dontAnimate()?
如果你想直接顯示圖片而沒有任何淡入淡出效果,在 Glide 的建造者中調用 .dontAnimate() 。
Glide
.with(context)
.load(UsageExampleListViewAdapter.eatFoodyImages[0])
.placeholder(R.mipmap.ic_launcher) // can also be a drawable
.error(R.mipmap.future_studio_launcher) // will be displayed if the image cannot be loaded
.dontAnimate()
.into(imageViewFade);
這是直接顯示你的圖片,而不是淡入顯示到 ImageView。請確保你有更好的理由來做這件事情。
需要知道的是所有這些參數都是獨立的,而不需要彼此依賴的。比如,你可以設定 .error() 而不調用 .placeholder()。你可能設置 crossFade() 動畫而沒有占位符。任何參數的組合都是可能的。
展望?
希望你在這篇博客中理解并學到很多。這對于一個良好的用戶體驗是非常重要的,即圖片不會沒有預期的突然蹦出來。同樣的,當有什么事情出錯時,使其有明顯的提示。Glide 協助你容易的去這些方法,提供的這些事情去幫你做一個更好的 App。
但是我們的優化還沒有做完。下周,我們將會看到圖像大小和縮放。
- 前言
- 一開始
- 二加載進階
- 三ListAdapter(ListView, GridView)
- 四占位符 和 漸現動畫
- 五圖片重設大小 和 縮放
- 六顯示 Gif 和 Video
- 七緩存基礎
- 八請求優先級
- 九縮略圖
- 十回調:SimpleTarget 和 ViewTarget 用于自定義視圖類
- 十一加載圖片到通知欄和應用小部件中
- 十二異常:調試和錯誤處理
- 十三自定義轉換
- 十四用 animate() 自定義動畫
- 十五集成網絡棧
- 十六用 Module 自定義
- 十七Module 實例:接受自簽名證書的 HTTPS
- 十八Module 實例:自定義緩存
- 十九Module 實例:用自定義尺寸優化加載的圖片
- 二十動態使用 Model Loader
- 二十一如何旋轉圖像
- 二十二系列綜述