【Lightning Launcher】"9-Patch"画像で項目ボックスのデザインをカスタマイズ

Lightning Launcherでは、ショートカットやフォルダ、パネルなどのボックスの背景画像として「9-Patch」という形式の画像を指定することで、枠や背景のデザインを柔軟にカスタマイズできる。
9-Patchは、外枠や背景が描かれた画像に伸び縮みする部分を示す情報を付加して、様々な大きさのボックスに適用できるようにしたPNG画像ファイルだ。模様を繰り返すなど複雑なことは出来ないが、枠線を立体的にしたり内側をグラデーションで塗り潰すなど、様々なデザインを実現できる。

9-Patchの仕組みはAndroid側に搭載されている機能なので多くのアプリで使用されているが、開発環境を用意していない一般のユーザーが自分で画像を作成するには、開発環境のインストールから行わなければならないので面倒くさい。
そこで、より簡単に9ーPatch画像を作成するためのツールをあんスマが作成したぞ。ブラウザ上で画像ファイルを選択して、引き延ばし箇所や外枠の幅を入力するだけで、情報が埋め込まれた画像ファイルを取得できる。PNG画像を作成可能な画像エディタさえあれば、Android端末だけでも利用可能だ。

Lightning Launcher - Google Play の Android アプリ

Lightning Launcher - 日本語 - Google Play の Android アプリ


001

Lightning Launcherの開発元の説明ページ(英語)では、Androidで使用されている9-Patch画像(オープンソースなので再頒布可能)をまとめたZIPファイルがダウンロード可能となっているので、手軽に9ーPatchによるカスタマイズを試してみたい人はダウンロードしてみよう。
HDやフルHDの解像度の端末なら一番右の「drawable-xhdpi.zip」が適しているが、細い枠線が好みなら中~低解像度向けの「drawable-hdpi.zip」や「drawable-mdpi.zip」を使ってもいいだろう。

LL - Help - Background image


003

項目の詳細カスタマイズ画面の「ボックス」タブの下の方にある「NINE PATCHを利用する」の3つの項目で、用意した9ーPatch画像を選択しよう。


002

drawable-xhdpi.zipには、このように、沢山の素材画像が含まれているぞ。


004

「dialog_full_holo_dark.9.png」を選択したところ、このような影の付いたフレームになったぞ。



あんスマ特製ツールで自作画像を9-Patch化


005

下記のページで見つけた額縁画像を単に縮小しただけのPNGファイルを指定したところ、このように額縁の太さがまちまちで不格好になってしまう。

Free Hi-Res Stock Picture Frame Images | @designshard


006

あんスマが用意した「9-patch PNG maker」にアクセスし、元となるファイルを選択。「X-Divs」と「Y-Divs」に、引き延ばしたい範囲の横座標と縦座標をカンマ区切りで指定して「Make」を押そう。
厳密には、「100,200」と指定した場合、左端・上端の座標を0として、100~199までのピクセルが引き延ばし対象となる。
「Margin」の4つの数字は、外枠とみなす上下左右のピクセル数を指定するのだが、Lightning Launcherでは無視されるようなので、0のままでも構わない。

なお、Android標準ブラウザでは画像が正常に保存されないようなので、「Chrome」などのブラウザを利用しよう。


007

「Make」を押すと、情報を埋め込んだPNG画像が元のファイル名の末尾を「.9.png」に変えたファイル名でダウンロードされる。
Chromeブラウザ-Google - Google Play の Android アプリ


008

9-Patch化を実行したPNGファイルを指定したところ、どのようなサイズでも枠の太さが均一になって見栄えが良くなったぞ。

関連記事

2014年01月28日04時53分 公開 | カテゴリー: カスタマイズ | キーワード: | Short URL
このエントリーをはてなブックマークに追加

最新記事