このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

9.png Android NINE Patch 画像作成(draw9patch)

スマートフォン

2011.10.30

この記事は最終更新日から1年以上が経過しています。

Android 端末は様々なディスプレイサイズ、解像度があり、そのままだとボタンなどが拡大されたりして画像が汚くなったりします。

これを避けるためボタンなどが拡大されても汚くならないよう画像素材を引き伸ばし可能な状態にする必要があります。

それを可能するのが「NINE Patch 画像」とよばれるものです。

 

NINE Patchイメージというとはくがついて格好いいでしょう。

このNINE PatchイメージはAndroid  OS 用に画像の引き伸ばしとなります。

では実際のところ、どこにあって、どー使うの?って話ですよね。

手順としては

1.Android SDKのtoolsの中のdraw9patch.batを起動

2.伸縮させたいpngファイルを開く

3.上と左の余白1pxで伸縮可能とする領域を指定

4.下と右の余白1pxで中のコンテンツ領域を指定

5.完成。9.png形式で書き出す。

Android SDKのtoolsの中のdraw9patchというツールが用意されている。

【格納場所】

SDK/tools/draw9patch.bat

mac

SDK/tools/draw9patch

画像フォーマットはpngとなってます。

【使用方法】

まずはAndroid SDKをダウンロード

設定方法等はこちらから

Android SDK インストール方法

格納場所にあるdraw9patchを立ち上げます。

(winを使用している場合、draw9patchがたちあがらず非常に困りました。

その場合はswing-worker.jarを/androidSDKのパス/tools/libに入れる事により

立ち上げる事が出来ました。

ダウンロード
http://netmite.com/android/mydroid/1.6/prebuilt/common/swing-worker/swing-worker-1.1.jar
)

このようなシンプルなウィンドウが立ち上がります。

NINE Patchイメージに変更したい画像をこのウィンドウに放り投げます。

すると、

このような画面になります。

画面左側は元画像に周り1px余白の付いた画像。
画面右側は拡大縮小された画像。

左側の画像に1px黒線を引いていきます。

この時に引く線の詳細は

上辺と左辺が重なる部分が「拡大縮小させる部分」
右辺と下辺が重なる部分が「コンテンツ部分」

となります。

黒線はクリックすると描画され、shiftとクリックで消す事ができます。

 

分かりやすくボタンで9.pngを作ってみます。

テキスト部分は縮小せず、その他の部分を拡大縮小します。

上辺と左辺に線を引き重なる部分が「伸び縮みする部分」です。
この時、show patchesにチェックすると詳細が確認できます。

拡大縮小されたボタン

確認すると、文字部分と端の角丸部分が保たれたまま拡大縮小されているのがわかります。

続いて「コンテンツ範囲」を作る為右辺と下辺に線を引いていきます。

このコンテンツ部分は、テキストなどのコンテンツ領域で「拡大縮小をさける部分」に設定すると良いでしょう。

show contentをチェックするとコンテンツ領域が分かります。

確認すると、コンテンツ領域が幅に合わせて伸びているのが分かります。

はて。

「拡大縮小する部分」がするのでは?なぜコンテンツ領域が?

そう、9.pngというだけあって、9区画目の部分が可変する領域なのですね。

すなわち、

この時点で9区画に分けられているのが分かります。

線が重なる部分以外の左上、上、右上、右、右下、下、左下、左、そして真ん中。

コンテンツ領域以外の8区画がそのままで、残りの1区画がコンテンツに合わせ伸び縮みすることが分かりました。

(間違っていましたら申し訳ありません。。。)

完了しましたら、

File > save 9-patch で.9.pngの拡張子のpng画像が完成します。

【最後にdraw9patchの機能おさらい】
Zoom: 描画領域でのグラフィックの拡大レベルを調整。
Patch scale: プレビュー領域でのイメージスケールを調整。
Show lock: グラフィックで描画されない領域でマウスカーソルが重なった部分を視覚化。
Show patches: 描画領域で伸長可能パッチをプレビューします ( ピンク色部分が伸長可能パッチです ) 。
Show content: プレビューイメージでコンテント領域をハイライト( 紫がコンテントとして許可されている領域) 。
Show bad patches: グラフィックが伸びたときときにアーチファクトができてしまう可能性があるパッチ領域にの周りに赤い境界線を追加。不正なパッチをすべて排除すれば、伸長イメージの見た目が首尾一貫します。

Comment

Related Article

「Band’s」スマートフォン版リリースしました!

2015.06.24

スマートフォンサイト制作における SCSSディレクトリ構成、Class命名について

2014.06.01

ドラクエモンスターズ スーパーライト ジェム 50,000円分 無料GET!! と謳っている【manekin】(マネキン)をやってみた!

2014.05.24

HTML5 WebビューApp ソーシャルゲーム制作時のまとめ

2013.08.17

スマートフォン タッチイベント、距離、速さ等確認ページ

2013.03.07

weinreでiPhone/Androidをリモートデバック

2013.01.27

translateプロパティでAndroid,iPhone端末で画像がちらつく件

2012.09.13

CSS3 アイコン作成 背景指定1つ 光彩グラデーションの表現

2012.05.19

スマートフォン JavaScript タッチ、フリックイベント実装その2 「ボールを投げる」

2012.02.18

スマートフォン JavaScript タッチ、フリックイベント実装

2012.02.18

CATEGORY LIST

LATEST NEWS

Arduino IDEとArduino接続して、サクッと設定。

電子工作

2019.08.15

ついに、M5Stack Gray 購入!! その他諸々、購入したボードの振り返りなど。

電子工作

2019.08.12

正規表現 先読み後読み 論理積

JavaScript

2019.07.28

PythonでGUIアプリ開発「PyQt」を使った感想

Python

2019.07.18

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

JavaScript

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

JavaScript

2019.06.22

Wordpress サイトで、長時間 500 Internal Server Error発生。解決した方法とは。

WordPress

2019.06.18

Ubuntu 18.04 LTSで OpenGL開発

ubuntu

2019.05.20

MacOS Mojave (10.14.4)の Xcode に、過去のMacOSのSDKをインストール

C++

2019.05.19

クローンソフトの「EaseUS Disk Copy」を使って、OSのバックアップを取ってみた。

tool

2019.05.06

Rails5 gemでmysql2が インストールできない

Ruby

2019.05.05

平成最後のお買い物!!「Logicool MX Master 2 Wireless Mouse」と「K780 マルチデバイス BLUETOOTH® キーボード」で快適PC生活。

ubuntu

2019.04.27

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US