qq聊天布局思路
步骤一、更改控制器继承UITableViewController，然后修改storyboard中的控制器。
步骤二、加载plist文件，创建对应的数据模型
+ (instancetype)qqWithDict:(NSDictionary *)dict
{
return [[self
alloc] initWithDict:dict];
}
- (instancetype)initWithDict:(NSDictionary *)dict
{
self = [super
init];
if (self) {
[self
setValuesForKeysWithDictionary:dict];
}
return
self;
} 步骤三、把数据模型用数组保存起来
+ (NSMutableArray *)qqs
{
NSArray *array = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"messages.plist"
ofType:nil]];
NSMutableArray *arrayM = [NSMutableArray array];
for (NSDictionary *dict
in array) {
[arrayM addObject:[self
qqWithDict:dict]];
}
return arrayM;
}
return [NSString stringWithFormat:@"<%@,%p>{text:%@,time:%@,type:%d}",self.class,self,self.text,self.time,self.type];
} 步骤四、把cell封装到View层里面，重写set方法，把frame计算好
{
static NSString *ID =
@"cell";
SUNQQView *cell = [tableView dequeueReusableCellWithIdentifier:ID];
if (cell ==
nil) {
cell = [[SUNQQView alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
}
return cell;
}
{
_qqInfo = qqInfo;
//
设置时间
self.timerLabel.text = qqInfo.time;
CGFloat timerW = [UIScreen mainScreen].bounds.size.width;
self.timerLabel.frame = CGRectMake(0,
0, timerW,
35);
//
设置头像
if (qqInfo.type) {
CGFloat imageX = kMargin;
CGFloat imageY = CGRectGetMaxY(self.timerLabel.frame) + kMargin;
self.iconImageView.frame = CGRectMake(imageX, imageY, kIconW, kIconH);
self.iconImageView.image = [UIImage imageNamed:@"other"];
}else{
CGFloat X = [UIScreen mainScreen].bounds.size.width - kMargin - kIconW;
CGFloat Y = CGRectGetMaxY(self.timerLabel.frame) +
10;
self.iconImageView.frame = CGRectMake(X, Y, kIconW, kIconH);
self.iconImageView.image = [UIImage imageNamed:@"me"];
}
//
设置文字
NSDictionary *dict =
@{NSFontAttributeName: [UIFont systemFontOfSize:13.0]};
CGRect frameText = [qqInfo.text boundingRectWithSize:CGSizeMake(150,
MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil];
[self.textBtn setTitle:qqInfo.text forState:UIControlStateNormal];
self.textBtn.contentEdgeInsets = UIEdgeInsetsMake(20,
20,
20,
20);
CGFloat textY = CGRectGetMaxY(self.timerLabel.frame) +
10;
CGFloat textW = frameText.size.width +
40;
CGFloat textH = frameText.size.height +
40;
CGFloat textX;
if (qqInfo.type) {
textX = CGRectGetMaxX(self.iconImageView.frame) +
10;
}else{
textX = [UIScreen mainScreen].bounds.size.width -
2*kMargin - kIconW - textW;
}
self.textBtn.frame = CGRectMake(textX, textY, textW, textH);
//
设置行高
CGFloat maxH =
MAX(CGRectGetMaxY(self.iconImageView.frame),
CGRectGetMaxY(self.textBtn.frame));
self.cellHight = maxH + kMargin;
//
设置聊天背景
if (qqInfo.type) {
UIImage *image = [UIImage imageNamed:@"chat_recive_nor"];
UIImage *image1 = [image stretchableImageWithLeftCapWidth:30 topCapHeight:30];
[self.textBtn setBackgroundImage:image1 forState:UIControlStateNormal];
[self.textBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
}else{
UIImage *image = [UIImage imageNamed:@"chat_send_nor"];
UIImage *image1 = [image stretchableImageWithLeftCapWidth:30
topCapHeight:30];
[self.textBtn setBackgroundImage:image1 forState:UIControlStateNormal];
[self.textBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
}
注意：
步骤二、加载plist文件，创建对应的数据模型
+ (instancetype)qqWithDict:(NSDictionary *)dict
{
return [[self
alloc] initWithDict:dict];
}
- (instancetype)initWithDict:(NSDictionary *)dict
{
self = [super
init];
if (self) {
[self
setValuesForKeysWithDictionary:dict];
}
return
self;
} 步骤三、把数据模型用数组保存起来
+ (NSMutableArray *)qqs
{
NSArray *array = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"messages.plist"
ofType:nil]];
NSMutableArray *arrayM = [NSMutableArray array];
for (NSDictionary *dict
in array) {
[arrayM addObject:[self
qqWithDict:dict]];
}
return arrayM;
}
- (NSString *)description
{
return [NSString stringWithFormat:@"<%@,%p>{text:%@,time:%@,type:%d}",self.class,self,self.text,self.time,self.type];
} 步骤四、把cell封装到View层里面，重写set方法，把frame计算好
+ (
instancetype)qqView:(UITableView *)tableView{
static NSString *ID =
@"cell";
SUNQQView *cell = [tableView dequeueReusableCellWithIdentifier:ID];
if (cell ==
nil) {
cell = [[SUNQQView alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
}
return cell;
}
- (
void)setQqInfo:(SUNQQInfo *)qqInfo{
_qqInfo = qqInfo;
//
设置时间
self.timerLabel.text = qqInfo.time;
CGFloat timerW = [UIScreen mainScreen].bounds.size.width;
self.timerLabel.frame = CGRectMake(0,
0, timerW,
35);
//
设置头像
if (qqInfo.type) {
CGFloat imageX = kMargin;
CGFloat imageY = CGRectGetMaxY(self.timerLabel.frame) + kMargin;
self.iconImageView.frame = CGRectMake(imageX, imageY, kIconW, kIconH);
self.iconImageView.image = [UIImage imageNamed:@"other"];
}else{
CGFloat X = [UIScreen mainScreen].bounds.size.width - kMargin - kIconW;
CGFloat Y = CGRectGetMaxY(self.timerLabel.frame) +
10;
self.iconImageView.frame = CGRectMake(X, Y, kIconW, kIconH);
self.iconImageView.image = [UIImage imageNamed:@"me"];
}
//
设置文字
NSDictionary *dict =
@{NSFontAttributeName: [UIFont systemFontOfSize:13.0]};
CGRect frameText = [qqInfo.text boundingRectWithSize:CGSizeMake(150,
MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil];
[self.textBtn setTitle:qqInfo.text forState:UIControlStateNormal];
self.textBtn.contentEdgeInsets = UIEdgeInsetsMake(20,
20,
20,
20);
CGFloat textY = CGRectGetMaxY(self.timerLabel.frame) +
10;
CGFloat textW = frameText.size.width +
40;
CGFloat textH = frameText.size.height +
40;
CGFloat textX;
if (qqInfo.type) {
textX = CGRectGetMaxX(self.iconImageView.frame) +
10;
}else{
textX = [UIScreen mainScreen].bounds.size.width -
2*kMargin - kIconW - textW;
}
self.textBtn.frame = CGRectMake(textX, textY, textW, textH);
//
设置行高
CGFloat maxH =
MAX(CGRectGetMaxY(self.iconImageView.frame),
CGRectGetMaxY(self.textBtn.frame));
self.cellHight = maxH + kMargin;
//
设置聊天背景
if (qqInfo.type) {
UIImage *image = [UIImage imageNamed:@"chat_recive_nor"];
UIImage *image1 = [image stretchableImageWithLeftCapWidth:30 topCapHeight:30];
[self.textBtn setBackgroundImage:image1 forState:UIControlStateNormal];
[self.textBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
}else{
UIImage *image = [UIImage imageNamed:@"chat_send_nor"];
UIImage *image1 = [image stretchableImageWithLeftCapWidth:30
topCapHeight:30];
[self.textBtn setBackgroundImage:image1 forState:UIControlStateNormal];
[self.textBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
}
注意：
1.在设置内容文字的自适应宽高，可以调用boundingRectWithSize方法
NSDictionary *dict =
@{NSFontAttributeName: [UIFont systemFontOfSize:13.0]};
CGRect frameText = [qqInfo.text boundingRectWithSize:CGSizeMake(150,
MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil];
NSDictionary *dict =
@{NSFontAttributeName: [UIFont systemFontOfSize:13.0]};
CGRect frameText = [qqInfo.text boundingRectWithSize:CGSizeMake(150,
MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil];
2.按钮的宽度和高度，根据内容决定的，如果想更改按钮的宽度和高度，我们只需要修改内容的宽度和高度，但是加宽了按钮，按钮内部的宽度也会加宽，如果想要内容的宽度保持不变，需要设置按钮的内边距。
contentEdgeInsets
contentEdgeInsets
步骤五、实现其代理方法
#pragma mark -
实现代理的方法
- (CGFloat)tableView:(UITableView
*)tableView heightForRowAtIndexPath:(NSIndexPath
*)indexPath
{
SUNQQView *qqView = [[SUNQQView
alloc]
init];
qqView.qqInfo
=
self.qqs[indexPath.row];
return qqView.cellHight;
}
- (UITableViewCell
*)tableView:(UITableView
*)tableView cellForRowAtIndexPath:(NSIndexPath
*)indexPath
{
SUNQQView *cell = [SUNQQView
qqView:tableView];
//
取出数据
cell.qqInfo
=
self.qqs[indexPath.row];
cell.backgroundColor
= [UIColor
clearColor];
return cell;
}
- (NSInteger)tableView:(UITableView
*)tableView numberOfRowsInSection:(NSInteger)section
{
return
self.qqs.count;
}
步骤六、监听键盘的通知
//
监听键盘的通知
[[NSNotificationCenter
defaultCenter]
addObserver:self
selector:@selector(keyboardWillChangeFrame:)
name:UIKeyboardWillChangeFrameNotification
object:nil];
监听键盘的通知
[[NSNotificationCenter
defaultCenter]
addObserver:self
selector:@selector(keyboardWillChangeFrame:)
name:UIKeyboardWillChangeFrameNotification
object:nil];
- (void)keyboardWillChangeFrame:(NSNotification
*)noti
{
NSLog(@"%@",noti.userInfo);
//
设置窗口的颜色
self.view.window.backgroundColor
=
self.tableView.backgroundColor;
//
取出键盘动画的时间
CGFloat duration= [noti.userInfo[UIKeyboardAnimationDurationUserInfoKey]
doubleValue];
//
取得键盘最后的frame
CGRect keyboardFrame = [noti.userInfo[UIKeyboardFrameEndUserInfoKey]
CGRectValue];
//
计算控制器移动的距离
CGFloat tansformY = keyboardFrame.origin.y
-
self.view.frame.size.height;
//
执行动画
[UIView
animateWithDuration:duration
animations:^{
self.view.transform
=
CGAffineTransformMakeTranslation(0, tansformY);
}];
}
// 移除通知
- (void)dealloc
{
[[NSNotificationCenter
defaultCenter]
removeObserver:self];
}
*)noti
{
NSLog(@"%@",noti.userInfo);
//
设置窗口的颜色
self.view.window.backgroundColor
=
self.tableView.backgroundColor;
//
取出键盘动画的时间
CGFloat duration= [noti.userInfo[UIKeyboardAnimationDurationUserInfoKey]
doubleValue];
//
取得键盘最后的frame
CGRect keyboardFrame = [noti.userInfo[UIKeyboardFrameEndUserInfoKey]
CGRectValue];
//
计算控制器移动的距离
CGFloat tansformY = keyboardFrame.origin.y
-
self.view.frame.size.height;
//
执行动画
[UIView
animateWithDuration:duration
animations:^{
self.view.transform
=
CGAffineTransformMakeTranslation(0, tansformY);
}];
}
// 移除通知
- (void)dealloc
{
[[NSNotificationCenter
defaultCenter]
removeObserver:self];
}
步骤七、自动回复- (void)addMessage:(NSString
*)text type:(MJMessageType)type
*)text type:(MJMessageType)type
{
// 1.数据模型
MJMessage *msg = [[MJMessage
alloc]
init];
msg.type
= type;
msg.text
= text;
//
设置数据模型的时间
NSDate *now = [NSDate
date];
NSDateFormatter
*fmt = [[NSDateFormatter
alloc]
init];
fmt.dateFormat
=
@"HH:mm";
msg.time
= [fmt
stringFromDate:now];
//
看是否需要隐藏时间
MJMessageFrame *lastMf = [self.messageFrames
lastObject];
MJMessage *lastMsg = lastMf.message;
msg.hideTime
= [msg.time
isEqualToString:lastMsg.time];
// 2.frame模型
MJMessageFrame *mf = [[MJMessageFrame
alloc]
init];
mf.message
= msg;
[self.messageFrames
addObject:mf];
//
[self.tableView
reloadData];
// 4.自动滚动表格到最后一行
NSIndexPath *lastPath = [NSIndexPath
indexPathForRow:self.messageFrames.count
-
1
inSection:0];
[self.tableView
scrollToRowAtIndexPath:lastPath
atScrollPosition:UITableViewScrollPositionBottom
animated:YES];
} /**
*
根据自己发的内容取得自动回复的内容
*
*
@param
text
自己发的内容
*/
- (NSString
*)replayWithText:(NSString
*)text
{
for (int
i =
0; i<text.length; i++) {
NSString *word = [text
substringWithRange:NSMakeRange(i,
1)];
if (self.autoreply[word])
return
self.autoreply[word];
}
return
@"滚蛋";
}
// 1.数据模型
MJMessage *msg = [[MJMessage
alloc]
init];
msg.type
= type;
msg.text
= text;
//
设置数据模型的时间
NSDate *now = [NSDate
date];
NSDateFormatter
*fmt = [[NSDateFormatter
alloc]
init];
fmt.dateFormat
=
@"HH:mm";
msg.time
= [fmt
stringFromDate:now];
//
看是否需要隐藏时间
MJMessageFrame *lastMf = [self.messageFrames
lastObject];
MJMessage *lastMsg = lastMf.message;
msg.hideTime
= [msg.time
isEqualToString:lastMsg.time];
// 2.frame模型
MJMessageFrame *mf = [[MJMessageFrame
alloc]
init];
mf.message
= msg;
[self.messageFrames
addObject:mf];
//
[self.tableView
reloadData];
// 4.自动滚动表格到最后一行
NSIndexPath *lastPath = [NSIndexPath
indexPathForRow:self.messageFrames.count
-
1
inSection:0];
[self.tableView
scrollToRowAtIndexPath:lastPath
atScrollPosition:UITableViewScrollPositionBottom
animated:YES];
} /**
*
根据自己发的内容取得自动回复的内容
*
*
@param
text
自己发的内容
*/
- (NSString
*)replayWithText:(NSString
*)text
{
for (int
i =
0; i<text.length; i++) {
NSString *word = [text
substringWithRange:NSMakeRange(i,
1)];
if (self.autoreply[word])
return
self.autoreply[word];
}
return
@"滚蛋";
}
步骤八、其他的设置
//
去除分割线
self.tableView.separatorStyle
=
UITableViewCellSeparatorStyleNone;
//
设置背景图片
self.tableView.backgroundColor
= [UIColor
colorWithRed:224/255.0
green:224/255.0
blue:224/255.0
alpha:1.0];
//
界面不允许被点击
self.tableView.allowsSelection
=
NO;
//
处理文本输入框
self.inputView.leftView
= [[UITextField
alloc]
initWithFrame:CGRectMake(0,
0,
5,
0)];
self.inputView.leftViewMode
=
UITextFieldViewModeAlways;
self.inputView.delegate
=
self;
去除分割线
self.tableView.separatorStyle
=
UITableViewCellSeparatorStyleNone;
//
设置背景图片
self.tableView.backgroundColor
= [UIColor
colorWithRed:224/255.0
green:224/255.0
blue:224/255.0
alpha:1.0];
//
界面不允许被点击
self.tableView.allowsSelection
=
NO;
//
处理文本输入框
self.inputView.leftView
= [[UITextField
alloc]
initWithFrame:CGRectMake(0,
0,
5,
0)];
self.inputView.leftViewMode
=
UITextFieldViewModeAlways;
self.inputView.delegate
=
self;
九、return键的处理
#pragma mark -
文本框代理
/**
*
点击了return按钮(键盘最右下角的按钮)就会调用
*/
- (BOOL)textFieldShouldReturn:(UITextField
*)textField
{
// 1.自己发一条消息
[self
addMessage:textField.text
type:MJMessageTypeMe];
// 2.自动回复一条消息
NSString *reply = [self
replayWithText:textField.text];
[self
addMessage:reply
type:MJMessageTypeOther];
// 3.清空文字
self.inputView.text
=
nil;
//
返回YES即可
return
YES;
}
文本框代理
/**
*
点击了return按钮(键盘最右下角的按钮)就会调用
*/
- (BOOL)textFieldShouldReturn:(UITextField
*)textField
{
// 1.自己发一条消息
[self
addMessage:textField.text
type:MJMessageTypeMe];
// 2.自动回复一条消息
NSString *reply = [self
replayWithText:textField.text];
[self
addMessage:reply
type:MJMessageTypeOther];
// 3.清空文字
self.inputView.text
=
nil;
//
返回YES即可
return
YES;
}