寫在前面:這篇文章原著是Norman Peitek,所有著作權(quán)歸原作者所有俯萎,我只是在學(xué)習(xí)Glide的時(shí)候看到有間書的作者 weiyf 寫了雙語的翻譯凉袱,覺得非常好,但是作者只寫了幾篇侦铜,估計(jì)是比較忙吧专甩。于是我就去看原博了,發(fā)現(xiàn)原博的英文也不會很難懂钉稍,這里只是方便學(xué)習(xí)做了翻譯(順便學(xué)英語(逃)涤躲,建議英文基礎(chǔ)還可以的同學(xué)直接看原文:https://futurestud.io/tutorials/glide-image-resizing-scaling
前幾篇傳送門:
- 【雙語】Glide — 入門(Glide — Getting Started)
- 【雙語】Glide — 高級加載(Glide — Advanced Loading)
- 【雙語】Glide — 列表適配器(ListView, GridView)(Glide — ListAdapter (ListView, GridView))
- Glide-Placeholders & Fade Animations(默認(rèn)圖與過渡動畫)
原文傳送門:
- Displaying Gifs & Videos
- Caching Basics
- Request Priorities
- Thumbnails
- Callbacks: SimpleTarget and ViewTarget for Custom View Classes
- Loading Images into Notifications and AppWidgets
- Exceptions: Debugging and Error Handling
- Custom Transformations
- Custom Animations with animate()
- Integrating Networking Stacks
- Customize Glide with Modules
- Glide Module Example: Accepting Self-Signed HTTPS Certificates
- Glide Module Example: Customize Caching
- Glide Module Example: Optimizing By Loading Images In Custom Sizes
- Dynamically Use Model Loaders
- How to Rotate Images
- Series Roundup
- *Advanced ListViews With Images
- *App Release Preparation
- How to Choose the Best Caching Preference
- How to Ignore URL Query Parameters In Cache Lookup (soon)
- Network-Dependent Image Loading (soon)
正文:
在上一篇博文里,你學(xué)習(xí)了如何從不同的源加載圖片并且設(shè)置不同的占位符贡未。如果你還不會在加載的時(shí)候調(diào)整和裁剪圖片种樱,那么本周的博文就很重要啦!
用resize(x,y)設(shè)置圖片大小
通常來說俊卤,如果你的服務(wù)器或者API能為你提供你需要的尺寸的圖片嫩挤,那么是最好的。因?yàn)檫@需要在帶寬消恍、內(nèi)存消耗岂昭、圖片質(zhì)量之前做一個(gè)平衡。
與Picasso相比狠怨,Glide在內(nèi)存消耗上更高效约啊、更智能邑遏。Glide會根據(jù)所剩的內(nèi)存和ImageView的大小自動限制圖片的尺寸。Picasso也有相似的特性恰矩,但是它需要手動調(diào)用.fit()记盒,對于Glide而言,如果某些圖片不應(yīng)該被自動調(diào)整外傅,那么執(zhí)行override(horizontalSize, verticalSize)纪吮,那么這個(gè)圖片會在顯示到ImageView之前被調(diào)整為需要的尺寸。
Glide
.with(context)
.load(UsageExampleListViewAdapter.eatFoodyImages[0])
.override(600, 200) //按照這個(gè)像素栏豺,調(diào)整圖片的尺寸彬碱,不保持長寬比例
.into(imageViewResize);
這對于某些情況是挺實(shí)用的:當(dāng)你要加載圖片到未知尺寸的View上時(shí);比如奥洼,如果app想要在啟動頁面加載緩存(原文:if the app wants to warm up the cache in the splash screen( warm up the cache不知道啥意思(逃)巷疼,此時(shí)還不能測量ImageView的尺寸。然而灵奖,如果你已經(jīng)知道圖片需要多大的尺寸嚼沿,那么使用override可以得到特定大小的圖片。
圖片裁剪
現(xiàn)在瓷患,因?yàn)槿魏螌D片的處理骡尽、調(diào)整都會導(dǎo)致圖片的比例扭曲從而圖片看起來很丑。在大部分應(yīng)用場景下擅编,你都希望避免這種情況的發(fā)生攀细。Glide提供了一些常用的變換來改變圖片的顯示。它附帶了兩個(gè)基本選項(xiàng): centerCrop和fitCenter爱态。
CenterCrop
CenterCrop()
是一種“去除多余”的裁剪方式谭贪,它會把ImageView邊界以外的部分裁剪掉。這樣一來ImageView會被填充滿锦担,但是這張圖片可能不會完整地顯示出來(ps:因?yàn)槌霾糠侄急徊眉舻袅?俭识。
Glide
.with(context)
.load(UsageExampleListViewAdapter.eatFoodyImages[0])
.override(600, 200) // resizes the image to these dimensions (in pixel)
.centerCrop() // this cropping technique scales the image so that it fills the requested bounds and then crops the extra.
.into(imageViewResizeCenterCrop);
FitCenter
FitCenter()
是一種“中心匹配”的方式裁剪方式,它裁剪出來的圖片長寬都會小于等于ImageView的大小洞渔,這樣一來套媚。圖片會完整地顯示出來,但是ImageView可能并沒有被填充滿磁椒。
Glide
.with(context)
.load(UsageExampleListViewAdapter.eatFoodyImages[0])
.override(600, 200)
.fitCenter()
.into(imageViewResizeFitCenter);
在后面的文章里堤瘤,我們將會提到除了CenterCrop和FitCenter以外,其他一些自定義的變換衷快。
展望
在這篇文章里宙橱,學(xué)習(xí)了如何調(diào)整圖片顯示的尺寸。這對于設(shè)計(jì)一款優(yōu)秀的app是非常有用的。在我們學(xué)習(xí)Glide更多高級應(yīng)用之前师郑,我們再多講一個(gè)Glide特有的功能:顯示Gif圖片和視頻环葵。