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;
}</code></pre>
- 修改布局
- 根據需要修改3 X 7 或 2 X 4
</li>
</ul>
- (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);
}</code></pre>
-
聊天氣泡
聊天氣泡用的是圖片, 用戶可自定義更換
// 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