draw9patchでAndroid用のボタンを作る

最近素材作ったりのデザイナ的なこともできた方がいいのかなと思いつつあるので、ちょっと頑張って勉強してみる。
文字の位置だったり、拡大したときに崩れなかったりさせるために、Andorid-SDK付属のdraw9patchというツールを使うらしい。

さっそくやってみる。まずは元のボタン画像作成。適当にGimp使って作成してみた。Gimpも使ったことなかったので、ボタンでない部分が透過じゃなくて白になってしまってた。まぁ今回はdraw9patchを使ってみるのが主題なので、透過とかどうかはどうでも良いのでそのまま。

android-sdkのtoolsディレクトリにあるdraw9patchを起動する。

さっきのボタン画像を読み込ませたのが下図。

これで編集完了したら、こんな感じ。

簡単に説明すると、左と上の線が伸縮する領域で、右と下の線がコンテンツの入る領域。使い方としてはこの線を引くだけで簡単。困ったのは、引き過ぎた線の消し方が分からなかったので、再度開き直したことくらい。
Show contentにチェックを入れると右のウィンドウの紫っぽい枠でコンテンツの入る領域が表示されて、Show patchesにチェックを入れると左のウィンドウに伸縮するところが表示される。

結構地味で地道な作業だ。これをon用、off用で2つ(focusedやselected、pressedなどで分けるならもっと)作るのか。とりあえずdraw9patchのざっとした使い方、終わり。

draw9patchの使用/不使用のボタンの比較はこちら。比較するまでもなく、draw9patchは使うべき。