右の画像ではTextViewの背景画像に9patchを適応したpngイメージを指定しています。2つのTextViewは改行の都合でアスペクト比が異なっていますが、9patchを使うことで背景画像のゆがみを抑制できています。
9patchまとめ
- リソースを節約しつつ高品位な背景が作れる
- 命名規則は画像のフォーマットに併せて最後尾に.9を付与(.9.pngなど）
- 画像の左と上の端1pxは拡大範囲を表す
- 画像の右と下の端1pxはコンテンツの範囲を表す(オプション)
以下は9patchの適用例(画像)です。
| 9patch適用前(background.png) | 9patch適用後(background.9.png) |
9patchチュートリアル
9patchの作成方法を解説します。作成するためのツールはSDKのインストール先のToolsディレクトリ(たとえばandroid-sdk-windows/tools/draw9patch.bat)にあります。
以下、続きます
起動画面
起動画面に9patchを適応したい画像をドラッグアンドドロップします。
操作方法
draw9patchでは、「拡大可能」な領域を指定します。
9patchでは画像の上下左右の1px分を利用して拡大領域、コンテンツ領域(TextViewでは文字が入る部分、paddingの指定のようなもの)を表現します。コンテンツ領域はオプションで、何かの背景として9patchを利用することを想定しています。
- 左と上の1px：拡大可能領域を指定（指定された領域が拡大される）
- 右と下の1px：コンテンツの表示領域を指定(指定された領域にTextなどのコンテンツが表示される)
読み込み直後
読み込み直後では拡大率が高すぎるため、Zoomスライドバーで調整します。
Show lock
Show lockチェックボックス:9patch作成用領域と画像領域を可視化します。イメージの上にマウスカーソルをオーバーロールすると画像部分に赤とグレーで斜線が入ります。draw9patchツールでは作業対象外の領域です。
Show patches
Show patchesチェックボックス:9patchの拡大範囲(ピンク)を表示します。
patchの範囲が未選択の場合、すべての領域がピンクで拡大対象と認識されてしまいます。
左側と上側の端に拡大範囲を指定（一番端の部分をマウスでドラッグしながら線を書く）してください。
左と上の線が交差する中央部分のみが拡大範囲(ピンクの領域)として認識されます。
Show Content
Show Contentチェックボックス:コンテンツ表示領域(青)を表示します(画面右側)。
画像の右および下の外側1pxをつかって指定します。コンテンツ領域はオプションですが、Viewのpaddingに相当します。必要に応じて9patch画像からコンテンツがはみ出ないようにしてください。
ファイル名を.9.pngにする
9patchの命名規則はxxx.9.yyyです。（ファイル名：background.9.pngなど）
リソースとして取り込む
プロジェクトにリソースとして取り込むには特別気にする項目はありません。
普通の画像と同様にdrawableに登録するだけで、とても簡単です。
ソースコード
レイアウトファイルに背景として指定します。
layout/main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="@string/hello"
android:textColor="#FFFFFF"
android:background="@drawable/background"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="@string/hello2"
android:textColor="#FFFFFF"
android:background="@drawable/background"/>
</LinearLayout>
| 9patch適用前(background.png) | 9patch適用後(background.9.png) |
おつかれさまでした。