curious4dev

中国旅行、Arduinoなどを使った電子工作、その他色々。

*

Androidアプリ上でLINEみたいな吹き出しでTextを囲んで表示してみた。

 

お疲れ様です。高橋です。

AndroidでLINEみたいにテキストの周りを吹き出しで囲むやり方が、かなり簡単でした。

  1. 吹き出し画像を準備する。
  2. ~/Android-SDK/tools/draw9patch.bat 起動
  3. 起動すると出てくる下記画面に1. で準備した吹き出し画像をドラッグ&ドロップ

and02

画像をドラッグ&ドロップすると、↓のような感じになります。

and03

画面左部分が「文字を入れる範囲」や「画像自体を引き伸ばす範囲」を指定するインターフェイスで、画面右部分が、左部分で指定した範囲のプレビュー画面です。

いい感じに文字部分や伸び部分を指定すると↓のような感じになります。

and04

そして、File/Save 9-Patch… を選択し、「test.9.png」として保存します。保存したファイルは、Androidプロジェクトディレクトリのres/drawableの中にコピります。

and05

 

最後に、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を保存してグラフィカルレイアウトで確認すると、縦画面の時はこうなったり・・・
and06

横画面にするとこうなります。

and07

web黎明期の頃は、吹き出し的な物で文字を囲むのは、かなりtableタグを駆使した記憶があるんですが、これは超楽です。

しかも、吹き出し画像の無料素材集まで世の中には存在してるのです。

吹き出し素材専門サイト「フキダシデザイン」

便利な世の中になったものです。

参考サイト:

 

 

 

以上、よろしくお願い致します。

 - アプリ開発

Comment

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

  関連記事

街頭インタビュー生成アプリ

お疲れ様です。高橋です。 街頭インタビューっぽいアプリ 街頭インタビューっぽい画 …

「寝坊した」人に自動的に遅刻の言い訳を提案する仕組みを稼働させてみた。

お疲れ様です。高橋です。 寝坊した人にアプリをオススメする仕組みを作りましたが、 …

広告IDが取得出来なかった理由がわかってきた。かな?

お疲れ様です。高橋です。 しばらく前からめぼしい更新を停止していた「カナかな?」 …

街頭インタビュー 実装 #2

お疲れ様です。高橋です。 本日の実装状況 街頭インタビューを構成する要素を、徹底 …

Win7(64bit)+Unity4.5.5f1で作った物をAndroidエミュで動かしてみた

お疲れ様です。高橋です。 先ほどはcocosを使ったサンプルをエミュで動かす所ま …

URL付き言い訳提案システム 稼働2日目

お疲れ様です。高橋です。 本日は946寝坊、270提案、19クリックでした。 & …

遅刻の言い訳提案システム 稼働二日目

お疲れ様です。高橋です。 遅刻の言い訳提案システムについて、先日課題として上げた …

合理的な遅刻の言い訳生成アプリ。

お疲れ様です。高橋です。 寝坊と遅刻連絡について 平日の朝。iPhoneのアラー …

FreeなWindows向けDAWを使って作った音楽をwavからoggにしてAndroidアプリで鳴らしてみた。

お疲れ様です。高橋です。 先日POSTした「DAWを使って、ゲームの裏側で鳴らす …

遅刻の言い訳提案システム 稼働三日目 ~大失敗~

お疲れ様です。高橋です。 三日目を迎えた遅刻の言い訳提案システムですが、重大なバ …