6 月 3 日の「#Android11: The Beta Launch Show」にぜひご参加ください。

サイズ変更が可能なビットマップ(9-patch ファイル)の作成

Draw 9-patch ツールは Android Studio に組み込まれている WYSIWYG エディタです。このツールを使用すると、ビューのコンテンツと画面のサイズに合わせて自動的にサイズが変更されるビットマップ画像を作成できます。画像内で範囲を選択してインジケーターを調整すると、選択した領域が水平方向または垂直方向に拡大 / 縮小されます。

NinePatch グラフィックの概要とその仕組みについては、キャンバスとドローアブルのドキュメントにある NinePatch ドローアブルに関するセクションをご覧ください。

図 1. Android Studio の Draw 9-patch ツールに表示された NinePatch 画像

ここでは、Android Studio の Draw 9-patch ツールを使用して NinePatch グラフィックを作成するための簡単なガイドを紹介します。まず、NinePatch 画像の作成に使用する PNG 画像を用意してください。

  1. Android Studio で、NinePatch 画像の元になる PNG 画像を右クリックして、[Create 9-patch file] をクリックします。
  2. NinePatch 画像のファイル名を入力して [OK] をクリックします。.9.png ファイル拡張子が付いた画像ファイルが作成されます。
  3. 新しい NinePatch ファイルをダブルクリックして、Android Studio に表示します。ワークスペースが開きます。

    左のパネルは描画領域で、伸縮可能なパッチとコンテンツ領域を表す線を編集できます。右のパネルはプレビュー領域で、伸縮するグラフィックのプレビューが表示されます。

  4. 1 ピクセル分の外周線内をクリックして、伸縮可能なパッチと(オプションの)コンテンツ領域を定義する線を引きます。右クリック(Mac では Shift キーを押しながらクリック)すると、前に引いた線を削除できます。
  5. 完了したら、[File] > [Save] をクリックして、変更内容を保存します。

Android Studio で既存の NinePatch ファイルを開くには、ファイルをダブルクリックします。

NinePatch グラフィックを適切に縮小するには、伸縮可能な領域のサイズを必ず 2x2 ピクセル以上にする必要があります。 これより小さいと、縮小時に表示されなくなる可能性があります。また、グラフィックの伸縮可能な領域の周囲には 1 ピクセル分の安全スペースを設けてください。これは、拡大 / 縮小時の補間によって、境界部分の色が変わるのを防ぐためです。

注: 通常の PNG ファイル(*.png)は、画像の周囲に 1 ピクセル分の空白の境界が追加された状態で読み込まれます。この境界に、伸縮可能なパッチとコンテンツ領域を描画できます。前に保存した NinePatch ファイル(*.9.png)にはすでに描画領域が存在するため、新たに描画領域は追加されず、そのまま読み込まれます。

図 2. コンテンツ、パッチ、不適切なパッチが表示された NinePatch 画像

オプションのコントロールには次のものが含まれます。

  • Zoom: 描画領域内のグラフィックのズームレベルを調整します。
  • Patch scale: プレビュー領域内の画像のスケールを調整します。
  • Show lock: マウスオーバーにより、グラフィックの描画不可能領域を視覚化します。
  • Show patches: 上の図 2 に示されているように、描画領域内に伸縮可能なパッチ(ピンクは伸縮可能なパッチを表します)のプレビューを表示します。
  • Show content: 上の図 2 に示されているように、プレビュー画像のコンテンツ領域をハイライトします(紫はコンテンツを表示できる領域を表します)。
  • Show bad patches: 図 2 に示されているように、伸縮によってアーティファクトが発生する可能性があるパッチ領域の周囲に、赤い境界線を追加します。不適切なパッチをすべて削除しても、伸縮する画像の視覚的な一貫性は維持されます。