(轉)Android Studio中使用.9（Nine Patch）圖片

地址：http://blog.csdn.net/lastwarmth/article/details/49991445

本文主要結合Android Studio講述一下.9圖片的原理與使用。

---

原理
在Android的設計過程中，爲了適配不同的手機分辨率，圖片大多需要拉伸或者壓縮，這樣就出現了可以任意調整大小的一種圖片格式“.9.png”。這種圖片是用於Android開發的一種特殊的圖片格式，它的好處在於可以用簡單的方式把一張圖片中哪些區域可以拉伸，哪些區域不可以拉伸設定好，同時可以把顯示內容區域的位置標示清楚。

.9圖片相比普通圖片，在四條邊會多出1px的空隙，我們在這1px的空隙中畫上黑線，即可控制圖片怎麼拉伸，內容區域的位置。

講解一下四條邊的作用：

1. Top，圖中1所示，是控制圖片可橫向拉伸的區域。
2. Left，圖中2所示，是控制圖片可縱向拉伸的區域。
3. Right&Botton，圖中的3與4，結合起來控制內容顯示的區域。

---

使用
我們在Android Studio中新建一個項目，選擇一張普通圖片，置於drawable目錄下。

下面我們將它改爲.9圖片。在Android Studio中使用.9圖很簡單：直接將圖片名稱以”.9.png”結束。
使用.9圖必須注意一點：文件的後綴名必須是.9.png，不能是.png或者是.9.png.png，這樣的命名都會導致編譯失敗。

將名稱改好之後，重新打開圖片，可以看到圖片下面會有2個Tab，切換到“9-Patch”即可配置.9圖片了。

下面做如下配置：

在右邊的效果圖中，縱向只拉伸了Left所畫黑線對應的區域，橫向只拉伸了Top所畫黑線對應的區域。至於Right與Bottom，我們可以通過勾選下方的Show content讓其顯示內容區域。

可以看到，這裏上下左右四條黑邊的作用確實如原理中所說。
圖中效果很難看，改成這樣：

看起來效果還不錯，這樣我們可以盡情的配置圖片該如何拉伸，針對不同分辨率，以達到一個更好的效果。

---

起初對Right與Bottom這2條邊限定的內容區域不太瞭解，便做了個小測試。
將2條邊改成如下：

然後佈局文件裏引入一個TextView，將background設置爲此.9圖片。

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/ninepatch"
        android:text="Hello World!" />

• 1
• 2
• 3
• 4
• 5
• 6

運行後的效果：

可以看到“Hello World！”顯示在了圖片的右下方。
Right與Bottom這2條邊限定的內容區域所起的作用便一目瞭然了。