前言
昨天在處理 UI 界面微調的時候，再一次用到了 .9 格式圖檔。我們是 UI 隻出 JPG 格式的圖， .9 圖需要自己做。 因為項目之前已經用到了 .9 圖，是以我之前也就大緻查了下 .9 圖的制作方法，隻是大緻記住調整四條邊就 ok 了。然而昨天自己調的時候忘了四條邊的含義，折騰了一會。 是以，雖然很簡單，還是要記錄一下的。
為什麼用.9圖檔
我們知道一般的圖檔被拉伸會失真。而我們有些場景如聊天消息氣泡因内容不固定，如果被拉伸就會失真。如下圖：
用了.9圖後，效果是這樣的：
是不是立竿見影？
如何制作 .9 圖檔？
1.修改檔案字尾名
拿到 UI 給的 jpg 的 圖檔導入到 android studio 之後，需要修改圖檔名稱添加 .9 辨別。如 message_bubble.9.png 。
修改完名稱後，就可以看到，圖檔預覽那一欄下面多了兩個 tab 欄：9-Patch 和 ImageFileEditor .。 選中 9-Patch 欄，我們可以看到如下界面：
左邊的是我們的原圖，右邊可以看到有3張圖。其中1代表豎直方向拉伸後的圖檔，2 代表水準方向拉伸後的圖檔，3代表豎直方向和水準方向都拉伸後的圖檔。
可以看到，拉伸後氣泡的那個尖角已經變形了。這張圖也許變形的不明顯，這時我們調整一下patch scale 放大檢視，效果就很明顯了。
是以，下面就讓我們開始制作.9圖檔吧。
2.制作.9圖檔
将滑鼠移到左邊原圖上，這個時候會看到邊界顯示的有好幾條線，通過移動這幾條線，就可以給圖檔繪制1px寬度的黑線。
這裡就必須說一下四條邊上黑線的含義了，也是制作的秘訣。
- 上邊：控制圖檔水準方向可拉伸的區域
- 左邊：控制圖檔豎直方向可拉伸的區域
- 右邊：控制圖檔内包裹内容的豎直顯示區域
- 下邊：通知圖檔内包裹内容的水準顯示區域
也就是左上兩條邊控制圖檔本身的拉伸，右下兩條邊控制圖檔包裹内容的顯示區域。
那聊天氣泡的.9圖就可以這樣做了：
這裡說一下我為什麼要這麼做，因為是消息氣泡，是以這幾條邊是這樣弄的:
- 上邊：代表水準可拉伸區域，在水準方向設定一點黑線（不用設定很長，因為黑線區域就表示可無限拉伸）
- 左邊：代碼豎直方向可拉伸的區域，注意這個黑線我是設定在尖角下方位置的，因為我想要的是如果豎直方向内容很多，尖角還是偏上，不要居中。
- 右邊，内容豎直方向區域是要充滿氣泡的，但不能到圓角部分
- 下邊，内容水準方向區域是要充滿氣泡的，但是不能到圓角部分
設定完後，就可以看到這圖的效果了，然後我們設定一下scale參數，發現就算被放大到很大，圖檔依然沒有失真，那我們的 .9 就算成功了。
這裡再說一下上圖中幾個可勾選内容的意思：
- show lock :暫時不知道什麼意思，隻是注意到如果勾選，滑鼠放到原圖上會出現一塊紅黑色區域
- show content ：圖檔包裹内容的顯示區域，也就是上圖右邊部分圖篇藍色部分
- show patches：顯示圖檔被拉伸的區域，也就是上圖左邊原圖中間那個紅色小區域
- show bad patches: 顯示做的不好的可拉伸的區域。比如，我們的消息氣泡的那個尖尖我們肯定不想被拉伸，如果我們照如下圖設定左邊黑線讓尖角也是可拉伸的區域，就會顯示 bad patches。
到此，我們的 .9 圖就制作完畢了。
參考文章
https://www.jianshu.com/p/3fd048644e3f
http://www.ui.cn/detail/290941.html