前情提要

.9圖片

之前項目中有用到.9圖片，因精力有限，一直沒有去嘗試著弄過。如今因公司發展問題集體裁員，賦閑在家，便抽空簡單地了解了一下.9圖片的使用，作文如下，以做積累。

需求概要

在Android Studio環境下將PNG圖片制作成.9圖片，使之實現純色背景自適應拉伸，圖案內容保持原始比例。

準備素材及工具

• PNG圖片一張
• Android Studio

.9.png認知

PNG是一種非失真性壓縮位圖圖形文件格式。而.9.png是基于PNG圖片，對其進行進行特殊處理，使之實現局部拉伸的圖片格式。.9.png可實現兩種效果：

效果1

效果2

• 作為資源圖片純色部分進行局部拉伸，使圖案部分保持原始比例
• 作為輸入框的背景圖片，使圖片部分區域拉伸，部分區域實現文本內容的填充

.9圖片制作

• 修改圖片格式
  首先找一張普通的png圖片，將其導入到Android Studio的drawable目錄下。
  

  普通png圖片
  
  修改其后綴名，由.png改為.9.png。
  
  .9.png圖片
  
  雙擊指定.9格式的png圖片，Android Studio右側顯示板會顯示如下圖編輯面板。
  
  .9.png編輯面板

• 編輯規則
  

  圖片編輯規則
  
  由上圖可知，一張圖片可分為上、下、左、右四條邊，其中上和左是負責編輯圖片拉伸區域的，下和右是負責編輯圖片內容填充區域的。那怎么理解呢？首先我們來看看文章一開始的圖片《.9圖片》，可以看到圖片的上邊界的左右兩端有不太明顯的黑線，放大后如下圖所示。
  
  圖片上邊界-放大
  
  上邊界黑線表示水平方向上，黑線覆蓋的區域可以拉伸，同理左邊界黑線表示垂直方向上黑線覆蓋的區域可以拉伸；對應而言，右邊界和下邊界分別表示垂直方向上和水平方向上黑線覆蓋的區域可以填充內容。那么填充內容是什么意思呢？我們先來看一張圖。
  
  圖片來自手機QQ
  
  可以從圖中看到“嗯，差不多了”所占據的區域即填充內容的區域，其對應在背景圖右邊界和下邊界的區域就是.9圖片制作時需要畫下的黑線，此黑線用作標記圖片文本內容的填充。在水平和豎直方向上，黑線覆蓋的區域用于填充文本。

• 繪制操作
  那么如何繪制出黑線呢？在Android Studio的.9.png繪制面板中可以看到圖片的上下左右區域，如下圖紅色框框區域。
  

  繪制操作
  
  點擊任意紅色框框區域，按住鼠標進行拖動，可實現黑線繪制。若繪制黑線后需要對黑線覆蓋的區域進行調整，可將鼠標移至黑線兩段的豎直方向的線，按住鼠標進行拖動可調整黑線的長度（覆蓋區域）。
  
  繪制操作
  
  點擊除黑線的其他區域，如下圖紅色框框中的區域，可添加新的黑線，對多個區域進行拉伸。
  
  繪制操作
  
  繪制完畢后，可實現圖片純色部分拉伸，圖案部分保持原始比例。
  
  繪制操作
  
  其效果圖如下：
  
  縱向適應
  
  
  橫向適應
  
  按如上操作，亦可完成之前所述效果2的實現，即：作為文本輸入框的背景圖片，實現填充內容區域不拉伸，其他區域適應文本內容大小。
  
  .9.png實現QQ氣泡效果

寫在最后

實際開發中，美工裁剪好切圖后發給開發者的往往是普通圖片，如果開發中有使用到.9圖片的需求，而讀者們若對此不熟悉，此文會是很好的幫助！感謝閱讀！