Draw 9-patch ツールで WYSIWYG エディタを使って
NinePatch グラフィックを簡単に作成することができます。
Nine-patch グラフィックの入門とその働きについては、Ninepatch イメージ トピックにある Nine-patch のセクションを読んでください。
これは、Draw 9-patch ツールでNine-patch グラフィックを作成するガイドです。作成したい NinePatch といっしょに PNG イメージが必要となります。
- ターミナルで、 SDKの
/toolsディレクトリからdraw9patchアプリケーションを起動します。 - PNG イメージを Draw 9-patch ウィンドウにドラッグします
( または File > Open 9-patch... でファイルを指定します ) 。ここでワークスペースが開きます。
左のウィンドウ枠は描画領域で、ここで伸長可能なパッチとコンテント領域の線を編集できます。右のウィンドウ枠はプレビュー領域で、伸びたときのグラフィックをプレビューできます。
- 1 ピクセルの周囲内をクリックし、伸長可能なパッチと ( オプション ) コンテント領域を定義するラインを描きます。右クリック ( または、Mac であれば Shift を押しながら ) 前で描いたラインを消します。
- 完了したら、File > Save 9-patch... を選択します。
イメージはファイル名が
.9.pngで保存されます。
注意: 通常の PNG ファイル (*.png) は空の境界部がイメージの周囲に追加されてロードされ、そこで伸長領域とコンテント領域が描画できます。前に保存された9-patch ファイル (*.9.png) は、すでに存在していることから、そのままロードされ、描画領域は追加されません。
以下のオプション制御があります。
- Zoom: 描画領域でのグラフィックの拡大レベルを調整します。
- Patch scale: プレビュー領域でのイメージスケールを調整します。
- Show lock: グラフィックで描画されない領域でマウスカーソルが重なった部分を視覚化します。
- Show patches: 描画領域で伸長可能パッチをプレビューします ( ピンクが伸長可能パッチです ) 。
- Show content: プレビューイメージでコンテント領域をハイライトします ( 紫がコンテントとして許可されている領域です ) 。
- Show bad patches: グラフィックが伸びたときときにアーチファクトができてしまう可能性があるパッチ領域にの周りに赤い境界線を追加します。不正なパッチをすべて排除すれば、伸長イメージの見た目が首尾一貫します。