ImageView的scaleType屬性

我們知道,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下載

 

轉載自:https://blog.csdn.net/u012702547/article/details/50586946

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章