一. .9圖片的介紹

.9圖片的作用：

1. 主要防止圖片被拉伸後變形。因為在一個畫素裡如果是相同色塊，那麼它被拉伸不會變形。但如何該畫素裡有不同色塊，就將導致它變形。

2.通過.9圖片可以把圖片做的很小，不佔資源，減少apk的大小

下面我們來看一下，同一張圖片使用了.9和不使用.9圖片的區別：

由圖中，我們可以看出沒有使用.9圖片的對話方塊被拉伸的變形了。

我們再看下這倆個背景圖片的區別：(左：.9圖片 ； 右：非.9圖片)

仔細觀察，才發現.9圖片在左邊和上面多了一個小黑點，其他基本一致。    

二. .9圖片的使用1 -- 拉伸圖片

1.上：表示圖片被橫向拉伸時，黑點所在的區域就是可拉伸的區域

2.左：表示圖片被縱向拉伸時，黑點所在的區域就是可拉伸的區域

（關於圖片下方和右方的作用在下一個例項中會講解）

在Draw 9-patch工具中，選中show patches會自動顯示出被拉伸的區域。

在Draw 9-patch工具的右手邊，可以預覽拉伸效果，從上到下依次是：縱向拉伸 / 橫向拉伸 / 縱向橫向拉伸

下面我們來看一下倆種不同的拉伸區域的.9圖片造成的不同效果：

a. 

b.

圖a和圖b的不同點在於： 圖a的左側只在箭頭的下面畫了個黑點，而圖b的左側在箭頭的上下面都各自畫了個黑點。

從右手邊的預覽圖，我們也可以看出圖a在縱向拉伸時，只會拉伸箭頭下方那個黑點所在的區域。而圖b在縱向拉伸時，箭頭上下方的區域都會進行拉伸。

為了更直觀的看出效果，可在Draw 9-patch工具中，Patch scale是進行拉伸的倍數選擇，可將它由最小值滑到最大值，以在預覽圖中觀察效果。

同時，我們在真機中進行編譯看效果：

三. .9圖片的使用2 -- padding效果

1.下：黑色區域表示橫向的內容顯示區域

2.右：黑色區域表示縱向的內容顯示區域

在Draw 9-patch工具中，勾選Show content，可以在右手邊的預覽區域看到紫色的區域就是內容顯示的區域。

我們來看一個使用了下方和右方黑點的和沒有使用的區別：

由圖中，我們可以很直觀的看出，使用了下方/右方黑點的可以適當調整文字內容在圖片中的區域。其實就是實現android:padding的效果，即設定內邊距。

下方黑點區域的左端實現 android:paddingLeft ，右端實現android:paddingRight

右方黑點區域的上端實現android:paddingTop，下端實現android:paddingBottom

同樣，可在Draw 9-patch工具中，Patch scale是進行拉伸的倍數選擇，可將它由最小值滑到最大值，以在預覽圖中觀察效果。