⑴ 圖文講解Android ImageView的ScaleType,幫你徹底搞明白
一般來說,要把一張圖片顯示在ImageView上,有下面幾個問題需要考慮:
在真實的產品環境中,一個ImageView的大小往往都是有限制的,至少長或寬有一條邊是有限制的,所以,在ImageView上顯示圖片還需要考慮:
第二個問題,還可以細化成:
怎麼樣,簡單的一個顯示圖片操作,就有這么多細節需要考慮。下面的章節,我們就抓住上面幾點,通過實際的例子幫你理解ScaleType的各個屬性值。
首先看下實際效果:
一句話總結FIT_XY:就是以不按原比例伸縮為代價,強制讓圖片充滿ImageView ,同時圖片所有的部分也會完整顯示出來(雖然可能變形)。但是,因為其不按原比例伸縮的特點,真實的產品中不太常用,因為圖片被拉伸變形往往是不可以接受的。(上面例子中的美女已經被拉伸的不成樣子了)
還是先看下例子:
這個屬性值的名稱雖然是CENTER,但是和一般意義上的「居中」有很大不同。 這個屬性值即不會保證填滿ImageView,也不保證圖片會完整顯示。 當實際圖片比ImageView小的時候,就是「居中顯示」。當圖片比ImageView大,就把圖片中間的部分顯示在ImageView里,其他的裁剪掉不顯示。(上面第二組圖尤其明顯)
先看例子:
FIT_CENTER更接近於大家理解的「居中顯示」,也是平時用的最多的一個值。 首先,這個屬性會保證圖片完整顯示,不管圖片和ImageView的大小關系。而且伸縮的時候是按照比例做的,所以圖片質量也可以得到保證。 唯一的問題是,FIT_CENTER不保證會填滿ImageView。對於大多數場景,這個也足夠了。
FIT_START,FIT_END和FIT_CENTER差不多,就不詳細介紹了。
先看例子:
CENTER_CROP,是個非常重要的值,但是很多同學對它並不是很了解。首先,這個屬性值的名字很奇怪,很難猜出來其真實的含義;其次,它的官方介紹簡直又臭又長,讓人一頭霧水:
其實,CENTER_CROP的特點總結起來很簡單: 以可能裁切掉部分圖片為代價,讓圖片充滿ImageView。
可以和FIT_XY做下對比, CENTER_CROP和FIT_XY是唯二的可以保證填滿ImageView的值 。所不同的是,FIT_XY是以不保持原始比例伸縮為代價(但是保證原圖全部顯示出來);而CENTER_CROP是以不能顯示完整原圖為代價(但是保證原圖的原始比例)。
二者都會按原始比例伸縮圖片,所不同的是, CENTER_CROP將圖片伸縮到填滿ImageView為止,FIT_CENTER伸縮到圖片完整並居中顯示為止。
下面兩個動圖可以讓你看得更清楚:
先看例子:
CENTER_INSIDE又是一個奇怪的值,原文的解釋也是讓人看不懂:
其實總結起來很簡單: 當原圖大於ImageView的時候,相當於FIT_CENTER。當原圖小於等於ImageView的時候,相當於CENTER。
看下例子
MATRIX的效果比較簡單: 不改變原圖的大小,從ImageView的左上角開始繪制,超出部分做剪切處理。 不保證填滿ImageView,也不保證圖片完全顯示。和CENTER有點類似。反正我在項目中是沒有用過這個值。
下面的表格總結了下各個屬性值的特點,注意,表格中為「是」並不是說一定會發生,只是說明有這種可能。
最後再給大家出一道思考題,看看大家的掌握情況:
相信通過學習本文章,聰明的你很快就能找到答案。