[iPhone進階] 基於XMPP的IOS聊天用戶端程式(IOS端三)

前兩篇介紹了如何通過XMPP來發送訊息和接收訊息，這一篇我們主要介紹如何來美化我們的聊天程式，看一下最終效果呢，當然來源程式也會在最後放出

好了，我們來看一下我們寫的程式

這裡我們自訂了TableViewCell

一行是顯示發布日期，一行是顯示發送的訊息，還有一個是背景

-(id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{        self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];    if (self) {        //日期標籤        senderAndTimeLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 5, 300, 20)];        //置中顯示        senderAndTimeLabel.textAlignment = UITextAlignmentCenter;        senderAndTimeLabel.font = [UIFont systemFontOfSize:11.0];        //文字顏色        senderAndTimeLabel.textColor = [UIColor lightGrayColor];        [self.contentView addSubview:senderAndTimeLabel];                //背景圖        bgImageView = [[UIImageView alloc] initWithFrame:CGRectZero];        [self.contentView addSubview:bgImageView];                //聊天資訊        messageContentView = [[UITextView alloc] init];        messageContentView.backgroundColor = [UIColor clearColor];        //不可編輯        messageContentView.editable = NO;        messageContentView.scrollEnabled = NO;        [messageContentView sizeToFit];        [self.contentView addSubview:messageContentView];    }        return self;    }

定義好，在UITableViewCell中將Cell改成我們自己定義的Cell

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{        static NSString *identifier = @"msgCell";        KKMessageCell *cell =(KKMessageCell *)[tableView dequeueReusableCellWithIdentifier:identifier];        if (cell == nil) {        cell = [[KKMessageCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:identifier];    }        NSMutableDictionary *dict = [messages objectAtIndex:indexPath.row];        //寄件者    NSString *sender = [dict objectForKey:@"sender"];    //訊息    NSString *message = [dict objectForKey:@"msg"];    //時間    NSString *time = [dict objectForKey:@"time"];        CGSize textSize = {260.0 ,10000.0};    CGSize size = [message sizeWithFont:[UIFont boldSystemFontOfSize:13] constrainedToSize:textSize lineBreakMode:UILineBreakModeWordWrap];        size.width +=(padding/2);        cell.messageContentView.text = message;    cell.accessoryType = UITableViewCellAccessoryNone;    cell.userInteractionEnabled = NO;        UIImage *bgImage = nil;        //發送訊息    if ([sender isEqualToString:@"you"]) {        //背景圖        bgImage = [[UIImage imageNamed:@"BlueBubble2.png"] stretchableImageWithLeftCapWidth:20 topCapHeight:15];        [cell.messageContentView setFrame:CGRectMake(padding, padding*2, size.width, size.height)];                [cell.bgImageView setFrame:CGRectMake(cell.messageContentView.frame.origin.x - padding/2, cell.messageContentView.frame.origin.y - padding/2, size.width + padding, size.height + padding)];    }else {                bgImage = [[UIImage imageNamed:@"GreenBubble2.png"] stretchableImageWithLeftCapWidth:14 topCapHeight:15];                [cell.messageContentView setFrame:CGRectMake(320-size.width - padding, padding*2, size.width, size.height)];        [cell.bgImageView setFrame:CGRectMake(cell.messageContentView.frame.origin.x - padding/2, cell.messageContentView.frame.origin.y - padding/2, size.width + padding, size.height + padding)];    }        cell.bgImageView.image = bgImage;    cell.senderAndTimeLabel.text = [NSString stringWithFormat:@"%@ %@", sender, time];    return cell;    }

在這個Cell裡設定了發送的訊息的背景圖和接收訊息的背景圖

這裡在字典裡有一個"time"

這是我們接收和發送訊息的時間

+(NSString *)getCurrentTime{        NSDate *nowUTC = [NSDate date];        NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];    [dateFormatter setTimeZone:[NSTimeZone localTimeZone]];    [dateFormatter setDateStyle:NSDateFormatterMediumStyle];    [dateFormatter setTimeStyle:NSDateFormatterMediumStyle];        return [dateFormatter stringFromDate:nowUTC];    }

在AppDelegate.m中

將我們收到訊息的內容也做一下調整

- (void)xmppStream:(XMPPStream *)sender didReceiveMessage:(XMPPMessage *)message{    //   ......        NSMutableDictionary *dict = [NSMutableDictionary dictionary];    [dict setObject:msg forKey:@"msg"];    [dict setObject:from forKey:@"sender"];    //訊息接收到的時間    [dict setObject:[Statics getCurrentTime] forKey:@"time"];       ......    }

最後我們再設定一下每一行顯示的高度

//每一行的高度-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{        NSMutableDictionary *dict  = [messages objectAtIndex:indexPath.row];    NSString *msg = [dict objectForKey:@"msg"];        CGSize textSize = {260.0 , 10000.0};    CGSize size = [msg sizeWithFont:[UIFont boldSystemFontOfSize:13] constrainedToSize:textSize lineBreakMode:UILineBreakModeWordWrap];        size.height += padding*2;        CGFloat height = size.height < 65 ? 65 : size.height;        return height;    }

，對了，在發送訊息的時候，別忘了也加上

- (IBAction)sendButton:(id)sender {        //本地輸入框中的資訊    ......        if (message.length > 0) {                .....                NSMutableDictionary *dictionary = [NSMutableDictionary dictionary];                [dictionary setObject:message forKey:@"msg"];        [dictionary setObject:@"you" forKey:@"sender"];        [dictionary setObject:[Statics getCurrentTime] forKey:@"time"];        [messages addObject:dictionary];                //重新重新整理tableView        [self.tView reloadData];            }        }

好了，這裡關於XMPP發送訊息的教程就結束了，以後我們會詳細介紹其他關於XMPP的內容

源碼下載