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

公開日: : 最終更新日:2014/04/20 Android, IT


 やりたいこと

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" />
//略

 表示例

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

  • 文字が少ない場合

  • 文字が多い場合


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

 参考

広告

関連記事

no image

Selenium2.0でUIテスト(2) -Rubyでやってみよう-

前回は、Selenium + PHPを試しました。 今後はRubyでやってみようということでSele

記事を読む

no image

iPhoneアプリ開発 芳名帳アプリ作成(3) -名前を書けるようにする-

* 今までの流れ - -[http://pplace.jp/2013/06/1531/:title=

記事を読む

no image

iPhoneアプリ開発 -Bundle identifierを変えてはまった-

* 現象 Bundle identifierを変えた際にXcodeで実機に転送しようとすると以下のエ

記事を読む

no image

iPhoneアプリ開発 −複数前の画面に戻る−

* やりたいこと ある画面から別の画面に遷移したい。 -1つ前の画面に戻りたい。 -2つ前の画面に戻

記事を読む

no image

第二回Androidテスト祭り参加記録 -祭りに参加してきたよ-

久しぶりに勉強会に参加してきました。 参加してきたのは「第二回Androidテスト祭り(4/28)

記事を読む

datebox-date

jQueryMobileでカレンダー表示 -DateBoxプラグインの利用-

スマートフォン対応をしているとカレンダーの表示の仕方をスマートフォンらしくしたいことがあると思います

記事を読む

no image

PHP_CodeSniffer+ Eclipse + PHP Code Formatter Pluginでコーディング規約を守ったコーディング

1人でプログラミングをしているにしても、多人数でプログラミングをしているにしても、コーディング規約を

記事を読む

mixisample

iPhoneアプリ開発 -mixiSDKを使ってmixi連携をしてみる(1)-

* やりたいこと iPhoneアプリでmixiと連携し、mixiボイスなどに文字を投稿する。 ※

記事を読む

no image

ViewController単位で画面の向きを変えてみる

ViewController毎に画面の向きを変えたい!ということがあったのでやってみました。 *

記事を読む

no image

Jenkins+Capistranoを設定した時にしたこと -「ポート変更」「公開鍵認証」対応-

* 前段階 上記にあるように、Jenkins+Capistranoの設定をしています。 ただし、設

記事を読む

広告

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

広告

no image
[感想] Effective Objective-C 2.0 ☆☆☆☆★(4.5)

* 構成 - 第1章 Objective-Cに慣れる -

no image
[感想] iOSアプリテスト自動化入門 ☆☆☆(3.0)

* 構成 - Chapter 1 テスト自動化への取り組み

DeployGateを試してみた(iOS編) -DeployGateがiOSに対応-

今までのDeployGate - -[http://pplace.

iPhone/iPadアプリを開発するためにやったこと

今までに、iPhoneを3本ほどリリース((リリースしたアプリは全て1

no image
ターミナルでgitのコマンドを補完したりブランチ名を表示する – macでgitを便利に使うために –

* やりたいこと macのターミナルでgitをいじっていると -今の

→もっと見る

PAGE TOP ↑