9patchの画像をdraw9patch以外で作成する方法

Androidのデザインで伸びて欲しい部分を指定できる便利な9patchという方法があります。

そしてこれはAndroidSDKの中に入っているdraw9patchで作るのですが、これがあまり使いやすいとは言えない。

そして今日

デザイナーがコードから読み解く、 Androidアプリのデザインの幅を広げるコツとTips【第1回】

に参加してきました。

その中で、発表者がdraw9patch以外では9patch画像をうまく作れないといっていたので、

ちょっと試してみました。

使った画像はこれです。

ちょっと前までプロジェクトの新規作成で自動生成されていたやつですね。

9patchは、画像の周囲1pixelの部分に黒点を描画することで、その部分が伸びるように認識させる事ができます。

なので72x72のものを74x74に拡大し、こんなふうに黒点を描画してみます。

上と左の黒点の交わった部分が伸びる部分で、右と下の黒点（もはや黒い線）の交わった部分が、内容を表示できるエリアです。

これを、PhotoShop CS5で作成しました。

それをリソースファイルに入れて、ImageViewの背景に指定し画面いっぱいに広げたらこんな風になりました。

ちゃんと伸びてますね。

ということで結論として、9patchの画像をdraw9patchで作ることは可能です。

ただ、気をつけなければいけない点があります。

一つ目はAndroidに9patchの画像として認識させるには次のような条件があります。

周囲1pixelを9patch専用の領域とする。

9patch専用の領域には完全な黒と完全な透明の２つ以外、存在してはいけない。

拡張子は「.9.png」とする

上の勉強会の発表者がうまく作れなかった原因は主に２つ目が原因ではないかなと思います。

PhotoshopやFireworksなどで9patch用の黒点を打つときに大きさ1pixelのペンで書くと思われますが、位置が少しずれると隣のpixelに少し影響が出ます。その影響で完全な黒でない部分や、うっすらと黒が描画されている部分が発生し、9patchの画像として認識されなかったのではと思っています。

で、今回この画像を作るときにはペンを使わず、9patchとして指定したい部分を選択範囲にし、その部分を完全な黒で塗りつぶすことによって作成しています。

あと、これは9patchの生成には関係のないことですが、

ImageViewのsrc属性に画像を設定しても、伸びてくれませんでした。

ImageViewのbackground属性に画像を設定したときに、上の画像のように9patchとして認識してくれました。

9patchは背景画像にしか使えないのかも知れないです。あ、でも背景に使えれば十分か。


以上、9patchの生成に関する記事でした。デザイナーさんはいつも使っている環境で9patchの画像を作ることができるので、挑戦してみてください。