1. 程式人生 > >android學習筆記之ImageView的scaleType屬性

android學習筆記之ImageView的scaleType屬性

有關 sni mage nds 目標 big ins 分辨率 處理

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

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

我用兩張圖片來做demo,這兩張圖片的分辨率一大一小,圖片分別叫做big和small。原圖例如以下:

big:

技術分享

small:

技術分享

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" />

顯示效果例如以下:

技術分享

我們看到,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" />

顯示效果例如以下:

技術分享

兩張圖片都被顯示出來了,可是都有一定程度的變形。因為在這裏系統僅僅考慮將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" />
顯示效果:

技術分享

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" />

技術分享

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" />
顯示效果例如以下:

技術分享

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" />
顯示效果例如以下:

技術分享

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" />

顯示效果例如以下:

技術分享


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


Demo下載



android學習筆記之ImageView的scaleType屬性