Androidで拡大縮小可能なGUI部品を作成するには

2010.05.08 // blog // hiroakin // 1 Comment

WEBデザインでも角にRのついたグラフィックを作成し、内容の量に応じてボックスを拡大縮小可能できるように配置する場合があると思います。AndroidのGUIではそのような機能が、Ninepatchという名前で実装されています。またそのための特殊なPNGファイルを作成するツールがSDKに同梱されています。

Ninepatchイメージは、拡張子が.9.pngの特殊なPNGファイルですが、中身は通常のPNGファイルのようです。まず、拡大縮小可能なように中心部がタイリングできるようなグラフィックを描きます。

図では紫の部分がタイリング可能なようにベタ塗りとして、上から下へのグラデーションをつなぎ目のないように描いています。このファイルを通常のPNGファイルで書き出します。

次にAndroid SDKのツールディレクトリにあるdraw9patch.batを開きます。特に開発環境をインストールしていなくても、Javaが動く環境であれば動作すると思います。

起動に少し時間がかかりますが、図のようなウィンドウが開くと思います。

このウィンドウに先ほど保存したPNGファイルをドラッグ＆ドロップします。

右に拡大縮小した場合のプレビューが表示されます。このままだと見た目がおかしいですね。Ninepatchイメージは実際のグラフィックの周囲1ピクセルに範囲指定用の特殊な領域を持ったPNGファイルです。そこにツールを使って範囲の指定を行います。範囲の指定と言っても難しいことは何もなく、線を引くだけです。上と左の領域でタイリングする範囲を指定します。線を消すにはShiftキーを押しながら引きます。

これで右のプレビューでも正しく表示されるようになりました。次に、コンテンツ（文字など）がどこまで表示されるかを指定します。その指定には右と下の領域を使います。この時に右下の「Show content」チェックボックスをオンにすると実際のエリアをプレビューすることができます。

最後にFileメニューから保存を選んで、ファイルを保存します。この時に自動的には拡張子が付きませんから、必ずfile_name.9.pngと指定することを忘れないようにします。これで拡大縮小可能なGUIパーツの完成です。詳細はデベロッパーサイトのDraw 9-patchに記述されていますので参照してください。