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

 表示例

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

  • 文字が少ない場合

  • 文字が多い場合


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

 参考

広告

関連記事

input

CakePHP2系でTwigを利用 -書き方のメモ-

CakePHP2系でTwigをどのように記述するかのメモ。 数パターンしか載せてないですが、だいた

記事を読む

no image

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

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

記事を読む

setup

Google Appsで独自ドメインメールの利用

独自ドメインでメアドを持ちたかったのでGoogle Appsを利用してみました。 その各種設定の覚

記事を読む

no image

iPhoneアプリ開発 −iOS6からの「写真」へのアクセス問題−

写真を扱うアプリを開発している際に問題になったこと。 ※結構前の話を今更まとめてみる。 * 写真へ

記事を読む

no image

jQuery Mobile導入手順 -はじめの一歩-

jQuery Mobileの1.0がリリースされ、利用したい方が増えていると思います。 最初に何を

記事を読む

スクリーンショット 2013-04-27 11.46.12

githubを使っての開発(2) -masterブランチにマージ-

前エントリーでgithub-flowをもとにした流れを書いたのですが、その中のマージについてもう少し

記事を読む

no image

Twitterでサービスにログイン -PHP(CakePHP1.3)で実践編-

以前、ソーシャルログインについて書きました。 ただ、Twitter連携にまだ触れてない人にはちょ

記事を読む

Jenkins + iPhoneアプリ(2) -ローカルリポジトリにあるデータからipaファイル生成-

* これまで - * 最終目標 -(開発者)git(リモートリポジトリ)にソースをコミット

記事を読む

no image

TestLink1.91のバグの修正方法

どうやらTestLink1.91にはバグがあるようなので、修正方法を以下に記述。 Test

記事を読む

no image

iPhoneアプリをヒットさせるために大事な5つのこと

巷にはたくさんのiPhoneアプリがたくさんあります。 そして、毎日新しいアプリがリリースされていま

記事を読む

広告

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 ↑