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" imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
八個 ScaleType,其實可以分為三個類型:
以FIT_開頭的4種,它們的共同點是都會對圖片進行縮放;
以CENTER_開頭的3種,它們的共同點是居中顯示,圖片的中心點會與ImageView的中心點重疊;
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); matrix.preRotate(30); imageView.setImageMatrix(matrix);
每行代碼都有注釋,其展示的效果如下圖顯示。