サイトのトップへ戻る

Android Studio ドキュメント 日本語訳

サイト内検索

リサイズ可能ビットマップ(9-Patch ファイル)を作成する

Android Studioに搭載された 9-patch描写ツール、WYSIWYG エディターを使用することで、 ビューの内容と画面のサイズに合わせて自動的にサイズが変わるビットマップ画像を作成することができます。 画像内に描写されたインジケーターに基づき、画像の選択した部分を水平方向や垂直方向に伸縮します。

NinePatch の概要とそれがどのように動作するかについては、Canvas and Drawables ドキュメントの NinePatch Drawableに関する項目を参照してください。

図 1. Android Studioの 9-patch 描写ツール上でのNinePatch 画像

以下は、Android Studioの 9-patch描写ツールを使ってNinePatch 画像を作成するためのクイックガイドです。 NinePatch 画像を作成したいPNG 画像が必要です。

  1. Android Studioの画面上で NinePatch 画像を作成したいPNG 画像を右クリックして、Create 9-patch fileをクリックします。
  2. NinePatch 画像のファイル名を入力し、OKをクリックします。画像は .9.png というファイル拡張子で作成されます。
  3. Android Studioの画面上から、新規作成したファイルをダブルクリックして開きます。これでワークスペースが開きます。

    左のパネルが描写領域です。ここでは 伸縮可能なパッチ線とコンテンツ領域を編集できます。右のパネルはプレビュー領域です。ここでは伸縮した時の画像をプレビューできます。

  4. Click within the 1-pixel perimeter to draw the lines that define the stretchable patches and (optional) content area. Right-click (or hold Shift and click, on Mac) to erase previously drawn lines.
  5. 完了したら、 File > Save をクリックして変更を保存します。

ファイルをダブルクリックして、Android Studio 上から既存のNinePatch を開くことができます。

NinePatch 画像が正しく縮小されているかを確認するためには、伸縮可能領域のサイズを少なくとも2x2 ピクセルは確保してください。 そうしないと、伸縮可能領域は縮小時に非表示となってしまいます。Also, provide one pixel of extra safe space in the graphics before and after stretchable regions to avoid interpolation during scaling that may cause the color at the boundaries to change.

注意: 通常の PNG ファイル (*.png) は、画像の周りに1ピクセル分の空の境界線が付いた状態で読み込まれます。 この空領域には伸縮可能パッチやコンテンツ領域を描写できます。 以前に保存した NinePatch file (*.9.png)の場合は、既に空領域は設定済みなので、空領域は追加されずにそのまま読み込まれます。

図 2. A NinePatch image showing content, patches, and bad patches.

以下のオプションが使用できます:

  • Zoom: 描写領域に表示された画像のズームレベルを調節します。
  • Patch scale: プレビュー領域に表示された画像のサイズを調節します。
  • Show lock: Visualize the non-drawable area of the graphic on mouse-over.
  • Show patches: Preview the stretchable patches in the drawing area (pink is a stretchable patch), as shown in figure 2, above.
  • Show content: 図2で示すように、プレビュー画像のコンテンツ領域を強調表示します(コンテンツ領域は紫で強調表示されます)。
  • Show bad patches: Adds a red border around patch areas that may produce artifacts in the graphic when stretched, as shown in figure 2. Visual coherence of your stretched image will be maintained if you eliminate all bad patches.