2011-09-03 13:55:27

SMSのチャット風viewの作成

テーマ:iphone
お久しぶりです。ジャマです。
超久々のブログですががんばります!

ブログ書いてない間もobjective-Cについては
日々精進しているので新知識を披露していきます。

今回の題材はiphoneのSMSのチャット画面についてです。
iphoneでは簡単に実装しているので自作iphoneアプリで
実装してみました。
結構難しかったんで忘れないように作り方の流れ書いときます。

大まかな流れです。

①吹き出し用のview、MessageViewを作成
・MessageVIewには吹き出しに表示するmessageと日付のdateを持たせます。
・messageの長さから吹き出しの大きさと画像を変更します。

吹き出しの画像は以下5種類を使いました。
(1)huki1.png - messageが1行の時はこの画像
$独学で作成!!金儲けiphoneアプリ
(2)huki2.png - messageが2行の時
$独学で作成!!金儲けiphoneアプリ
(3)huki3_1.png - messageが3行以上の時、一番上
$独学で作成!!金儲けiphoneアプリ
(4)huki3_2.png - messageが3行以上の時、真ん中
$独学で作成!!金儲けiphoneアプリ
(5)huki3_3.png - messageが3行以上の時、一番下
$独学で作成!!金儲けiphoneアプリ

3行以上の時は行数に応じて真ん中の画像を増やします。
これで吹き出しは完成です。

②吹き出しを配列にいれる。
①で作った吹き出しは生成するごとにmutablearrayに
ぶちこんでおきます。

③日付で吹き出しを並び替えます。
配列に入っている吹き出し画像は日付を持つことができます。
生成時にあらかじめ日付をいれておくとこれをもとに並び替えできます。
NSDateのcompare:とかバブルソート等を駆使すると日付ごとに
配列が並びかえれます。

④配列に入った吹き出しを順にスクロールビューに貼付けて行く。
吹き出しのsizeを加算して次の吹き出しのy座標の位置にします。
そうすることで吹き出しが順に表示されます。

だいたいこんな感じです。
出来上がりの画像はっと来ます。
なかなか困難な作業でした。

ソースも出さずかなりはしょってるので
わからないことあったら気軽に聞いて下さい。

$独学で作成!!金儲けiphoneアプリ

コメント

[コメントをする]

1 ■吹き出しを出すコード?

初めまして、

吹き出しの作り方や、コードの書き方をググっていてこちらにたどり着きました。

時間が来たら吹き出しが出て、あらかじめ書いていたmemoを
吹き出しで表示したいのですが、
吹き出しの出しかたと言うか、コードの書き方を
是非教えて頂けないでしょうか?

参考になるページでも良いので宜しくお願い致します。

私は未だ初心者で実際のコードと動きを見ながら、勉強しています。
何でも難しく感じているレベルですが、宜しくお願いします。

2 ■Re:吹き出しを出すコード?

>appleさん
こんにちは。ジャマです。
smsの吹き出しを出す方法を探したのですが、
見つからなかったですね。

なので自分の考えでコメントさせてもらいます。


①吹き出し部分はuiimageview
②memoはuiimageviewにuilabelを貼り付けて表示すればよいかと思います。
xcode上で動作確認はしてないのですが、
すごいおおまかにソース書いてみます。
メソッドとか間違ってたらすみません。

//吹き出し画像の作成。吹き出し画像は自分で用意して下さい。
UIImage * image =[UIImage imagename:@"吹き出し画像の名前"];
UIImageView * imageview = [[UIImageView alloc] initWithimage:image];
imageview.frame=CGRectMake(x座標,y座標,横幅,縦幅);

//メモをUIImageViewに貼り付ける。
UILabel memolabel=[UILabel alloc] init];
memolabel.frame=CGRectMake(x座標,y座標,横幅,縦幅);
memolabel.text = 保存してあるmemoの値;
//imageviewにmemolabelを貼り付け
[imageview addSubview:memolabel];
//imageviewをself.viewに貼り付け
[self.view addSubview:imageview];

こんな感じでいけると思います。
わからないことあれば気軽に聞いて下さい。

3 ■テキストエリア

初めまして。

記事の題名とは少し違いますが質問させてください><

チャットメッセージの入力エリアですが、文字数によって段数をかえるのでTextVIewを使用されてると思うんですが、TextViewをそのまま使用すると予測変換がTextView内の下に表示されてしまい選択することができません。
どのように対応されているか教えて頂けないでしょうか?

4 ■Re:テキストエリア

>えこなさん
こんにちは、ジャマです。
すみません、私もその現象をどうやって回避するかわからないんですよね。

やるならtextviewを予測変換分大きくとるしか方法が思い浮かばないです。その方法だと1行のtextviewの表示に予測変換をいれるため2行分のtextviewを作るはめになりそうですが。

iOS5だと予測変換の挙動が変わってるのでこの現象は考えなくていいとは思います。

たいした回答ができず申し訳ないです。

5 ■Re:Re:テキストエリア

>jamaさん
素早い返答ありがとうございます。

そうですよね。
自分もキーボードが出た瞬間に2行分のスペースをとる方法しか思い浮かばなくて><
iPhone標準SMSはどんなマジックを使用してるのかさっぱりわかりません!

返信ありがとうございました。

コメント投稿

一緒にプレゼントも贈ろう!

Amebaおすすめキーワード

    アメーバに会員登録して、ブログをつくろう! powered by Ameba (アメーバ)|ブログを中心とした登録無料サイト