draw9patch で NinePatch をつくる方法

何ができるのか？

draw9patchでpng画像から、Nine-patch (9 patch)画像を作成すると、ボタンの背景のように、伸縮してもきたなくならない画像を作成できる。

Nine-patch 画像とは、Androidで使える伸縮可能な画像のことで、画像を伸縮不可能なエリア(角)と伸縮可能なエリア(全部で９つ)にわけたもの。HTML/CSSで背景と角丸画像でボタン作ったりするのを一つの画像に納めたという感じ。
画像としては、黒い線のあるpngなので、画像エディタで黒い線を引けば同等のことができるはず。

手順。

1. もととなるpng画像を用意する
2. SDK/tools以下のdraw9patch.batを起動
   • 
3. png画像をD&Dするか、ファイルメニューから開く
4. エリアを分ける
   • 
   • 画像の一番上の横一列と、左の縦一列が、エリアを分ける目印となる。
   • 黒い線がある部分が伸縮可能領域。該当するピクセルをクリックすると黒になり、Shiftを押しながらクリックすると消去される。
   • 画像の右、下も1ピクセルずつ黒く書き込み可能なんだけど、何に使うのはは不明。
   • 右下にある「Show Patches」チェックボックスにチェックをいれておくとエリアが色分けされてわかりやすい
5. 編集が終わったら .9.png という拡張子で保存をする
6. 使い方
   • 普通の画像と同様にdrawable以下に置いて使える。
   • hoge.9.pngなら@drawable/hoge でOK。

それにしても直感的とは言い難いツールだな、、、