ImageView 和 TextView 一樣是直接繼承自 View 的基礎控制元件，顧名思義，TextView 用來展示文字，那 ImageView 就是用來展示圖片的了。因為 Android 碎片化嚴重，在 Android 中圖片很容易使用但是卻很難控制。不同的機型有不同的螢幕尺寸，導致對圖片的適配要求很高。但是 Android 系統為我們提供了強大的圖片控制元件，學好 ImageView 是做好 Android UI 適配的第一步。

1. ImageView 的屬性

ImageView 的功能說起來很簡單，就是在螢幕上展示一張圖片，但是如何展示就很有學問了，先來看看相關的屬性：

• android:src：
  
  設定 ImageView 的圖片內容
• android:background：
  設定背景樣式（同其他控制元件類似）
• android:scaleType：
  控制圖片的縮放模式
• android:maxHeight：
  設定 ImageView 的最大高度
• android:maxWidth：
  設定ImageView的最大寬度
• android:tint：
  圖片的色彩

前三個屬性是重中之重，其中android:backgroud在之前的控制元件中已經多次出現，這再次拿出來並不是因為它和其他控制元件的background有所不同，只是因為很多人會把它和android:src搞混淆。對於 ImageView 而言，android:background

剩下一個android:scaleType也是一個難點，它就是幫助我們做圖片適配的，我們通過android:scaleType告訴系統，當圖片尺寸和 ImageView 尺寸不同時，系統該如何幫助我們對圖片進行縮放。

2. ImageView 的基本用法

首先看看最簡單直接的用法：

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:
 
android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="#59A004"
    android:src="@drawable/image" />

我們直接在根佈局中新增一個 ImageView，設定android:src為圖片檔案，android:background設定為綠色，效果如下：

這裡可以對android:src和android:background有一個定性的認識：android:src表示ImageView的前景，而android:backgound設定的是ImageView的背景，對應的Java程式碼是：

setImageDrawable( );         // 設定ImageView的前景
setBackgroundDrawable( );    // 設定ImageView的背景

2.1 android:background 和 android:src 的區別

前面有提到，android:background也可以直接設定成圖片，那麼在設定成圖片的場景下，它和android:src是否是一樣的呢？我們來進一步考察一下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#CC1010"
        android:src="@drawable/image" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:background="@drawable/image" />

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="bottom"
        android:background="#CC1010"
        android:src="@drawable/image" />

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="bottom|right"
        android:background="@drawable/image" />
</FrameLayout>

在上面的程式碼中，我們在螢幕的 4 個角放置了 4 個 ImageView ，分別從尺寸大小、圖片設定方式兩個維度做了區分，為了方便對比，在使用android:src屬性之後，通過android:background加了紅色的背景，效果如下：

我們首先看上排的兩個圖片效果：

• 長寬均為wrap_content
• 左邊一個用的android:src右邊一個用的是android:background
  可以看到兩者效果完全一樣，再來看下排的兩個圖片：
• 長寬均為200dp
• 左邊一個用的android:src右邊一個用的android:background
  可以清楚的看到，在將 ImageView 的大小固定之後，左邊的圖片內容仍然保持原始比例，並且露出 ImageView 的紅色背景（說明 ImageView 大小和我們設定的一樣），而右邊的圖片會拉伸圖片大小直至佔滿整個 ImageView。

這樣一來就可以得出結論：

• 在 ImageView 的尺寸和圖片尺寸比例一致的情況下，使用android:background設定圖片和使用android:src效果一樣
• 在 ImageView 的尺寸和圖片尺寸比例不一致的情況下，使用android:src會保留圖片原始比例並居中顯示，而用android:background設定的會將圖片拉伸直至鋪滿整個 ImageView。

這裡有一個疑問，為什麼尺寸不一致的時候，Android 系統是採取居中顯示，而不是其他的樣式呢？這就是我們接下來要說明的屬性了。
特別注意以上說的都是尺寸比例，並非長和寬的值。

2.2 ImageView 的縮放裁剪模式

在實際開發過程中，大多數場景我們都是沒辦法保證每張圖片的尺寸比例都一致的，所以需要有大量的縮放和裁剪，如何讓縮放裁剪的適配更加得心應手，就需要用到 ImageView 的另一個關鍵屬性：android:scaleType。
這裡我之所以稱之為縮放裁剪模式，就是要強調這個屬性的兩個維度：是否改變圖片比例以及超出部分如何裁剪。其實scaleType這個屬性要規範的就是這兩個維度，下面就從這兩個維度來學習：

• matrix：
  按照矩陣方式縮放。好吧說人話就是不調整圖片大小，從左上角開始往右下角繪製，如果超出的 ImageView 的範圍則直接捨棄。不改比例、會裁剪。
• fitXY：
  從橫縱兩個方向對圖片進行縮放，以佔滿整個 ImageView，可以參考android:background的樣式。改比例、不裁剪。
• fitStart：
  將圖片等比例縮放，直至能夠完全顯示，然後將圖片至於 ImageView 的左上角。不改比例、不裁剪。
• fitCenter：
  和 fitStart 類似，只不過會將圖片居中放置。不改比例、不裁剪。
• fitEnd：
  和 fitStart 類似，只不過會將圖片放在 ImageView 的右下角。同樣不改比例、不裁剪。
• center：
  非常粗暴的直接將圖片原封不動的放到 ImageView 中央，多餘部分裁剪掉。不改比例、裁剪。
• centerCrop：
  等比例縮放圖片，直至圖片能夠完全佔滿 ImageView ，注意佔滿之後多餘部分會被裁剪掉。不改比例、裁剪。
• centerInside：
  保持原始比例的縮放圖片，直至能夠完整顯示圖片的內容。不改比例、不裁剪。

以上的樣式都還比較好理解，下面我們來寫段程式碼測試一下幾種具有代表性的樣式：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#CC1010"
        android:scaleType="matrix"
        android:src="@drawable/image" />

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="right"
        android:background="#CC1010"
        android:scaleType="fitXY"
        android:src="@drawable/image" />

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center_vertical"
        android:background="#CC1010"
        android:scaleType="fitStart"
        android:src="@drawable/image" />

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center_vertical|right"
        android:background="#CC1010"
        android:scaleType="center"
        android:src="@drawable/image" />

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="bottom"
        android:background="#CC1010"
        android:scaleType="centerCrop"
        android:src="@drawable/image" />

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="bottom|right"
        android:background="#CC1010"
        android:scaleType="centerInside"
        android:src="@drawable/image" />
</FrameLayout>

上面我們介紹了 8 種屬性，其中fitStart、fitCenter以及fitEnd三個屬性只是擺放的位置不同，其餘完全一樣，所以只選擇fitStart做樣例。那麼去掉fitCenter和fitEnd之後，按照順序我們對於 6 種屬性按左右排列了 6 張圖片，效果如下：

大家可以對比 2.2 小節的屬性描述及效果圖學習不同的縮放模式的不同樣式。

3. 小結

ImageView 和 TextView 都是基礎 View，可以圍繞它們開發出很多有意思好用的控制元件。對於 ImageView 而言，最複雜的就是縮放裁剪模式，這裡就要關注的兩個點：比例是否改變以及是否裁剪，這樣相信就可以應對未來紛繁雜亂的圖片尺寸的適配了。