ImageView的scaleType詳解

ImageView的ScaleType詳

1. 網上的誤解

不得不說很失望，到網上搜索了幾篇帖子，然後看到的都是相互複製粘貼，就算不是粘貼的，有幾篇還是隻是拿着自己的幾個簡單例子，然後做測試，這種以一種現象結合自己的猜測便得出結論，其實只是想由不完全歸納得出完全歸納的結果，然而很令人失望，原因是： 數據取樣過於片面，只是單純的測試了一種情況，導致大家對這些帖子相當失望。

2. scaleType存在的形式

1） CENTER

2） CENTER_CROP

3） CENTER_INSIDE

4） FIT_CENTER

5） FIT_END

6） FIT_START

7） FIT_XY

8） MATRIX

3.Google的官方解釋以及我的個人分析 

 

type	google官方說明	我的解釋
CENTER	Center the image in the view, but perform no scaling.	先把當前的圖片放置到ImageView的中間，不執行縮放，如果圖片小，那麼就會有空白區域，如果圖片大，那麼便會被裁減
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).	先把當前的圖片放置到ImageView的中間，執行縮放，將圖片的寬度和高度按照相同比例縮放到寬度大於或者等於ImageView的寬度，同時高度大於或者等於ImageView的高度
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).	1. 先把當前的圖片放置到ImageView的中間; 2. 如果圖片小於ImageView的大小，不執行縮放，原樣顯示； 3. 否則開始縮放，將圖片的寬度和高度按照相同比例縮放到寬度小於或者等於ImageView的寬度，同時高度小於或者等於ImageView的高度（此處的高度和寬度指的是內容的大小width/height-padding）
FIT_CENTER	Scale the image using CENTER. CENTER: Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. The result is centered inside dst.	1.保持圖片的寬高比 2.將圖片放置到ImagetView的中心，然後進行向外按比例放大或者縮小，直到一個方向已經適應
FIT_END	Scale the image using END END: Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. END aligns the result to the right and bottom edges of dst.	1.保持圖片的寬高比 2.將圖片放置到ImagetView的右下角，然後進行向外按比例放大或者縮小，直到一個方向已經適應
FIT_START	Scale the image using START START: Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. START aligns the result to the left and top edges of dst.	1.保持圖片的寬高比 2.將圖片放置到ImagetView的左上角，然後進行向外按比例放大或者縮小，直到一個方向已經適應
FIT_XY	Scale the image using FILL FILL: Scale in X and Y independently, so that src matches dst exactly. This may change the aspect ratio of the src.	1.不保持圖片的寬高比 2.然後進行向外按比例放大或者縮小，直到一個方向已經適應
MATRIX	Scale using the image matrix when drawing.

 

4. 數據測試

爲了表明測試的準確性，我準備了兩組數據，一組是圖片的分辨率高於ImageView自身的寬高，另外一組是圖片的分辨率低於ImageView自身的寬高，這樣才具有測試的完整性。

第一組： 圖片的分辨率高於ImageView自身的寬高

原圖： 屏幕截圖： 尺寸：1080*1920 即1080p的屏幕截圖

 

將各組數據分別做顯示，爲了表示特點，將ImageView的背景設置爲黑色，ImageView的大小設置爲100dp*100dp

 

行\列	1	2	3
1	center	centerCrop	centerInside
2	fitCenter	fitEnd	fitXY
3	fitStart	matrix

 

咱們逐個開始看

1. CENTER ： 首先將圖片放置到了中間，然後能夠顯示多少，就顯示多少，圖片不做處理，因而圖片只是顯示了中間支付寶錢包和快牙圖標的一部分
2. CENTERCROP ： 同樣先將圖片放置到了中間，然後開始等比例伸縮圖片，直到兩邊有一邊適配了邊界，由於圖片高度大於寬度，因而首先高度適配了，但是此時寬度還夠不着邊界，不符合上面表格的要求：高度和寬度要均大於等於對應ImageView的高度和寬度，因而要繼續伸縮至寬度達到邊界，所以寬度可以顯示完整，而高度顯示不完整
3. CENTERINSIDE ： 同樣現將圖片放置到了中間，將圖片伸縮（如果圖片小於ImageView的寬高，那麼是不伸縮的），直到兩側同時小於或者等於圖片的邊界，由於寬度會先適配，高度後適配，因而兩側會顯示出黑色的背景
4. FIT_CENTER :　將圖片放置到ImageView的中間，保持圖片的寬高比，圖片由小變大一步一步擴大，直到一個方向已經適配，由於高度大於寬度，因而高度會先適配，故兩側會出現黑色的背景
5. FIT_END ：將圖片放置到ImageView的右下角，保持圖片的寬高比，圖片由小變大一部一部擴大，直到一個方向已經適配，高度大於寬度，高度先適配，故左側出現黑色背景
6. FIT_XY ： 不保持圖片的寬高比進行伸縮，從ImageView的中心，由小到大，一部一部擴大，直到兩個方向都已經適配
7. MATRIX ： 不熟悉，不做解釋 

第二組測試數據： 圖片分辨率小於ImageView大小的各種數據 

原圖： 分辨率： 165*220 

ImageView大小： 200dp*200dp 

類型以及結果： 

1. CENTER:    

      2. CENTER_CROP: 同樣： 由於會縮放，圖片高度大於寬度，因而最終的效果是寬度填充滿，而高度上部分顯示不出來  

      3. CENTER_INSIDE : 剛纔已經提到，如果圖片小於屏幕的大小，那麼CENTER_INSIDE是不會做縮放的

 

此時可能有人會提出疑問，假如說圖片一側大於屏幕的大小，而另外一側小於屏幕的大小，那麼會怎麼處理呢？處理的方式還是要符合原則，最終的結果是兩側都要小於等於屏幕對應的尺寸，就是在ImageView的大小內，顯示完整這個圖片，並且是按照等比例縮放的

，以這個圖片爲例：

用Nexus5（分辨率爲1080*1920）做測試，假如說ImageView的大小爲60dp*60dp，Nexus5下的大小爲 ： 180px*180px

而圖片的大小 ：165px*220px，這時圖片的高度已經超過了ImageView的高度，所以會將高度縮放到ImageView的大小，因而出現如下的效果

 

     4. FIT_CENTER : 

     5. FIT_END:

     6. FIT_START

     7. MATRIX

 

 

安卓源碼分析羣:　Android源碼分析QQ1羣號:164812238