android學習筆記之ImageView的scaleType屬性

標籤：目標   scale   ext   class   nload   back   nts   完整   tracking   

我們知道，ImageView有一個屬性叫做scaleType，它的取值一共同擁有八種，各自是：matrix，fitXY。fitStart，fitCenter。fitEnd，center，centerCrop。centerInside。

那我們以下一起來看看這八種取值分別代表什麼意思。

我用兩張圖片來做demo，這兩張圖片的解析度一大一小，圖片分別叫做big和small。原圖例如以下：

big:

small:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

OK，準備工作已經完畢。

matrix

matrix表示原圖從ImageView的左上方開始繪製。假設原圖大於ImageView，那麼多餘的部分則剪裁掉，假設原圖小於ImageView，那麼對原圖不做不論什麼處理。比方我的兩張大小不同的圖片。分別顯示在96dp×96dp的ImageView上，會有不同的效果，代碼例如以下：

    <ImageView        android:layout_width="96dp"        android:layout_height="96dp"        android:adjustViewBounds="false"        android:background="#ffaa77"        android:scaleType="matrix"        android:src="@drawable/big" />    <ImageView        android:layout_width="96dp"        android:layout_height="96dp"        android:adjustViewBounds="false"        android:background="#aa99cc"        android:scaleType="matrix"        android:src="@drawable/small" />

顯示效果例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

我們看到，big圖片因為比較大，因此僅僅有左上方顯示出來了。其它部分則被剪裁掉了。而small圖片因為解析度比較小。因此完整的顯示在ImageView的左上方。

fitXY

fitXY的目標是填充整個ImageView。為了完畢這個目標，它須要對圖片進行一些縮放操作，在縮放的過程中。它不會依照原圖的比例來縮放。比方以下一個栗子：

    <ImageView        android:layout_width="96dp"        android:layout_height="96dp"        android:background="#ffaa77"        android:scaleType="fitXY"        android:src="@drawable/big" />    <ImageView        android:layout_width="96dp"        android:layout_height="128dp"        android:background="#aa99cc"        android:scaleType="fitXY"        android:src="@drawable/small" />

顯示效果例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

兩張圖片都被顯示出來了，可是都有一定程度的變形。因為在這裡系統僅僅考慮將ImageView填充滿，而不會依照原圖比例去縮放。

fitStart

將圖片按比例縮放至View的寬度或者高度（取寬和高的最小值），然後居上或者居左顯示（與前面縮放至寬還是高有關），我們來看以下一個範例：

    <ImageView        android:layout_width="48dp"        android:layout_height="256dp"        android:background="#ffaa77"        android:scaleType="fitStart"        android:src="@drawable/big" />    <ImageView        android:layout_width="256dp"        android:layout_height="36dp"        android:background="#aa99cc"        android:scaleType="fitStart"        android:src="@drawable/small" />

顯示效果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

big圖片是縮放至ImageView的寬度，然後居上顯示。small圖片是縮放至ImageView的高度，然後居左顯示。

fitCenter

fitCenter和fitStart基本一樣，唯一不同的是fitCenter將圖片按比例縮放之後是置中顯示。看以下一個範例：

    <ImageView        android:layout_width="48dp"        android:layout_height="256dp"        android:background="#ffaa77"        android:scaleType="fitCenter"        android:src="@drawable/big" />    <ImageView        android:layout_width="256dp"        android:layout_height="48dp"        android:background="#aa99cc"        android:scaleType="fitCenter"        android:src="@drawable/small" />

顯示效果例如以下：

fitEnd

fitEnd和fitStart也基本一樣。唯一不同的是fitEnd將圖片按比例縮放之後是居右或者居下顯示，比方以下一個Demo：

    <ImageView        android:layout_width="48dp"        android:layout_height="256dp"        android:background="#ffaa77"        android:scaleType="fitEnd"        android:src="@drawable/big" />    <ImageView        android:layout_width="256dp"        android:layout_height="48dp"        android:background="#aa99cc"        android:scaleType="fitEnd"        android:src="@drawable/small" />

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

center

center表示將原圖依照原來的大小置中顯示，假設原圖的大小超過了ImageView的大小，那麼剪裁掉多餘部分，僅僅顯示中間一部分映像，比方以下一個Demo：

    <ImageView        android:layout_width="48dp"        android:layout_height="256dp"        android:background="#ffaa77"        android:scaleType="center"        android:src="@drawable/big" />    <ImageView        android:layout_width="256dp"        android:layout_height="24dp"        android:background="#aa99cc"        android:scaleType="center"        android:src="@drawable/small" />

顯示效果例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

centerCrop

centerCrop的目標是將ImageView填充滿，故按比例縮放原圖，使得能夠將ImageView填充滿。同一時候將多餘的寬或者高剪裁掉,比方以下一個Demo :

    <ImageView        android:layout_width="48dp"        android:layout_height="256dp"        android:background="#ffaa77"        android:scaleType="centerCrop"        android:src="@drawable/big" />    <ImageView        android:layout_width="256dp"        android:layout_height="48dp"        android:background="#aa99cc"        android:scaleType="centerCrop"        android:src="@drawable/small" />

顯示效果例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

centerInsid

centerInside的目標是將原圖完整的顯示出來。故按比例縮放原圖。使得ImageView能夠將原圖完整顯示，比方以下一個Demo：

    <ImageView        android:layout_width="48dp"        android:layout_height="256dp"        android:background="#ffaa77"        android:scaleType="centerInside"        android:src="@drawable/big" />    <ImageView        android:layout_width="256dp"        android:layout_height="48dp"        android:background="#aa99cc"        android:scaleType="centerInside"        android:src="@drawable/small" />

顯示效果例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

OK。關於scaleType屬性我們就說這麼多。普通情況下，當我們給ImageView的寬高都為固定值的時候我們才有可能用到這些屬性。

Demo下載

android學習筆記之ImageView的scaleType屬性