Android 圖解 ImageView 的 scaleType 屬性

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

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

這個是用於測試的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：

寫在前面

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時，將採用這種模式展現圖片。在該模式下，圖片會被等比縮放到可以填充控件大小，並居中展現：

這裏例子裏由於圖片寬大於高，因而被縮放到控件大小並居中展現，上下會留白。若是圖片的高大於寬，那麼居中顯示就會在左右留白。

ScaleType.FIT_START

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

ScaleType.FIT_END

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

ScaleType.FIT_XY

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

ScaleType.CENTER

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

ScaleType.CENTER_CROP

這是我最喜歡的模式，由於在該模式下，圖片會被等比縮放直到徹底填充整個ImageView，並居中顯示。該模式也是最經常使用的模式了。如圖能夠看到，圖片的高度是能徹底展現出來的：

ScaleType.CENTER_INSIDE

使用此模式以徹底展現圖片的內容爲目的。圖片將被等比縮放到可以完整展現在ImageView中並居中，若是圖片大小小於控件大小，那麼就直接居中展現該圖片：

這裏你們看到這個模式的效果與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);       //設置並應用矩陣
複製代碼

每行代碼都有註釋，其展現的效果以下圖顯示。