Android ImageView 的scaleType 屬性圖解

ImageView 是 Android 中最常用的控件之一，而在使用ImageView時，必不可少的會使用到它的scaleType屬性。該屬性指定了你想讓ImageView如何顯示圖片，包括是否進行縮放、等比縮放、縮放后展示位置等。Android 提供了八種scaleType的屬性值，每種都對應了一種展示方式，下面就對每一種scaleType屬性值進行圖文解釋。

首先，這個是測試放到ImageView中的圖從左到右依次有各個角色，便於區分，這張圖是1920*1080，無論長寬都比測試所用的ImageView大。

 

47fb23b0-0256-44f8-a588-5e1b0cda1c6d.jpg

這個是用於測試的ImageView布局：

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorAccent"> <ImageView android:id="@+id/image_view" android:layout_width="300dip" android:layout_height="300dip" android:layout_gravity="center" android:background="@android:color/holo_purple"/> </FrameLayout> 

可以看到ImageView是正方形的，其背景色為紫色，父布局設置其背景色為紅色，這樣可以很容易看到各個控件的大小。在手機上這個布局看起來是這個樣子的，紫色空間就是ImageView：

 

none.png

寫在前面

scaleType屬性既可以在 XML 中設置，也可以在代碼中設置：

android:scaleType="centerInside" //XML中 imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE); //代碼中 

八個ScaleType，其實可以分為三個類型：

1. 以FIT_開頭的4種，它們的共同點是都會對圖片進行縮放；
2. 以CENTER_開頭的3種，它們的共同點是居中顯示，圖片的中心點會與ImageView的中心點重疊；
3. ScaleType.MATRIX，這種就直接翻到最后看內容吧；

ScaleType.FIT_CENTER 默認

該模式是ImageView的默認模式，如果沒有設置ScaleType時，將采用這種模式展示圖片。在該模式下，圖片會被等比縮放到能夠填充控件大小，並居中展示：

 

9JZ}UQ`UVYA{DB35J}B13_U.png

這里例子里因為圖片寬大於高，於是被縮放到控件大小並居中展示，上下會留白。如果圖片的高大於寬，那么居中顯示就會在左右留白。

ScaleType.FIT_START

圖片等比縮放到控件大小，並放置在控件的上邊或左邊展示。如圖所示，此模式下會在ImageView的下半部分留白，如果圖片高度大於寬，那么就會在ImageView的右半部份留白。

 

EX8XA$_%R$[e-mail]

ScaleType.FIT_END

圖片等比縮放到控件大小，並放置在控件的下邊或右邊展示。如圖所示，此模式下會在ImageView的上半部分留白，如果圖片高度大於寬，那么就會在ImageView的左半部分留白。

 

(2VFHLO270F7T0RWX%CCG~A.png

ScaleType.FIT_XY

圖片縮放到控件大小，完全填充控件大小展示。注意，此模式不是等比縮放。這個模式理解也是最簡單的，如圖：

 

I{}J06Y5VPY}`@%`_1~4D~S.png

ScaleType.CENTER

不使用縮放，ImageView會展示圖片的中心部分，即圖片的中心點和ImageView的中心點重疊，如圖。如果圖片的大小小於控件的寬高，那么圖片會被居中顯示。

![J1YSN$8WC0C(P[@(]9PF.png

ScaleType.CENTER_CROP

這是我最喜歡的模式，因為在該模式下，圖片會被等比縮放直到完全填充整個ImageView，並居中顯示。該模式也是最常用的模式了。如圖可以看到，圖片的高度是能完全展示出來的：

![F4DX2ZH%Z]4WOQI`PZ}JC(F.png](//upload-images.jianshu.io/upload_images/677256-8fe289f7cae750e4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

ScaleType.CENTER_INSIDE

使用此模式以完全展示圖片的內容為目的。圖片將被等比縮放到能夠完整展示在ImageView中並居中，如果圖片大小小於控件大小，那么就直接居中展示該圖片：

 

WB{)W2_ILR4_3P_XZKUF1UJ.png

這里大家看到這個模式的效果與ScaleType.FIT_CENTER的效果相同，這是因為所用圖片是是大於ImageView的大小的，如果圖片是小於控件大小，那么就能夠看出來這兩個模式下的差別了。

ScaleType.MATRIX

一般情況下重點都放在最后，在這八種ScaleType中，這個模式就是重點了。該模式需要與ImageView.setImageMatrix(Matrix matrix) 配合使用，因為該模式需要用於指定一個變換矩陣用於指定圖片如何展示。其實前面的7種模式都是通過ImageView在內部生成了相應的變換矩陣，等於是提供了該模式的一種特定值，使用這個模式只要傳入相應矩陣，也就能實現上述七種顯示效果。
關於如何使用矩陣的內容，不是很快能說完，所以這里就不說了。
另外注意，在使用時，需要先調用

imageView.setScaleType(ImageView.ScaleType.MATRIX); 

再調用

imageView.setImageMatrix(matrix); 

注意順序不要搞錯，否則會出現問題的。下面看一下代碼：

imageView.setScaleType(ImageView.ScaleType.MATRIX);  //設置為矩陣模式 Matrix matrix = new Matrix(); //創建一個單位矩陣 matrix.setTranslate(100, 100); //平移x和y各100單位 matrix.preRotate(30); //順時針旋轉30度 imageView.setImageMatrix(matrix); //設置並應用矩陣 

每行代碼都有注釋，其展示的效果如下圖顯示。
![W(J@NWP(JI]1$~B(TQMRY)L.png](//upload-images.jianshu.io/upload_images/677256-b8e80af99b6a5195.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

作者：545a3c856c5f
鏈接：https://www.jianshu.com/p/32e335d5b842
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。