ImageView 的scaleType 屬性圖解

文章轉載：https://www.jianshu.com/p/32e335d5b842

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);       //設置並應用矩陣

Matrix:主要用於對平面進行平移(Translate)，縮放(Scale)，旋轉(Rotate)以及斜切(Skew)操作。爲簡化矩陣變換，Android封裝了一系列方法來進行矩陣變換；其中包括：

set系列方法：setTranslate，setScale，setRotate，setSkew；設置，會覆蓋之前的參數。
pre系列方法：preTranslate，preScale，preRotate，preSkew；矩陣先乘，如M’ = M * T(dx, dy)。
post系列方法：postTranslate，postScale，postRotate，postSkew；矩陣後乘，如M’ = T(dx, dy) * M。
通過將變換矩陣與原始矩陣相乘來達到變換的目的。

關於更多關於Matrix的變換，參考博客：https://blog.csdn.net/whuhan2013/article/details/51446691