Androidアプリ開発　－9patchで吹き出し画像を作る－

　やりたいこと

TextViewで文字を表示させ、背景画像に吹き出し画像を設定した場合。
文字数が大きくなると文字が切れてしまいます。

そこで今回やりたいのは、
「文字数に応じて吹き出し画像を広げて表示したい」。

9patchを使えば、自動的に画像が広がってくれるということを知ったので試してみました。

　9patchで画像を作成

まず9patchで画像を作成するためにインストール先にあるdraw9patch.batを起動します。
Androidandroid-sdktoolsdraw9patch.bat

すると以下が表示されます。

利用する吹き出し画像を読み込ませます。
ここからが結構面倒なので、細かく紹介。

　拡大範囲の選択

画像を拡大させる範囲をマウスを使って選択します。
手順は以下のとおりです。

(1)Show pathesチェックボックスをチェック。
(2)Zoomで画像を扱いやすサイズまで変更。
(3)マウスで画像の端(上下左右)を左クリックしドラッグ。

• ドラッグすると選択範囲が黒くなります。

※選択できるのは端だけなので、ちょっと操作しづらい点に注意です。

(4)上下左右全てに対しておこなう。
(5)Show contentチェックボックスをチェックし拡大範囲が表示されているのを確認。

上のように表示されます。

　画像の保存

メニューにある「File」の「Save 9-patch」で画像を保存します。
保存すると、「ファイル名.9.png」になります。

　プログラム

吹き出しを表示するTextViewの背景画像として指定します。

レイアウト例

//略
 <TextView
   android:id="@+id/voice"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="@drawable/background"
   android:text="Medium Text" />
//略

　表示例

実際に表示すると以下のようになります。

• 文字が少ない場合

• 文字が多い場合

本来の画像より小さくなるわけではありません。
そのため、元となる吹き出し画像の大きさは適切に用意する必要があります。

　参考

• 9patchを覚えよう！ – 明日の鍵