Android 圖片控件 ImageView

ImageView 和 TextView 一樣是直接繼承自 View 的基礎(chǔ)控件，顧名思義，TextView 用來展示文本，那 ImageView 就是用來展示圖片的了。因?yàn)?Android 碎片化嚴(yán)重，在 Android 中圖片很容易使用但是卻很難控制。不同的機(jī)型有不同的屏幕尺寸，導(dǎo)致對(duì)圖片的適配要求很高。但是 Android 系統(tǒng)為我們提供了強(qiáng)大的圖片控件，學(xué)好 ImageView 是做好 Android UI 適配的第一步。

1. ImageView 的屬性

ImageView 的功能說起來很簡(jiǎn)單，就是在屏幕上展示一張圖片，但是如何展示就很有學(xué)問了，先來看看相關(guān)的屬性：

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

前三個(gè)屬性是重中之重，其中android:backgroud在之前的控件中已經(jīng)多次出現(xiàn)，這再次拿出來并不是因?yàn)樗推渌丶?code>background有所不同，只是因?yàn)楹芏嗳藭?huì)把它和android:src搞混淆。對(duì)于 ImageView 而言，android:background的屬性和其它控件含義一樣表示背景樣式，同樣可以設(shè)置成圖片文件或者背景資源；而android:src是 ImageView 特有的一個(gè)屬性，用來設(shè)置 ImageView 要展示的圖片；

剩下一個(gè)android:scaleType也是一個(gè)難點(diǎn)，它就是幫助我們做圖片適配的，我們通過android:scaleType告訴系統(tǒng)，當(dāng)圖片尺寸和 ImageView 尺寸不同時(shí)，系統(tǒng)該如何幫助我們對(duì)圖片進(jìn)行縮放。

2. ImageView 的基本用法

首先看看最簡(jiǎn)單直接的用法：

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

我們直接在根布局中添加一個(gè) ImageView，設(shè)置android:src為圖片文件，android:background設(shè)置為綠色，效果如下：

這里可以對(duì)android:src和android:background有一個(gè)定性的認(rèn)識(shí)：android:src表示ImageView的前景，而android:backgound設(shè)置的是ImageView的背景，對(duì)應(yīng)的Java代碼是：

setImageDrawable( );         // 設(shè)置ImageView的前景
setBackgroundDrawable( );    // 設(shè)置ImageView的背景

2.1 android:background 和 android:src 的區(qū)別

前面有提到，android:background也可以直接設(shè)置成圖片，那么在設(shè)置成圖片的場(chǎng)景下，它和android:src是否是一樣的呢？我們來進(jìn)一步考察一下：

<?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>

在上面的代碼中，我們?cè)谄聊坏?4 個(gè)角放置了 4 個(gè) ImageView ，分別從尺寸大小、圖片設(shè)置方式兩個(gè)維度做了區(qū)分，為了方便對(duì)比，在使用android:src屬性之后，通過android:background加了紅色的背景，效果如下：

我們首先看上排的兩個(gè)圖片效果：

• 長(zhǎng)寬均為wrap_content
• 左邊一個(gè)用的android:src右邊一個(gè)用的是android:background
  可以看到兩者效果完全一樣，再來看下排的兩個(gè)圖片：
• 長(zhǎng)寬均為200dp
• 左邊一個(gè)用的android:src右邊一個(gè)用的android:background
  可以清楚的看到，在將 ImageView 的大小固定之后，左邊的圖片內(nèi)容仍然保持原始比例，并且露出 ImageView 的紅色背景（說明 ImageView 大小和我們?cè)O(shè)置的一樣），而右邊的圖片會(huì)拉伸圖片大小直至占滿整個(gè) ImageView。

這樣一來就可以得出結(jié)論：

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

這里有一個(gè)疑問，為什么尺寸不一致的時(shí)候，Android 系統(tǒng)是采取居中顯示，而不是其他的樣式呢？這就是我們接下來要說明的屬性了。
特別注意以上說的都是尺寸比例，并非長(zhǎng)和寬的值。

2.2 ImageView 的縮放裁剪模式

在實(shí)際開發(fā)過程中，大多數(shù)場(chǎng)景我們都是沒辦法保證每張圖片的尺寸比例都一致的，所以需要有大量的縮放和裁剪，如何讓縮放裁剪的適配更加得心應(yīng)手，就需要用到 ImageView 的另一個(gè)關(guān)鍵屬性：android:scaleType。
這里我之所以稱之為縮放裁剪模式，就是要強(qiáng)調(diào)這個(gè)屬性的兩個(gè)維度：是否改變圖片比例以及超出部分如何裁剪。其實(shí)scaleType這個(gè)屬性要規(guī)范的就是這兩個(gè)維度，下面就從這兩個(gè)維度來學(xué)習(xí)：

• matrix：
  按照矩陣方式縮放。好吧說人話就是不調(diào)整圖片大小，從左上角開始往右下角繪制，如果超出的 ImageView 的范圍則直接舍棄。不改比例、會(huì)裁剪。
• fitXY：
  從橫縱兩個(gè)方向?qū)D片進(jìn)行縮放，以占滿整個(gè) ImageView，可以參考android:background的樣式。改比例、不裁剪。
• fitStart：
  將圖片等比例縮放，直至能夠完全顯示，然后將圖片至于 ImageView 的左上角。不改比例、不裁剪。
• fitCenter：
  和 fitStart 類似，只不過會(huì)將圖片居中放置。不改比例、不裁剪。
• fitEnd：
  和 fitStart 類似，只不過會(huì)將圖片放在 ImageView 的右下角。同樣不改比例、不裁剪。
• center：
  非常粗暴的直接將圖片原封不動(dòng)的放到 ImageView 中央，多余部分裁剪掉。不改比例、裁剪。
• centerCrop：
  等比例縮放圖片，直至圖片能夠完全占滿 ImageView ，注意占滿之后多余部分會(huì)被裁剪掉。不改比例、裁剪。
• centerInside：
  保持原始比例的縮放圖片，直至能夠完整顯示圖片的內(nèi)容。不改比例、不裁剪。

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

<?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三個(gè)屬性只是擺放的位置不同，其余完全一樣，所以只選擇fitStart做樣例。那么去掉fitCenter和fitEnd之后，按照順序我們對(duì)于 6 種屬性按左右排列了 6 張圖片，效果如下：

大家可以對(duì)比 2.2 小節(jié)的屬性描述及效果圖學(xué)習(xí)不同的縮放模式的不同樣式。

3. 小結(jié)

ImageView 和 TextView 都是基礎(chǔ) View，可以圍繞它們開發(fā)出很多有意思好用的控件。對(duì)于 ImageView 而言，最復(fù)雜的就是縮放裁剪模式，這里就要關(guān)注的兩個(gè)點(diǎn)：比例是否改變以及是否裁剪，這樣相信就可以應(yīng)對(duì)未來紛繁雜亂的圖片尺寸的適配了。