[Android アプリの UI デザイン] 9-patch の作りかたのまとめと Tips

AndroidアプリのUIデザイン

#Android

#UIデザイン

#デザイン

諏訪悠紀

2013.03.08

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんばんは。アンドロイダー？な諏訪です。
本シリーズ「Android アプリの UI デザイン」では、Android アプリの UI デザインについて広く取り扱っていきます。

UI デザインといっても、時にはデザイナー目線で「このようなレイアウトだったらユーザは迷わないだろう」や「情報はこうまとめたほうが見やすいだろう」といったようなことを述べたり、また時にはデベロッパー目線で「こういう UI デザインはこういう実装方法で実現できるよ」や「Android の性質上、こういうデザインにすべき」といったようなことを述べたりしようと思っています。

賛否両論な意見を述べることもあるかも知れませんが…意見交換の場になって、学びあえればそれはそれで良いかなぁ、なんて思っています (とはいうものの、当面は実装方法の基礎的なところをおさらいしていきたいと思ってます)。どうぞよろしくお願いします。

というわけで今回は 9-patch という画像リソースの概念と作りかた、そして使いこなすための Tips について書きたいと思います！

ちなみに本シリーズは以前「クラスメソッドデザインブログ」で公開していた「デザインアセットの作りかた」というシリーズ記事を開発ブログに移行したきっかけでシリーズ名を変えました。

9-patch について

9-patch とは？

9-patch とは… とっても超ざっくり一言で言うと「スケールする画像」です。ボタンのような UI パーツによく使われるんですが、つまりは UI パーツの大きさに合わせて、ぴったり綺麗に表示してくれる素敵なリソースです。また角丸などのように「この場所は伸縮したくない！」という場所を固定サイズにすることもできるので、何とも自由自在にスケールさせることができます。

9-patch のしくみ

9-patch は PNG ファイルの上下左右 1px に余白を取り、その中でスケールする位置とコンテンツ領域の指定を行います。上と左がスケールする位置の指定、下と右がコンテンツ領域です。言葉だけだと分かりづらいので、まずは下図を見てください。

画像の上と左に黒い点があるのが見えますか？これがスケールする位置の指定です。この黒い点の延長線上の範囲が実際にスケールする位置として指定されます。逆に言えば、黒い点が書かれていないところが固定サイズになるところです。ということでこの画像リソースは角丸以外の部分がスケールする画像というわけです。下図のようにスケールします。

また、下と右はコンテンツ領域です。黒く塗られた範囲がコンテンツ領域になります。これはつまりパディングのようなもの (というかパディング) で、黒く塗られていないところがパディングとして余白になります。

最重要なのは上と左のスケールする位置の設定です。これがないと 9-patch を使っている意味がなくなってしまうので…。またコンテンツの領域は画像で指定しなくてもレイアウト XML の指定でほとんどの場合何とかなります。必ずしも指定しなければいけないというわけではありません。
また、こうして作った 9-patch の画像ファイルは拡張子を *.9.png にします。こうすることでアプリ側で 9-patch の画像として加工してくれるようになります。

9-patch の作りかた

Eclipse に 9-patch のプラグインをインストールしよう

つい先日「Draw 9-patch Tool」というプラグインが公開されました！これまではコマンドラインから起動して使うツールだったので起動が面倒だったのですが、このプラグインを使うことで Eclipse 上から 9-patch な画像ファイルを編集することができるようになります！とっても便利です。作者のかたにはとってもとっても感謝です。さあ、早速インストールしましょう。まずは以下の URL にアクセスします。

https://github.com/keiji/draw9patch2/blob/master/bin/Draw9PatchPlugin.zip

Zip ファイルを解凍し、その中の jar ファイルを Eclipse の plugins フォルダに入れます。

あとは Eclipse を再起動すれば使えるようになります！PNG ファイルをダブルクリックすると Draw 9-patch Tool が起動するようになっているはずです！

9-patch を作ってみる

というわけで 9-patch な画像ファイルを作ってみましょう。まずはベースとなる画像を適当に用意し、プロジェクトを適当に作り、drawable フォルダに入れましょう。そしてダブルクリックで Draw 9-patch Tool を起動します。

