Androidアプリ上でLINEみたいな吹き出しでTextを囲んで表示してみた。
お疲れ様です。高橋です。
AndroidでLINEみたいにテキストの周りを吹き出しで囲むやり方が、かなり簡単でした。
- 吹き出し画像を準備する。
- ~/Android-SDK/tools/draw9patch.bat 起動
- 起動すると出てくる下記画面に1. で準備した吹き出し画像をドラッグ&ドロップ
画像をドラッグ&ドロップすると、↓のような感じになります。
画面左部分が「文字を入れる範囲」や「画像自体を引き伸ばす範囲」を指定するインターフェイスで、画面右部分が、左部分で指定した範囲のプレビュー画面です。
いい感じに文字部分や伸び部分を指定すると↓のような感じになります。
そして、File/Save 9-Patch… を選択し、「test.9.png」として保存します。保存したファイルは、Androidプロジェクトディレクトリのres/drawableの中にコピります。
最後に、ActivityのLayout用xmlを開き、下記のように1つTextViewを作ります。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#000000" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="jp.sample.ninepatch.MainActivity" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/test" android:text="@string/hello_world" /> </RelativeLayout>
xmlを保存してグラフィカルレイアウトで確認すると、縦画面の時はこうなったり・・・

横画面にするとこうなります。
web黎明期の頃は、吹き出し的な物で文字を囲むのは、かなりtableタグを駆使した記憶があるんですが、これは超楽です。
しかも、吹き出し画像の無料素材集まで世の中には存在してるのです。
便利な世の中になったものです。
参考サイト:
以上、よろしくお願い致します。
関連記事
-
-
DAWを使って、ゲームの裏側で鳴らす音楽を作ってみた。
お疲れ様です。高橋です。 既に時期を逸してしまった、「選挙運動シミュレータ 衆院 …
-
-
「遅刻の言い訳」実機デバッグ結果
お疲れ様です。高橋です。 本日、Androidを持っている同僚にお願いして、実機 …
-
-
Unityでノベルゲームを作る
お疲れ様です。高橋です。 突然ですが、ノベルゲームを作ってみたくなったので、試し …
-
-
選挙運動シミュレータ「衆院選2014」が迷走してきた。
お疲れ様です。高橋です。 選挙運動シミュレーションゲーム「衆院選2014」の見た …
-
-
Androidアプリ作りと設計
お疲れ様です。高橋です。 ウォーターフォール型人間である私は、作りたいものをイメ …
-
-
Twitter上に広がる寝坊市場について
お疲れ様です。高橋です。 遅刻の言い訳アプリ 初週DL数 2/26頃にリリースし …
-
-
8bit音アプリを実機デバッグし、モスキート音モードを追加してみた。
お疲れ様です。高橋です。 今日会社でAndroidを持っている人にインストールし …
-
-
遅刻の言い訳アプリのDL数が急増した原因
お疲れ様です。高橋です。 ふとgooglePlayのダウンロード状況を見たら、言 …
-
-
広告IDが取得出来なかった理由がわかってきた。かな?
お疲れ様です。高橋です。 しばらく前からめぼしい更新を停止していた「カナかな?」 …
-
-
アプリDL状況と言い訳システムの効果について
お疲れ様です。高橋です。 リリースしたアプリのDL状況 3/20(Fri)時点で …






Comment
[…] 参考にさせていただいたサイト […]