Androidでは内容に応じて拡大縮小可能なグラフィックとして、「9 Patch」という特殊なグラフィックを扱うことができます。特殊な、と言ってもある一定の規則の元で作成されたPNGファイルですが、この9パッチグラフィックを理解していないとAndroidのUIデザインは難しいと思います。かなり普及していると思うので今さらですが基本と応用をまとめてみます。

例えば下の図のようなA、B、Cというボタンがあるとします。ボタンのデザイン自体は同じです。角のRも同じ、色も同じです。ただコードで表示されるテキストの部分が違うとします。ABCを別々のグラフィックとして用意してもいいですが、解像度がたくさんあるAndroidの場合、ボタンのグラフィックの数が膨大になってしまいます。そんな時に使うのが「9パッチ」です。名前の由来はもちろん右のように、拡大縮小してもいい部分と、そのまま維持したい角の部分などを分割すると9個の領域に分けることができることから来ています。Illustratorのシンボルの「9スライス」のようなものですね。

9patch-basic

9パッチグラフィックは特殊な規則の元に作成された普通のPNGファイルなので、PNGファイルが編集できるグラフィックツールならどれでも作成することができます。まず、使いたいグラフィックの回りに1ピクセルの透明のエリアを追加します。48x48ピクセルのグラフィックなら、キャンバスツールなどで50×50に拡大します。この全周1ピクセルの領域は使用時には無視されますので、実際に表示されるのは48x48ピクセルのエリアだけです。次に、その1ピクセルの領域に拡大縮小したい場所と、コンテンツを表示した場所を「黒」で描きます。この「黒」は完全に「黒」つまり#000でないといけません。またそれ以外の領域に何か色が描かれているとエラーになってしまいます。指定箇所以外は「透明」か「白」でないといけません。ボタンにドロップシャドウなどを描いている場合、目視できなくても微妙な透明度が外側の1ピクセルの領域にかかってしまうことがあるので注意が必要です。

9patch-area

指定できるのは、左辺と上辺が「拡大する範囲」の指定、右辺と下辺が「コンテンツの領域」の指定になります。「拡大する範囲」というのは、大きさが変わった時にその部分がストレッチされる領域のことです。iOSのようにリピートではありませんので、iPhoneデザインから来た人は少し戸惑うかもしれませんね。ストレッチされてしまいますので何かパターンのようなものには使いにくいかも知れません。もしグラデーションなどに設定する場合はなるべく大きな範囲で指定するといいでしょう。

9patch-explain

「コンテンツの領域」というのは、ボタンの場合は簡単にいうと「ボタンラベル」に相当する領域です。コードで挿入されるテキスト表示やアイコンですね。グラフィック全体に重なってもいいのであれば、上下左右いっぱいの指定でも構いません。逆にいうとこれを使ってマージンを指定できるのです。下の図のAのようにテキストは指定領域内に表示されますので、この指定でボタンの外側とのマージンを固定することができます。また応用としてボタン内の簡単なレイアウトにも使えます。Bではボタングラフィックにアップロードのアイコンが描かれています。この部分を「拡大しない」領域として、上のテキスト部分を「コンテンツ領域」として指定することで、特にレイアウトをコードで書かなくてもこのようなボタンを作成することができます。

9patch-margin

また、拡大する領域は複数指定することができます。複数指定した領域は拡大時に「同じく均等に」拡大されますから、下の図のようなグリッド線も作成することができます。下のように指定すれば罫線の幅は変わらずに、大きさに合わせてマス目の大きさを変えることができます。このように9パッチはボタンだけでなく、すべてのグラフィックで使えます。AndroidではiPhoneのように背景のグラフィックは2種類用意すればいい、というわけにはいきませんので、例えば背景のグラフィックも9パッチで作成してリソースを削減することができます。

9patch-grid

最後に9パッチグラフィックを通常のPNGとは違う特殊なグラフィックとして認識させるためには、ファイル名の命名に規則があります。拡張子の前に必ず「.9」(ピリオド9)と付けます。つまり通常のファイル名が「hogehoge.png」であれば、「hogehoge.9.png」とするわけです。これがないと通常のPNGファイルとして扱われてしまいます。

9パッチグラフィックはAndroidデザインでは必須のテクニックなので、上の基本の規則を守っていろいろ応用してみると意外な使い方を見つけることができるかもしれません。詳しくはデベロッパーサイトの「Draw 9patch」を参照してください。

 

 

Tags: