[iOS基础控件 - 6.9.1] 聊天界面Demo 代码

//
//  Message.h
//  QQChatDemo
//
//  Created by hellovoidworld on 14/12/8.
//  Copyright (c) 2014年 hellovoidworld. All rights reserved.
//
// message信息模型，存储聊天记录

#import <Foundation/Foundation.h>

typedef enum {
MessageTypeMe = 0, // 我发出的信息
MessageTypeOhter = 1 // 对方发出的信息
} MessageType;

@interface Message : NSObject

/** 信息 */
@property(nonatomic, copy) NSString *text;

/** 发送时间 */
@property(nonatomic, copy) NSString *time;

/** 发送方 */
@property(nonatomic, assign) MessageType type;

/** 是否隐藏发送时间 */
@property(nonatomic, assign) BOOL hideTime;

- (instancetype) initWithDictionary:(NSDictionary *) dictionary;
+ (instancetype) messageWithDictionary:(NSDictionary *) dictionary;
+ (instancetype) message;

@end

//
//  Message.m
//  QQChatDemo
//
//  Created by hellovoidworld on 14/12/8.
//  Copyright (c) 2014年 hellovoidworld. All rights reserved.
//

#import "Message.h"

@implementation Message

- (instancetype) initWithDictionary:(NSDictionary *) dictionary {
if (self = [super init]) {
[self setValuesForKeysWithDictionary:dictionary];
}

return self;
}

+ (instancetype) messageWithDictionary:(NSDictionary *) dictionary {
return [[self alloc] initWithDictionary:dictionary];
}

+ (instancetype) message {
return [self messageWithDictionary:nil];
}

@end

//
//  MessageFrame.h
//  QQChatDemo
//
//  Created by hellovoidworld on 14/12/8.
//  Copyright (c) 2014年 hellovoidworld. All rights reserved.
//
// 存储每个cell内子控件的位置尺寸的frame

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import "Message.h"

#define MESSAGE_TIME_FONT [UIFont systemFontOfSize:13]
#define MESSAGE_TEXT_FONT [UIFont systemFontOfSize:15]
#define TEXT_INSET 20

@interface MessageFrame : NSObject

/** 发送时间  */
@property(nonatomic, assign, readonly) CGRect timeFrame;

/** 头像 */
@property(nonatomic, assign, readonly) CGRect iconFrame;

/** 信息 */
@property(nonatomic, assign, readonly) CGRect textFrame;

/** 信息model */
@property(nonatomic, strong) Message *message;

/** cell的高度 */
@property(nonatomic, assign) CGFloat cellHeight;

@end

//
//  MessageFrame.m
//  QQChatDemo
//
//  Created by hellovoidworld on 14/12/8.
//  Copyright (c) 2014年 hellovoidworld. All rights reserved.
//

#import "MessageFrame.h"
#import "NSString+Extension.h"

@implementation MessageFrame

/** 设置message，计算位置尺寸 */
- (void)setMessage:(Message *)message {
_message = message;

// 间隙
CGFloat padding = 10;

// 1.发送时间
if (NO == message.hideTime) {
CGFloat timeWidth = [UIScreen mainScreen].bounds.size.width;
CGFloat timeHeight = 40;
CGFloat timeX = 0;
CGFloat timeY = 0;
_timeFrame = CGRectMake(timeX, timeY, timeWidth, timeHeight);
}

// 2.头像
CGFloat iconWidth = 40;
CGFloat iconHeight = 40;

// 2.1 根据信息的发送方调整头像位置
CGFloat iconX;
if (MessageTypeMe == message.type) {
// 我方，放在右边
iconX = [UIScreen mainScreen].bounds.size.width - padding - iconWidth;
} else {
// 对方，放在左边
iconX = padding;
}

CGFloat iconY = CGRectGetMaxY(_timeFrame) + padding;
_iconFrame = CGRectMake(iconX, iconY, iconWidth, iconHeight);

// 3.信息，尺寸可变
CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
// 3.1 设置文本最大尺寸
CGSize textMaxSize = CGSizeMake(screenWidth - iconWidth - padding * 10, MAXFLOAT);
// 3.2 计算文本真实尺寸
CGSize textRealSize = [message.text sizeWithFont:MESSAGE_TEXT_FONT maxSize:textMaxSize];

// 3.3 按钮尺寸
CGSize btnSize = CGSizeMake(textRealSize.width + TEXT_INSET*2, textRealSize.height + TEXT_INSET*2);

// 3.4 调整信息的位置
CGFloat textX;
if (MessageTypeMe == message.type) {
// 我方，放在靠右
textX = CGRectGetMinX(_iconFrame) - btnSize.width - padding;
} else {
// 对方，放在靠左
textX = CGRectGetMaxX(_iconFrame) + padding;
}

CGFloat textY = iconY;
_textFrame = CGRectMake(textX, textY, btnSize.width, btnSize.height);

// 4.cell的高度
CGFloat iconMaxY = CGRectGetMaxY(_iconFrame);
CGFloat textMaxY = CGRectGetMaxY(_textFrame);
_cellHeight = MAX(iconMaxY, textMaxY) + padding;
}

@end

//
//  MessageCell.h
//  QQChatDemo
//
//  Created by hellovoidworld on 14/12/8.
//  Copyright (c) 2014年 hellovoidworld. All rights reserved.
//

#import <UIKit/UIKit.h>

#define BACKGROUD_COLOR [UIColor colorWithRed:235/255.0 green:235/255.0 blue:235/255.0 alpha:1.0]

@class MessageFrame, Message;

@interface MessageCell : UITableViewCell

/** 持有存储了聊天记录和聊天框位置尺寸的frame */
@property(nonatomic, strong) MessageFrame *messageFrame;

/** 传入父控件tableView引用的构造方法 */
+ (instancetype) cellWithTableView:(UITableView *) tableView;

@end

//
//  MessageCell.m
//  QQChatDemo
//
//  Created by hellovoidworld on 14/12/8.
//  Copyright (c) 2014年 hellovoidworld. All rights reserved.
//

#import "MessageCell.h"
#import "MessageFrame.h"
#import "UIImage+Extension.h"

@interface MessageCell()

// 定义cell内的子控件，用于保存控件，然后进行数据和位置尺寸的计算
/** 发送时间 */
@property(nonatomic, weak) UILabel *timeLabel;

/** 头像 */
@property(nonatomic, weak) UIImageView *iconView;

/** 信息 */
@property(nonatomic, weak) UIButton *textView;

@end

@implementation MessageCell

- (void)awakeFromNib {
// Initialization code
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];

// Configure the view for the selected state
}

#pragma mark - 构造方法
// 自定义构造方法
+ (instancetype) cellWithTableView:(UITableView *) tableView {
static NSString *ID = @"message";

// 使用缓存池
MessageCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

// 创建一个新的cell
if (nil == cell) {
cell = [[MessageCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
}

return cell;
}

// 重写构造方法，创建cell中的各个子控件
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];

// 设置cell的背景色
self.backgroundColor = BACKGROUD_COLOR;

// 1.发送时间
UILabel *timeLabel = [[UILabel alloc] init];
[timeLabel setTextAlignment:NSTextAlignmentCenter];
[timeLabel setFont:MESSAGE_TIME_FONT];
[timeLabel setTextColor:[UIColor grayColor]];
[self.contentView addSubview:timeLabel];
self.timeLabel = timeLabel;

// 2.头像
UIImageView *iconView = [[UIImageView alloc] init];
[self.contentView addSubview:iconView];
self.iconView = iconView;

// 3.信息
UIButton *textView = [[UIButton alloc] init];
[textView setTitle:@"text" forState:UIControlStateNormal];
[textView.titleLabel setFont:MESSAGE_TEXT_FONT];

// 3.1 如果是浅色背景，记得设置字体颜色，因为按钮的字体颜色默认是白色
[textView setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[textView.titleLabel setNumberOfLines:0]; // 设置自动换行

// 3.2 调整文字的内边距
textView.contentEdgeInsets = UIEdgeInsetsMake(TEXT_INSET, TEXT_INSET, TEXT_INSET, TEXT_INSET);

[self.contentView addSubview:textView];
self.textView = textView;

return self;
}

#pragma mark - 加载数据
// 加载frame，初始化cell中子控件的数据、位置尺寸
- (void)setMessageFrame:(MessageFrame *) messageFrame {
_messageFrame = messageFrame;

// 1.发送时间
self.timeLabel.text = messageFrame.message.time;
self.timeLabel.frame = messageFrame.timeFrame;

// 2.头像
NSString *icon = (messageFrame.message.type == MessageTypeMe)? @"me":@"other";
self.iconView.image = [UIImage imageNamed:icon];
self.iconView.frame = messageFrame.iconFrame;

// 3.信息
[self.textView setTitle:messageFrame.message.text forState:UIControlStateNormal];
self.textView.frame = messageFrame.textFrame;

// 3.1 设置聊天框
NSString *chatImageNormalName;
NSString *chatImageHighlightedName;
if (MessageTypeMe == messageFrame.message.type) {
chatImageNormalName = @"chat_send_nor";
chatImageHighlightedName = @"chat_send_press_pic";
} else {
chatImageNormalName = @"chat_receive_nor";
chatImageHighlightedName = @"chat_receive_press_pic";
}

UIImage *chatImageNormal = [UIImage resizableImage:chatImageNormalName];
UIImage *chatImageHighlighted = [UIImage resizableImage:chatImageHighlightedName];
[self.textView setBackgroundImage:chatImageNormal forState:UIControlStateNormal];
[self.textView setBackgroundImage:chatImageHighlighted forState:UIControlStateHighlighted];
}

@end

//
//  ViewController.m
//  QQChatDemo
//
//  Created by hellovoidworld on 14/12/8.
//  Copyright (c) 2014年 hellovoidworld. All rights reserved.
//

#import "ViewController.h"
#import "Message.h"
#import "MessageCell.h"
#import "MessageFrame.h"

@interface ViewController () <UITableViewDataSource, UITableViewDelegate, UITextFieldDelegate>

/** 聊天区tableView */
@property (weak, nonatomic) IBOutlet UITableView *tableView;

/** 信息记录数据 */
@property(nonatomic, strong) NSMutableArray *messages;

/** 信息输入框 */
@property (weak, nonatomic) IBOutlet UITextField *inputView;

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

// 设置dataSource
self.tableView.dataSource = self;

// 设置tableView的delegate
self.tableView.delegate = self;

// 设置tableView背景色,当键盘呼出隐藏的时候，避免默认的黑色背景出现太突兀
self.tableView.backgroundColor = BACKGROUD_COLOR;

// 设置聊天区TableView
// 不使用分割线
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
// 禁止选中cell
[self.tableView setAllowsSelection:NO];

// 设置虚拟键盘监听器
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillChangeFrame:) name:UIKeyboardWillChangeFrameNotification object:nil];

// 设置TextField文字左间距
self.inputView.leftView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 8, 0)];
self.inputView.leftViewMode = UITextFieldViewModeAlways;

// 设置信息输入框的代理
self.inputView.delegate = self;
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

- (BOOL)prefersStatusBarHidden {
return YES;
}

#pragma mark - 数据加载
/** 延迟加载plist文件数据 */
- (NSMutableArray *)messages {
if (nil == _messages) {
NSArray *dictArray = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"messages.plist" ofType:nil]];

NSMutableArray *mdictArray = [NSMutableArray array];
for (NSDictionary *dict in dictArray) {
Message *message = [Message messageWithDictionary:dict];

// 判断是否发送时间与上一条信息的发送时间相同，若是则不用显示了
MessageFrame *lastMessageFrame = [mdictArray lastObject];
if (lastMessageFrame && [message.time isEqualToString:lastMessageFrame.message.time]) {
message.hideTime = YES;
}

MessageFrame *messageFrame = [[MessageFrame alloc] init];
messageFrame.message = message;
[mdictArray addObject:messageFrame];
}

_messages = mdictArray;
}

return _messages;
}

#pragma mark - dataSource方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return  self.messages.count;
}

- (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
MessageCell *cell = [MessageCell cellWithTableView:self.tableView];
cell.messageFrame = self.messages[indexPath.row];

return cell;
}

#pragma mark - tableView代理方法
/** 动态设置每个cell的高度 */
- (CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
MessageFrame *messageFrame = self.messages[indexPath.row];
return messageFrame.cellHeight;
}

