Save the date! Android Dev Summit is coming to Mountain View, CA on November 7-8, 2018.

リサイズ可能なビットマップ(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 のように、伸縮によってアーチファクトが発生する可能性のあるパッチ領域には、周囲に赤い境界線が表示されます。このパッチを完全に排除することで、引き延ばされた画像が均一に見えるようになります。