[分享] 製作 9-patch 圖片來符合不同尺寸的圖形

[punk86862001 (趙MAN)]

有圖網誌有排版好讀版
http://goo.gl/OadQXS

------

前言

身為一個 Android Developer，會一點修圖技巧也是蠻合理的
假設你今天想要做一個可以在黑板上畫畫的應用程式
而你從一個不太懂 Android 設計的設計師那拿到了一個正方形的 png 圖檔

這時候如果你直接套用圖片背景在 App 的 root view 上，
就會發生如下的慘狀：
1. 圖形四邊的圓角嚴重失真
2. 四邊的邊緣寬度也不一樣
3. 粉筆還變胖了呢！

這個時候你可以選擇回去幹譙設計師，叫她再生一張可以用的圖出來
這樣子雖然可以達到你的目的，套用 9-patch 的 png 檔得到如下右圖的效果

但也因此你的設計師開始抱怨工程師很難溝通
這樣有損我們善良清新的工程師形象....
所以今天要來簡單學一下製作 9-path 圖片的方法！
使用 9-patch 的圖片不論在直的或是橫的顯示模式圖形都可以正常顯示


使用 draw9patch.bat

其實製作 9-patch 圖檔的工具就藏在 Android 提供的 sdk 底下
路徑是 sdk/tools/draw9patch.bat
開啟這個工具以後，點選 File > Open 9-patch 來新增圖片
接著我們可以在左邊以及上面各畫一條黑線來表示我們希望此圖片可以延展的區域
如下右圖所示，圖中兩個紅色框框交集的部分，就是圖片可以延展的區域
而為了不讓圖片中的粉筆被延展，交集的區域不要選到粉筆

同樣地我們也可以在右邊跟下面各畫一條黑線，這個部分是 Optional 的
而這兩條黑線所形成的區域就是你希望文字在這張圖片上面顯示的範圍
當你套用此圖片在 Button 的背景時，文字就會座落在你想要的範圍

完成編輯以後，點選 File > Save 9-patch 來存檔
他會自己生成 <檔名>.9.png ，記得不要自行把 .9 刪掉，否則可能會有錯誤！


總結

其實我一直在考慮要不要寫這篇
有點擔心這個大家都知道了就不想看了QQ
總之希望大家多少會一點這樣子的技巧
讓自己的 App 在許多小細節上能夠處理地更好！謝謝！

參考資料：
1. Draw 9-patch
http://developer.android.com/tools/help/draw9patch.html
2. 【Android】9-patch圖片以及例子說明
http://www.cnblogs.com/Amandaliu/archive/2013/04/26/3045286.html


--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 36.224.186.221
推 tga123:我之前自己摸好久= =才知道怎麼弄Orz後來我朋友有給我這個
→ tga123:http://0rz.tw/MfIJ8
→ punk86862001:感謝分享！這個不錯可以直接生成不同解析度的圖檔！
推 nonebelieve:推推
推 redok:推~
推 pkmilk:推
推 tangblack:推