#pragma mark - scrollView 代理方法
/** 点击拖曳聊天区的时候，缩回键盘 */
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
// 1.缩回键盘
[self.view endEditing:YES];
}

#pragma mark - 监听事件
- (void) keyboardWillChangeFrame:(NSNotification *) note {
// 1.取得弹出后的键盘frame
CGRect keyboardFrame = [note.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];

// 2.键盘弹出的耗时时间
CGFloat duration = [note.userInfo[UIKeyboardAnimationDurationUserInfoKey] floatValue];

// 3.键盘变化时，view的位移，包括了上移/恢复下移
CGFloat transformY = keyboardFrame.origin.y - self.view.frame.size.height;

[UIView animateWithDuration:duration animations:^{
self.view.transform = CGAffineTransformMakeTranslation(0, transformY);
}];
}

#pragma mark - TextField 代理方法
/** 回车响应事件 */
- (BOOL)textFieldShouldReturn:(UITextField *)textField {
// 我方发出信息
[self sendMessageWithContent:textField.text andType:MessageTypeMe];

// 自动回复
[self sendMessageWithContent:[NSString stringWithFormat:@"%@\n%@", textField.text, @"你妹!!!"] andType:MessageTypeOhter];

// 消除消息框内容
self.inputView.text = nil;

[self.tableView reloadData];

// 滚动到最新的消息
NSIndexPath *lastIndexPath = [NSIndexPath indexPathForRow:self.messages.count - 1 inSection:0];
[self.tableView scrollToRowAtIndexPath:lastIndexPath atScrollPosition:UITableViewScrollPositionBottom animated:YES];

return YES; // 返回值意义不明
}

// 发送消息
- (void) sendMessageWithContent:(NSString *) text andType:(MessageType) type {
// 获取当前时间
NSDate *date = [NSDate date];
NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
formatter.dateFormat = @"yyyy-MMM-dd hh:mm:ss";
NSString *dateStr = [formatter stringFromDate:date];

// 我方发出信息
NSDictionary *dict = @{@"text":text,
@"time":dateStr,
@"type":[NSString stringWithFormat:@"%d", type]};

Message *message = [[Message alloc] init];
[message setValuesForKeysWithDictionary:dict];
MessageFrame *messageFrame = [[MessageFrame alloc] init];
messageFrame.message = message;

[self.messages addObject:messageFrame];
}

@end

//
//  NSString+Extension.h
//  QQChatDemo
//
//  Created by hellovoidworld on 14/12/8.
//  Copyright (c) 2014年 hellovoidworld. All rights reserved.
//
// NSString扩展类

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface NSString (Extension)

/** 测量文本的尺寸 */
- (CGSize) sizeWithFont:(UIFont *)font maxSize:(CGSize) maxSize;

@end

//
//  NSString+Extension.m
//  QQChatDemo
//
//  Created by hellovoidworld on 14/12/8.
//  Copyright (c) 2014年 hellovoidworld. All rights reserved.
//

#import "NSString+Extension.h"

@implementation NSString (Extension)

/** 测量文本的尺寸 */
- (CGSize)sizeWithFont:(UIFont *)font maxSize:(CGSize)maxSize {
NSDictionary *attrs = @{NSFontAttributeName: font};
CGSize size =  [self boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;

return size;
}

@end

//
//  UIImage+Extension.h
//  QQChatDemo
//
//  Created by hellovoidworld on 14/12/8.
//  Copyright (c) 2014年 hellovoidworld. All rights reserved.
//
// NSImage 类的扩展

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface UIImage (Extension)

+ (UIImage *) resizableImage:(NSString *) imageName;

@end

//
//  UIImage+Extension.m
//  QQChatDemo
//
//  Created by hellovoidworld on 14/12/8.
//  Copyright (c) 2014年 hellovoidworld. All rights reserved.
//

#import "UIImage+Extension.h"

@implementation UIImage (Extension)

+ (UIImage *) resizableImage:(NSString *) imageName {
UIImage *image = [UIImage imageNamed:imageName];
// 取图片中部的1 x 1进行拉伸
UIEdgeInsets insets = UIEdgeInsetsMake(image.size.height/2, image.size.width/2, image.size.height/2 + 1, image.size.width/2 + 1);
return [image resizableImageWithCapInsets:insets];
}

@end