角丸の矩形の中に Droid くんが居るボタンです。角丸と Droid くんはスケールしてほしくないので、そこを避けるように黒い点を打ちます。横にスケールしたときのプレビューが表示されるので分かりやすいですね！

出来上がったら Command + S ( Windows の場合は Ctrl + S ) で保存します。すると開いたファイルの拡張子が *.9.png という形式に変わっているはずです。

これで完成！あとは普通の画像リソースと同じように使うことができます。

9-patch を作る上で知って得する Tips

ストライプとか不向きです

とっても便利な 9-patch ですが、ストライプなどの画像は不得意です。等間隔にスケールすることができないのでうまく作ることができません。。このように 9-patch にしづらいケースもあるので注意してください。

9-patch に不向きな素材

ストライプ柄
ドット柄
紙やグランジなどのテクスチャ

などなど。

Nexus 7 対応時には注意しましょう

Nexus 7 に対応させるときはスケール位置の指定を気をつけなければいけません。
スケール位置を指定するピクセルの近くにスケールさせたくない領域がある場合、スケールさせたくない領域もスケールしてしまうことがあります。

はい。びよーーーーーん。

詳しくは以下のエントリを参考にしてください。ちなみに画像リソースをそれぞれの解像度ごとに作成する場合は起きません。

Android Tips #22 Nexus7 に対応させるときの注意点

コンテンツ領域をうまく使えばドロップシャドウも作れます

ドロップシャドウを 9-patch で作りたい場合は下図のように指定します。

ドロップシャドウの内側の部分のみコンテンツ領域にしてしまえば、コンテンツはその中にしか置かれないので、結果的にドロップシャドウのような表現になります。実際に使う場合、例えば ImageView であれば android:background に作った 9-patch を、android:src にコンテンツ(画像)を設定します。

<ImageView
	android:layout_width="wrap_content"
	android:layout_width="wrap_content"
	android:src="@drawable/icon"
	android:background="@drawable/drop_shadow"
	/>

画像サイズは無駄のないよう最小限に抑えましょう

9-patch の画像は、言ってしまえば「スケールするところ」と「スケールしないところ」だけあればいいわけです。下図を見てください。

この 2 つのリソースは結果的に同じようにスケールします(画像サイズより小さな View の場合変わってきますが)。この場合スケールするところは 1px だけ確保していればいいです。そのため、左側の画像の隣接するピクセルは完全に不要なものになっています。その点右側の画像は無駄を極限まで省いて最小限のリソースになっています。エコです。
画像リソースがアプリサイズの大きさを握っています。塵も積もれば山となる。。ということで出来る限り省けるように注意して作成していきましょう。

9-patch は Photoshop でも作れます (めっちゃ気をつければ)

いろいろ説明してきましたが、 9-patch は結局ただの PNG 画像です。なので Photoshop でも作ることが可能です！デザイナーのかたも手軽に作ることができます。手順をまとめました。

表示部分の画像をつくる
カンバスサイズを縦横 + 2px に変更する
鉛筆ツールでスケール位置指定・コンテンツ領域指定を書く
*.9.png 形式で保存する

これで 9-patch の画像リソースになると思います。特に重要なのは鉛筆ツールを使うときにアンチエイリアスがかからないようにするところです。9-patch の指定領域に透明か黒以外の色が少しでも入っていると 9-patch として認識してくれません。。ここはめっちゃ気をつけたほうが良いと思います。

まとめ

ということで 9-patch の使いかたのまとめでした。
私は初めて 9-patch の存在を知ったときは、なんでこれで伸縮するんじゃい、と思ったのですが、原理を理解するとすぐに使いこなせるようになりました。多分。また 9-patch の特性をよく知っていると「ここは 9-patch が良い！」「ここは 9-patch を使うべきじゃない！」と素早く判断できるようになると思います。
デザイナーのかたも、デベロッパーのかたも、9-patch に触れる機会が多いと思います。本エントリで少しでも知識を深めていただけたら幸いです。