前言

在大型項目開發中，圖片拉伸的場景十分常見，而在這種場景下.9圖就能發揮極大的作用。比如開發提示氣泡時，氣泡背景要隨著文字數量的增加而進行延伸，而這氣泡背景便是使用到了.9圖（如下圖所示）。

格式

• .9圖的后綴格式為：.9.png

作用

• .9圖可以進行拉伸，如水平、豎直方向的延長，而清晰度不變。

• 令一張圖片實現多種拉伸效果，減少UI切圖的使用，降低包體積。

在UE提供的原始圖中，圖片的四周會有黑色的線條，這些黑色橫線正是.9圖能夠實現拉伸的原理所在。

.9圖原理，黑色橫線作用

• 頂部橫線代表水平延伸的時候，其他位置不變，此處橫線做水平延伸的部分。

• 底部橫線代表水平延伸的時候，內容在水平方向的顯示區域。

• 左方豎線代表豎直延伸的時候，其他位置不變，此處橫線做豎直延伸部分。

• 右方豎線代表豎直延伸的時候，內容在豎直方向的顯示區域。? ? ? ?

將一張.9圖導入進Android studio的drawable文件夾后，如下圖所示。??? ??

? ? ? ? ?右方的三張圖片，即.9圖豎直拉伸、水平拉伸、水平和豎直同時拉伸的展現。

自定義.9圖內容展示的區域

了解黑色橫線作用之后，將.9圖內容的顯示區域自定義出來就比較容易了。只要移動4根黑色橫線的位置、形成兩個矩形交集的部分（下圖的粉紅色區域），即可查看.9圖在水平、豎直方向延伸時的內容顯示區域。? ??? ?? ? ? ? ?

注意尖端三角形的拉伸

有一個值得注意的問題是，如果.9圖是氣泡形狀，帶著一個尖尖的三角形時，如果在圖片拉伸時不愿意改變三角形的形狀，可以將頂部或左方作拉伸用途的黑色橫線切分為兩部分，如下圖所示。這樣做就可以避免.9圖對三角形區域也進行拉伸。? ? ? ?

錯誤做法如下，尖端三角形的角度也改變了。

內邊距問題

因為.9圖的內容顯示區域可拉伸，那么，當黑色橫線沒有緊貼,9圖邊緣、而是隔開一段距離時，那隔開的這段距離就是.9圖自帶的內邊距。下圖中連接粉紅色區域的四條黑線的長度，即內邊距大小。

?? ? ? ?

而在布局代碼中使用.9圖時，就不需要再寫padding值。如果寫了padding屬性，會與.9圖自帶的內邊距發生沖突而失效。

外邊距問題

在開發中，可能會遇到一個問題，那就是.9圖在Android Studio的UI展示區域，明明是設置為了緊貼著邊緣頂部區域，為什么運行在真機上查看效果時卻是和頂部隔開了一段距離？

• 原因在于.9圖會自帶一個類似margin的外邊距，也即圖片和黑色橫線之間的距離。

下圖中存在的四個黑框即.9圖的外邊距背景。? ? ??

如果想解決這個問題、不要外邊距的話，那就需要UE重新裁切出一張新的圖片，把圖片和黑色橫線之間的距離切掉即可。

編譯失敗問題

在使用.9圖做背景時，有時候可能會發生編譯失敗。

AAPT: error: file failed to compile.

• 其中的原因，很有可能是因為某一邊缺少了一條黑色橫線，使內容顯示的區域沒有在.9圖中定義出來，導致編譯失敗。

• 解決的辦法是，對黑色橫線進行拉伸，使圖片四周都出現黑色橫線，展示出內容在.9圖上的顯示區域。

更多技術文章歡迎關注公眾號度熊君。

總結

以上是生活随笔為你收集整理的开发必备的图片格式——.9图的原理和陷阱的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。