Home‎ > ‎Android‎ > ‎

9-patch

Androidには9-patchというBitmapをスケールするのに役立つツールがある。
Adobe Flash にも nine sliceという機能がある。
HTML+CSSの世界では別々の画像に切り分けたりする。


sdk/tools/ にある9-patch ツールを起動する。(画像はAndroid Developperサイトから引用)

上下左右の各1ピクセルに9-Patchの制御用の印を入れてゆく。
上と左は引き伸ばしてもよいところを指定する。
下と右は内側のコンテンツの領域を指定する。

  • Zoom: このスライダーを動かすと左側の描画領域の大きさが変わる。作業しやすい大きさに調整する。
  • Patch scale: このスライダーを動かすと右側のプレビュー領域の画像の大きさが変わる。上から、上下に引き伸ばしたもの、左右に引き伸ばしたもの、上下左右に引き伸ばしたものとなる。
  • Show lock: コレにチェックを入れると、描画領域の画像をマウスオーバーしたときに画像本体部分に赤とグレーの斜線が表示される。
  • Show patches: これにチェックを入れると拡大してもよい領域(上と左の印)に緑のラインが伸び、スケールされる領域を確認できる。
  • Show content: これにチェックを入れると右側のプレビュー領域の画像にコンテンツ領域(右と下の印)のプレビューを青く表示する。ボタンや背景にこの画像を使う場合、この領域に文字や子ビューが入る。
  • Show bad patches: 引き伸ばす領域が均等出ない場合に赤い枠線が表示され、「このあたりが均等に伸びない」と教えてくれる。

完成したらファイル名を xxxxxx.9.png という形式にすると、Androidの9-patchリソースとして認識される。
  button.9.png というファイルを /res/drawable-mdpi/button.9.png にコピーすると、 R.drawable.button で参照できる。


この9-patch形式は特殊なファイルタイプではなく、元の画像の周りを1ピクセル広げ、#ff000000の黒色で9-patch用の印を付けたものである。
使い慣れたツールであらかじめ9-patchの印を描いてxxxx.9.png 形式の名前で保存して 9-patchツールで確認・調整するとよい。

9-patch形式でも画像を縮めることはできないので最小の描画サイズを想定して作成する必要がある。



■例
何もなし。コーナーの部分がそのまま引き伸ばされて、ぎざぎざが目立っている。

中央部のみを引き伸ばす。コーナーの引き伸ばされたくない部分がそのまま残り、伸ばしてもよい部分がまっすぐに伸びている。
テキストボックスやボタンやウィンドウの背景に使える。


周囲の空白のみ拡大している。どれだけ画像サイズが広がっても同じ大きさで中央に描画される。
チェックボックスの中身のチェック印などに使える。


内部コンテンツの高さが決まっているなら横に伸びる専用の背景も作成できる。


これはフレームワークに含まれる btn_dropdown_normal.9.png を 9-patch ツール表示したもの。