以前のエントリーでどんなグラフィックツールでもAndroidの9パッチグラフィックを作ることができる、と書きましたが、「Android Asset Studio」を使うともっと簡単に9パッチグラフィックを作成することが出来ます。4.3から導入された「Optical Bounds」にも対応しています。正確に書くと「Android Asset Studio」はいくつかのユーティリティが集まったWEBサービスで、9パッチを作成するのはその中の「Simple nine-patch generator」になります。

Androidアセットスタジオ

Simple nine-patch generator」で9パッチグラフィックを作成する前に、事前にPNGで9パッチにしたい画像を作成しておきます。下の例では48×48ピクセルで、背景が透明の、ドロップシャドウのついたボタングラフィックを先にPhotoshopで作成しました。

android-asset-studio-03

Simple nine-patch generator」にアクセスすると次のような画面になります。まず最初に左上の「SELECT IMAGE」から、先に作っておいたPNGファイルを開きます。

android-asset-studio-02

次に2の「Source density」を選びます。例ではmdpiで48dp(48px)のボタンとしたので、ここを「MDPI」に変えます。720x1280ピクセルの画面でボタンを作成したのであれば、ここは「XHDPI」のままで構いません。それから右の「Edit Mode」で「どこを拡縮するか」、「どこをコンテンツエリアとするか」そして「どこをレイアウトから除外するか(Optical Bounds)」を指定します。どこを拡縮するかは「STRECH REGIONS」の設定です。サンプルでは縦方向にグラデーションがかかっていますので、なるべく大きなエリアを指定するようにします。

android-asset-studio-04

どこをコンテンツエリアとするかは「CONTENT PADDING」の設定です。下のように、テキストなどが入る位置、つまりボタン外形からのマージンを指定します。

android-asset-studio-05

最後に、これはJelly Beansの4.3以降にしか使えない機能ですが「OPTICAL BOUNDS」の設定をします。「OPTICAL BOUNDS」についてはこの前のエントリーを読んでいただければと思いますが、要するにレイアウトとして対象とするエリアを指定する機能です。ドロップシャドウを除外して実際のボタン外形をレイアウトの対象とするように設定します。

android-asset-studio-06

「Edit mode」で指定が終わったら、4の「Drawable Name」でファイル名を指定します。自動的に.9.pngという末尾が付きますので、ここではそれより前の部分を指定します。Androidでは解像度が違ってもファイル名は同じです。解像度毎に違うフォルダに格納されます。すべての設定が終わったら「Download zip」を押せば、自動的にファイルが作成されてZIP圧縮されたファイルをダウンロードすることが出来ます。解凍してみると下のように解像度毎のフォルダに分かれてファイルが生成されています。

android-asset-studio-07

後はこれを開発の人にレイアウト指定と合わせて渡すだけです。この方法だと拡大/縮小するエリアを複数指定したりはできませんが、領域の指定間違いやファイル名の記述間違いなどありませんので大変便利です。みなさんもぜひ使ってみてはどうでしょうか。

 

Tags: