圖文講解ImageView的ScaleType


 ScaleType的設置方式包括:

1. 在layout的xml中定義android:scaleType="xxx";
2. 在java代碼中調用imageView.setScaleType(ImageView.ScaleType.XXX)。

ScaleType的取值包括:
MATRIX、FIT_XY、FIT_START、FIT_CENTER、FIT_END、CENTER、CENTER_CROP、CENTER_INSIDE;

 

今天和大家聊一個比較基礎的話題,Android里ImageView的ScaleType屬性,這個屬性決定了一張圖片如何顯示在ImageView上,常用的值有以下幾個:

CENTER,CENTER_CROP,CENTER_INSIDE,FIT_CENTER,FIT_END,FIT_START,FIT_XY,MATRIX。

相信ScaleType屬性大家都不會陌生。但是,在真實的使用過程中,很多同學總是要實際調試幾次才能找到自己的需要的ScaleType值。這說明關於ScaleType,還有些小細節還不是特別清楚。

這篇文章就通過實際的例子,幫你徹底搞懂ScaleType。

總結

下面的表格總結了下各個屬性值的特點,注意,表格中為“是”並不是說一定會發生,只是說明有這種可能。

 
屬性值對比
 

問題分析:

一般來說,要把一張圖片顯示在ImageView上,有下面幾個問題需要考慮:

1,ImageView會不會被填滿?

2,圖片會不會完整顯示?

3,圖片會不會被伸縮,如果是的話,是否按原始比例伸縮?

在真實的產品環境中,一個ImageView的大小往往都是有限制的,至少長或寬有一條邊是有限制的,所以,在ImageView上顯示圖片還需要考慮:

1,真實的圖片比ImageView要小,會怎么顯示?

2,真實的圖片比ImageView要大,會怎么顯示?

第二個問題,還可以細化成:

1,真實的圖片長寬都比ImageView的長寬要大,會怎么顯示?

2,真實的圖片長或寬有一條邊比ImageView要大,另一條邊比ImageView要小,會怎么顯示?

怎么樣,簡單的一個顯示圖片操作,就有這么多細節需要考慮。下面的章節,我們就抓住上面幾點,通過實際的例子幫你理解ScaleType的各個屬性值。


FIT_XY

一句話總結FIT_XY:就是以不按原比例伸縮為代價,強制讓圖片充滿ImageView,同時圖片所有的部分也會完整顯示出來(雖然可能變形)。但是,因為其不按原比例伸縮的特點,真實的產品中不太常用,因為圖片被拉伸變形往往是不可以接受的。(上面例子中的美女已經被拉伸的不成樣子了)

FIT_XY的效果

 


CENTER

  這個屬性值的名稱雖然是CENTER,但是和一般意義上的“居中”有很大不同。這個屬性值即不會保證填滿ImageView,也不保證圖片會完整顯示。當實際圖片比ImageView小的時候,就是“居中顯示”。當圖片比ImageView大,就把圖片中間的部分顯示在ImageView里,其他的裁剪掉不顯示。(上面第二組圖尤其明顯)

CENTER的效果

 


FIT_CENTER

FIT_CENTER更接近於大家理解的“居中顯示”,也是平時用的最多的一個值。

首先,這個屬性會保證圖片完整顯示,不管圖片和ImageView的大小關系。而且伸縮的時候是按照比例做的,所以圖片質量也可以得到保證。唯一的問題是,FIT_CENTER不保證會填滿ImageView。對於大多數場景,這個也足夠了。

FIT_START,FIT_END和FIT_CENTER差不多,就不詳細介紹了。

 
FIT_CENTER的效果

 


CENTER_CROP

 

CENTER_CROP,是個非常重要的值,但是很多同學對它並不是很了解。首先,這個屬性值的名字很奇怪,很難猜出來其真實的含義;其次,它的官方介紹簡直又臭又長,讓人一頭霧水:

Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). 

其實,CENTER_CROP的特點總結起來很簡單:以可能裁切掉部分圖片為代價,讓圖片充滿ImageView。

可以和FIT_XY做下對比, CENTER_CROP和FIT_XY是唯二的可以保證填滿ImageView的值

所不同的是,FIT_XY是以不保持原始比例伸縮為代價(但是保證原圖全部顯示出來); 而CENTER_CROP是以不能顯示完整原圖為代價(但是保證原圖的原始比例)。

 
CENTER_CROP的效果

 


CENTER_CROP和FIT_CENTER的對比

二者都會按原始比例伸縮圖片,所不同的是,CENTER_CROP將圖片伸縮到填滿ImageView為止,FIT_CENTER伸縮到圖片完整並居中顯示為止。

下面兩個動圖可以讓你看得更清楚:

 
CENTER_CROP的拉伸方式
 
FIT_CENTER的拉伸方式

CENTER_INSIDE

CENTER_INSIDE又是一個奇怪的值,原文的解釋也是讓人看不懂:

Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). 

其實總結起來很簡單:當原圖大於ImageView的時候,相當於FIT_CENTER。當原圖小於等於ImageView的時候,相當於CENTER。

CENTER_INSIDE的效果

 


MATRIX

看下例子

MATRIX的效果比較簡單: 不改變原圖的大小,從ImageView的左上角開始繪制,超出部分做剪切處理。不保證填滿ImageView,也不保證圖片完全顯示。和CENTER有點類似。反正我在項目中是沒有用過這個值。 
MATRIX的效果
 

思考題

最后再給大家出一道思考題,看看大家的掌握情況:

要實現微信朋友圈九宮格的照片效果,應該使用ScaleType的哪個值?

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM