天天看點

ImageView 的scaleType 屬性圖解

ImageView 是 Android 中最常用的控件之一,而在使用ImageView時,必不可少的會使用到它的scaleType屬性。該屬性指定了你想讓ImageView如何顯示圖檔,包括是否進行縮放、等比縮放、縮放後展示位置等。Android 提供了八種scaleType的屬性值,每種都對應了一種展示方式,下面就對每一種scaleType屬性值進行圖文解釋。

首先,這個是測試放到ImageView中的圖從左到右依次有各個角色,便于區分,這張圖是1920*1080,無論長寬都比測試所用的ImageView大。

ImageView 的scaleType 屬性圖解

這個是用于測試的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:

ImageView 的scaleType 屬性圖解

寫在前面

scaleType屬性既可以在 XML 中設定,也可以在代碼中設定:

android:scaleType="centerInside"          //XML中
imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);    //代碼中      

八個ScaleType,其實可以分為三個類型:

  1. 以FIT_開頭的4種,它們的共同點是都會對圖檔進行縮放;
  2. 以CENTER_開頭的3種,它們的共同點是居中顯示,圖檔的中心點會與ImageView的中心點重疊;
  3. ScaleType.MATRIX,這種就直接翻到最後看内容吧;

ScaleType.FIT_CENTER 預設

該模式是ImageView的預設模式,如果沒有設定ScaleType時,将采用這種模式展示圖檔。在該模式下,圖檔會被等比縮放到能夠填充控件大小,并居中展示:

ImageView 的scaleType 屬性圖解

這裡例子裡因為圖檔寬大于高,于是被縮放到控件大小并居中展示,上下會留白。如果圖檔的高大于寬,那麼居中顯示就會在左右留白。

ScaleType.FIT_START

圖檔等比縮放到控件大小,并放置在控件的上邊或左邊展示。如圖所示,此模式下會在ImageView的下半部分留白,如果圖檔高度大于寬,那麼就會在ImageView的右半部份留白。

ImageView 的scaleType 屬性圖解

ScaleType.FIT_END

圖檔等比縮放到控件大小,并放置在控件的下邊或右邊展示。如圖所示,此模式下會在ImageView的上半部分留白,如果圖檔高度大于寬,那麼就會在ImageView的左半部分留白。

ImageView 的scaleType 屬性圖解

ScaleType.FIT_XY

圖檔縮放到控件大小,完全填充控件大小展示。注意,此模式不是等比縮放。這個模式了解也是最簡單的,如圖:

ImageView 的scaleType 屬性圖解

ScaleType.CENTER

不使用縮放,ImageView會展示圖檔的中心部分,即圖檔的中心點和ImageView的中心點重疊,如圖。如果圖檔的大小小于控件的寬高,那麼圖檔會被居中顯示。

ImageView 的scaleType 屬性圖解

ScaleType.CENTER_CROP

這是我最喜歡的模式,因為在該模式下,圖檔會被等比縮放直到完全填充整個ImageView,并居中顯示。該模式也是最常用的模式了。如圖可以看到,圖檔的高度是能完全展示出來的:

ImageView 的scaleType 屬性圖解

ScaleType.CENTER_INSIDE

使用此模式以完全展示圖檔的内容為目的。圖檔将被等比縮放到能夠完整展示在ImageView中并居中,如果圖檔大小小于控件大小,那麼就直接居中展示該圖檔:

ImageView 的scaleType 屬性圖解

這裡大家看到這個模式的效果與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);          //平移x和y各100機關
matrix.preRotate(30);                   //順時針旋轉30度
imageView.setImageMatrix(matrix);       //設定并應用矩陣      
ImageView 的scaleType 屬性圖解

​​Matrix​​:主要用于對平面進行平移(Translate),縮放(Scale),旋轉(Rotate)以及斜切(Skew)操作。為簡化矩陣變換,Android封裝了一系列方法來進行矩陣變換;其中包括: