ImageView中不一樣 ScaleType 的對比介紹

版權聲明：本文爲 咕咚 原創文章，能夠隨意轉載，但必須在明確位置註明出處。

我的主頁: gudong.name

文章地址: gudong.name/2017/12/01/…

介紹

在使用 ImageView 的時候，常常須要設置它的 scaleType，可是一些時候對他們的區別老是很難把握，此次經過示例完整的瞭解一下不一樣的 scaleType 對一個 ImageView 的展現到底會有什麼樣的區別。

這是原圖片

能夠看到，其實他有一個內部 padding 的距離。

ImageView 佈局

下面使用 ImageView 用來顯示這個圖片資源，而後分別使用不一樣的 scaleType 進行展現，佈局代碼以下

<ImageView android:layout_width="300dp" android:layout_height="500dp" android:layout_centerInParent="true" android:scaleType="center" android:src="@mipmap/ic_launcher"/>
複製代碼

這是一個寬 300dp 高 500dp 的 ImageView，如今設置 scaleType 爲 center

說明：爲了顯示方便，這裏設置 ImageView 的背景爲灰色，下面全部截圖中看到的灰色區域就是 ImageView 的區域。

一、scaleType="center"

scaleType 爲 center 表示按照圖片尺寸在給定的 ImageView 上居中顯示圖片，以下所示，當 ImageView 尺寸很大足夠容納圖片時，圖片會居中顯示在 ImageView 中。

可是當 ImageView 的 size 被設置的較小，以下 ImageView 的寬高被設置爲 20-50 時，此時 ImageView 的 size 小於圖片的大小，會發現圖片依舊居中顯示，可是爲了居中顯示，圖片會被按 ImageView 的寬高比例進行縮小而後裁剪以下所示：

二、scaleType="centerCrop"

它會根據 ImageView 的尺寸，把目標圖片按照 ImageView 的尺寸進行等比例放大或縮小而後裁剪，最終顯示。

這裏由於原圖尺寸沒有 ImageView 尺寸大，因此圖片會被放大，而後最終被裁剪後顯示成以下圖所示的樣式。

三、scaleType="centerInside"

目前跟 center 一致 ，看不出有什麼區別，

可是若是 ImageView 的尺寸小於圖片本身的尺寸，它就會跟 center 的效果不同了，它會自適應 ImageView 進行自適應，好比，咱們將 ImageView 的尺寸特地設的特別小。

<Image android:layout_width="20dp" android:layout_height="50dp" android:layout_centerInParent="true" android:scaleType="fitCenter" android:src="@mipmap/ic_launcher"/>
複製代碼

而後效果以下。

對比 scaleType = center 在 ImageView size 小於圖片 size 的狀況下, center 會把圖片進行裁剪，可是 centerInside 就不會，這也是爲何叫 inside 的緣故吧。

四、scaleType="fitStart/fitEnd/fitCenter"

fit 表示圖片本身會根據 ImageView 的尺寸進行自適應。

start 表示在圖片靠上面，end 表示靠下邊，center 表示居中

這裏區分一下 fitCenter 和 centerInside

fitCenter 會放大圖片自身，而後居中顯示，如上圖所示。可是 centerInside 不會放大圖片，仍是根據圖片尺寸居中顯示在 ImageView 中。

五、scaleType="matrix"

matrix 是 ImageView 默認的 scaleType, 他不改變原圖的大小，從ImageView的左上角開始繪製原圖，原圖超過ImageView的部分做裁剪處理。 一樣對比下 ImageView 在不一樣尺寸下的樣式

• ImageView 尺寸大於圖片尺寸

  

• ImageView 尺寸小於圖片尺寸

  

六、scaleType="fitXY

這中類型最好理解，無論原圖的寬高比例，直接把原圖按照 ImageView 的大小尺寸進行拉伸，使原圖填滿 ImageView，很是暴力，實際開發中用到的很少，由於很容易形成圖片變形的問題。

總結

結合平時的開發經驗，通常主要用的 scaleType 就幾種，比較多的是 center 、centerInside 以及 fitCenter, 主要掌握這幾個類型的區別。

關注我

• 微博 - 大俠咕咚
• 知乎 - 咕咚
• Github - 咕咚