デザイナーの大西です。
Android ユーザーの皆さん、Sleipnir Mobile for Android はお使いいただけていますか？まだの方はぜひお試しくださいね。
Sleipnir Mobile – ウェブブラウザ – Android マーケット
本題ですが、Android 端末は様々な解像度があるので、ボタンなどが拡大されても汚くならないよう、画像素材を引き伸ばし可能な形にする必要があります。
Android OS 用に画像の引き伸ばしを指定したものが NINE Patch 画像です。
NINE Patch 画像の基本的な構造と作り方、応用編を紹介します。
NINE Patch 画像の作成には、Android の SDK で draw9patch というツールが提供されているのでそれを使います。
draw9patch は <Android SDK フォルダ>/tools 内にあります。
■NINE Patch 画像の構造と作り方
1．最初に
ボタンなど、引き延ばしたい画像(png 形式)を作成し、Draw 9-patch で開きます。
Draw 9-patch で画像を開くと、画像の上下左右に 1px ずつ余白が追加されます。そこを使用して引き伸ばし領域とコンテンツ領域を指定します。
画面左側が編集用、右側が引き伸ばし後のプレビュー表示です。
現在は引き伸ばし領域の指定をしていないため、このまま拡大すると角丸の比率が崩れ、境界線も太くなってしまっています。
Draw 9-patch ツールの詳しい説明は以下をご確認ください。
Draw 9-patch | Android Developers（英語）
Draw 9-patch – ソフトウェア技術ドキュメントを勝手に翻訳
2.引き伸ばし領域の指定
画像の上左 1px に黒いラインを引くと、その部分が引き伸ばし領域になります。
上 1px で横方向への引き伸ばし、左 1px が縦方向への引き伸ばし指定です。
緑とピンクの部分が引き伸ばされます。角丸部分を避けて指定しているので拡大しても汚くなりません。
引き伸ばし領域は複数指定できます。
画像の中心などに引き延ばされたくない領域（下の画像の場合は▼マーク）がある場合は、そこを避けて引き伸ばし領域を指定可能です。
3.コンテンツ領域の指定
コンテンツ領域とは、ボタンなどの中に配置するアイコンやテキストの入る領域です。
画像の下右 1px に黒いラインを引いて指定します。
画面左に表示されている青い部分がコンテンツ領域にあたります。青くないところが余白になります。
ボタンの中いっぱいにアイコンやテキストを入れたければコンテンツ領域を広く指定してください。
4.NINE Patch 画像を保存
Draw 9-patch で保存するとファイル名の末尾に「.9」が追加され、「hogehoge.9.png」となります。
ファイル名に「.9」がついているかどうかで NINE Patch 画像として Android に認識されます。
■応用編
NINE Patch 画像の、引き伸ばし領域を複数指定できるところを活用すると、以下のような NINE Patch 画像が作成できます。
・市松模様のボタン
・水玉模様の背景
・曲がった矢印
いろんな事ができますね！市松模様のボタンと水玉模様の背景は、縦横の拡大率が変わらないパーツに使う必要がありますが・・・。
NINE Patch は簡単かつ柔軟な形式だと思います。
応用編であげた例は、いずれも利用シーンは少ないでしょう。が、「こんな事ができる」と知っていれば Android アプリの外観の幅をさらに広げる第一歩になります。
ご存じなかった方、活用いただければ幸いです。
関連記事
