mui写聊天界面_iOS IM即时通信之聊天界面UI框架

效果:

聊天效果.gif

随便扯扯

公司项目以前就集成环信, 后来不知道什么原因给撤了, 最近又不知道打什么鸡血要上IM, 界面一个礼拜搭建完成, 前前后后两个月一直在改pm, 改接口, 一把心酸一把泪, 由于后台拖拖拖, 产品改改改, 我的小儿子终于在前两个礼拜上线啦(≧≦)/啦啦啦,

最近闲的蛋疼, 决定把我的小儿子抽出来给大家玩玩, 里面也借鉴了很多优秀的代码, 喜欢的可以参考(写的比较简单, 勿喷~)

项目结构

项目结构.png

项目结构.png

表情键盘

如何更改? 在下面的代码修改plist文件, 替换表情图片

+ (NSArray *)loadPackages {

if (_packages) {

return _packages;

}

NSMutableArray *models = [NSMutableArray array];

KeyboardEmojiPackage *packge = [[KeyboardEmojiPackage alloc] init];

NSString *path = [[NSBundle mainBundle] pathForResource:@"emoticons.plist" ofType:nil];

NSDictionary *dict = [NSDictionary dictionaryWithContentsOfFile:path];

NSArray *array = dict[@"packages"];

for (NSDictionary *dict in array) {

KeyboardEmojiPackage *package = [[KeyboardEmojiPackage alloc] initWithDict:dict];

[packge loadEmojis];

[packge appendEmptyEmoji];

[models addObject:package];

}

_packages = models;

return models;

}

/**

* 加载当前组所有的表情

*/

- (void)loadEmojis {

NSString *path = [[NSBundle mainBundle] pathForResource:self.group_name ofType:nil];

NSArray *array = [NSArray arrayWithContentsOfFile:path];

NSMutableArray *models = [NSMutableArray array];

NSInteger index = 0;

for (NSDictionary *dict in array) {

KeyboardEmojiModel *emotion = [[KeyboardEmojiModel alloc] initWithDict:dict];

emotion.group_folder_name = self.group_folder_name;

[models addObject:emotion];

index ++;

}

self.emojis = models;

}

修改布局

根据需要修改3 X 7 或 2 X 4

- (void)prepareLayout {

CGFloat itemWith = [UIScreen mainScreen].bounds.size.width / 4;

CGFloat itemHeight = 55;

self.itemSize = CGSizeMake(itemWith, itemHeight);

self.minimumLineSpacing = 0;

self.minimumInteritemSpacing = 0;

self.scrollDirection = UICollectionViewScrollDirectionHorizontal;

self.collectionView.pagingEnabled = YES;

self.collectionView.showsVerticalScrollIndicator = NO;

self.collectionView.showsHorizontalScrollIndicator = NO;

// self.collectionView.bounces = NO;

// 让cell居中显示

CGFloat offsetY = (self.collectionView.bounds.size.height - (2 * itemHeight)) * 0.48;

self.collectionView.contentInset = UIEdgeInsetsMake(offsetY, 0, 0, offsetY);

}

聊天气泡

聊天气泡用的是图片, 用户可自定义更换

// bubbleView 的背景图片

NSString *const BUBBLE_LEFT_IMAGE_NAME = @"IM_Chat_receiver_bg";

NSString *const BUBBLE_RIGHT_IMAGE_NAME = @"IM_Chat_sender_bg";

说一下输入框的问题

输入框用的是textView, 在输入框换行改变高度到第二行的时候, 文字会向上偏移, 到第三行又正常, 回退也是正常的, 这个问题纠结的很久, 也查了很多资料, 如果有朋友遇到这个问题可以借鉴下面的代码

#pragma mark - UITextViewDelegate

- (void)textViewDidChange:(UITextView *)textView {

static CGFloat maxHeight = 80.0f;

CGRect frame = textView.frame;

CGSize constraintSize = CGSizeMake(frame.size.width, MAXFLOAT);

CGSize size = [textView sizeThatFits:constraintSize];

if (size.height >= maxHeight) {

size.height = maxHeight;

textView.scrollEnabled = YES; // 允许滚动

[textView scrollRectToVisible:CGRectMake(0, textView.contentSize.height-7.5, textView.contentSize.width, 10) animated:NO];

} else {

textView.scrollEnabled = NO; // 不允许滚动，当textview的大小足以容纳它的text的时候，需要设置scrollEnabed为NO，否则会出现光标乱滚动的情况

}

[UIView animateWithDuration:_animationDuration delay:0 options:(_animationCurve << 16 | UIViewAnimationOptionBeginFromCurrentState) animations:^{

// 调整整个InputToolBar 的高度

self.height = (15 + size.height) - kChatBarHeight < 5 ? kChatBarHeight : 15 + size.height;

CGFloat keyboardHeight = _keyboardHeight;

if (self.moreBtn.selected) {

keyboardHeight = kChatMoreHeight;

}

else if (self.emojiBtn.selected) {

keyboardHeight = kChatEmojiHeight;

}

self.y = SCREEN_H - self.height - keyboardHeight;

_tableView.height = self.y - kNavBarHeight;

[self layoutIfNeeded];

} completion:nil];

}

第三方开源框架

FMDB --> 对SQLite的API进行了封装

SDWebImage --> 缓存下载图片

TZImagePickerController --> 一个支持多选、选原图和视频的图片选择器，同时有预览、裁剪功能

YYKit --> 是一组庞大、功能丰富的 iOS 组件

写在最后

整个消息UI还是仿照环信的, 基本上大致相同, 只是稍加修改, 因为需求只需要聊天, 文字, 表情, 所以demo也只有这些, 基本比较简单, 如果觉得本文对你有帮助，感谢给个star

github地址：LHChat

补充一下

聊天cell里面也能显示动图，但是发送大量动态表情的时候，滑动是会卡顿，用yylabel开启异步绘制还是一样，研究了挺久的，也琢磨不出来什么，有知道的大神还望在留言区指点一下，给个思路也行，谢谢(๑ᴖᴖ๑)