9 Patch エディター - 9 patch画像を作成するためのオンラインWYSIWYGツール
9 Patch エディターは、Android Studioに含まれているものと同様のオンラインWYSIWYGツールです。このツールを使用すると、ビューの内容と画面サイズに合わせて自動的にサイズ調整されるビットマップ画像を作成できます。画像内に描画されたインジケーターに基づいて、画像の選択された部分を水平または垂直方向に拡大縮小できます。
使用方法
9 Patch エディターを使用してNinePatchグラフィックを作成するには、以下の手順に従ってください。NinePatch画像を作成したい画像が必要です。
- 画像を選択ボタンをクリックするか、NinePatch画像を作成したい画像をエディターにドラッグします。
開かれるワークスペースでは、中央のパネルが描画エリアで、拡大可能なパッチとコンテンツエリアの線を編集できます。右側のパネルはプレビューエリアで、拡大時のグラフィックをプレビューできます。
- NinePatch画像の名前を変更します。画像は.9.pngファイル拡張子で保存されます。
- 1ピクセルの周囲内をクリックして、拡大可能なパッチと（オプションの）コンテンツエリアを定義する線を描画します。
- 完了したら、画像を保存ボタンをクリックして変更を保存します。
図1. NinePatch画像を表示する9 Patch エディター。
NinePatchグラフィックが適切に縮小されるようにするには、拡大可能な領域のサイズが最低2x2ピクセルであることを確認してください。そうでない場合、縮小時にそれらの領域が消失する可能性があります。拡大時に境界線の色が変化する補間を避けるには、拡大可能な領域の前後に1ピクセルの追加の安全スペースを提供してください。
注意：通常のPNGファイル（*.png）は、画像の周囲に空の1ピクセルの境界線が追加された状態で読み込まれます。この境界線内で拡大可能なパッチとコンテンツエリアを描画できます。以前に保存されたNinePatchファイル（*.9.png）は、描画エリアがすでに存在するため、そのまま読み込まれます。
オプションコントロール
- ズーム：描画エリアのグラフィックのズームレベルを調整します。
- パッチスケール：プレビューエリアの画像のスケールを調整します。
- ロックを表示：マウスオーバー時にグラフィックの描画不可能な領域を視覚化します。
- パッチを表示：描画エリアでピンクの拡大可能なパッチをプレビューします。図2に示すように、ピンクは拡大可能なパッチを示します。
- コンテンツを表示：プレビュー画像でコンテンツエリアを強調表示します。図2に示すように、紫色はコンテンツが許可される領域を示します。
- 不正なパッチを表示：図2に示すように、拡大時にグラフィックにアーティファクトを生成する可能性のあるパッチ領域の周囲に赤い境界線を追加します。すべての不正なパッチを除去すると、拡大された画像の視覚的な一貫性を維持できます。
図2. エディターでコンテンツ、パッチ、不正なパッチを表示するNinePatch画像。