iOS开发之微信聊天页面实现
IOS
ui
聊天界面的效果图如下：在下面的聊天界面中中用到了3类cell,一类是显示文字和表情的，一类是显示录音的，一类是显示图片的。当点击图片时会跳转到另一个Controller中来进行图片显示，在图片显示页面中添加了一个捏合的手势。点击播放按钮，会播放录制的音频，cell的大学会根据内容的多少来调整，而cell中textView的高度是通过约束来设置的。
一，定义我们要用的cell,代码如下：
1，显示表情和text的cell,代码如下，需要根据NSMutableAttributedString求出bound,然后改变cell上的ImageView和TextView的宽度的约束值，动态的调整气泡的大小，具体代码如下：
#import "TextCell.h"
@interface TextCell()
@property (strong, nonatomic) IBOutlet UIImageView *headImageView;
@property (strong, nonatomic) IBOutlet UIImageView *chatBgImageView;
@property (strong, nonatomic) IBOutlet UITextView *chatTextView;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *chatBgImageWidthConstraint;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *chatTextWidthConstaint;
@property (strong, nonatomic) NSMutableAttributedString *attrString;
@end
@implementation TextCell
-(void)setCellValue:(NSMutableAttributedString *)str
{
//移除约束
[self removeConstraint:_chatBgImageWidthConstraint];
[self removeConstraint:_chatTextWidthConstaint];
self.attrString = str;
NSLog(@"%@",self.attrString);
//由text计算出text的宽高
CGRect bound = [self.attrString boundingRectWithSize:CGSizeMake(150, 1000) options:NSStringDrawingUsesLineFragmentOrigin context:nil];
//根据text的宽高来重新设置新的约束
//背景的宽
NSString *widthImageString;
NSArray *tempArray;
widthImageString = [NSString stringWithFormat:@"H:[_chatBgImageView(%f)]", bound.size.width+45];
tempArray = [NSLayoutConstraint constraintsWithVisualFormat:widthImageString options:0 metrics:0 views:NSDictionaryOfVariableBindings(_chatBgImageView)];
_chatBgImageWidthConstraint = tempArray[0];
[self addConstraint:self.chatBgImageWidthConstraint];
widthImageString = [NSString stringWithFormat:@"H:[_chatTextView(%f)]", bound.size.width+20];
tempArray = [NSLayoutConstraint constraintsWithVisualFormat:widthImageString options:0 metrics:0 views:NSDictionaryOfVariableBindings(_chatTextView)];
_chatBgImageWidthConstraint = tempArray[0];
[self addConstraint:self.chatBgImageWidthConstraint];
//设置图片
UIImage *image = [UIImage imageNamed:@"chatfrom_bg_normal.png"];
image = [image resizableImageWithCapInsets:(UIEdgeInsetsMake(image.size.height * 0.6, image.size.width * 0.4, image.size.height * 0.3, image.size.width * 0.4))];
//image = [image stretchableImageWithLeftCapWidth:image.size.width * 0.5 topCapHeight:image.size.height * 0.5];
[self.chatBgImageView setImage:image];
self.chatTextView.attributedText = str;
}
@end登录后复制
2.显示图片的cell,通过block回调把图片传到Controller中，用于放大图片使用。
#import "MyImageCell.h"
@interface MyImageCell()
@property (strong, nonatomic) IBOutlet UIImageView *bgImageView;
@property (strong, nonatomic) IBOutlet UIButton *imageButton;
@property (strong, nonatomic) ButtonImageBlock imageBlock;
@property (strong, nonatomic) UIImage *buttonImage;
@end
@implementation MyImageCell
-(void)setCellValue:(UIImage *)sendImage
{
self.buttonImage = sendImage;
UIImage *image = [UIImage imageNamed:@"chatto_bg_normal.png"];
image = [image resizableImageWithCapInsets:(UIEdgeInsetsMake(image.size.height * 0.6, image.size.width * 0.4, image.size.height * 0.3, image.size.width * 0.4))];
[self.bgImageView setImage:image];
[self.imageButton setImage:sendImage forState:UIControlStateNormal];
}
-(void)setButtonImageBlock:(ButtonImageBlock)block
{
self.imageBlock = block;
}
- (IBAction)tapImageButton:(id)sender {
self.imageBlock(self.buttonImage);
}
@end登录后复制
3.显示录音的cell,点击cell上的button,播放对应的录音，代码如下：
#import "VoiceCellTableViewCell.h"
@interface VoiceCellTableViewCell()
@property (strong, nonatomic) NSURL *playURL;
@property (strong, nonatomic) AVAudioPlayer *audioPlayer;
@end
@implementation VoiceCellTableViewCell
-(void)setCellValue:(NSDictionary *)dic
{
_playURL = dic[@"body"][@"content"];
}
- (IBAction)tapVoiceButton:(id)sender {
NSError *error = nil;
AVAudioPlayer *player = [[AVAudioPlayer alloc]initWithContentsOfURL:_playURL error:&error];
if (error) {
NSLog(@"播放错误：%@",[error description]);
}
self.audioPlayer = player;
[self.audioPlayer play];
}
@end登录后复制
二，cell搞定后要实现我们的ChatController部分
ChatController.m中的延展和枚举代码如下：
//枚举Cell类型
typedef enum : NSUInteger {
SendText,
SendVoice,
SendImage
} MySendContentType;
//枚举用户类型
typedef enum : NSUInteger {
MySelf,
MyFriend
} UserType;
@interface ChatViewController ()
//工具栏
@property (nonatomic,strong) ToolView *toolView;
//音量图片
@property (strong, nonatomic) UIImageView *volumeImageView;
//工具栏的高约束，用于当输入文字过多时改变工具栏的约束
@property (strong, nonatomic) NSLayoutConstraint *tooViewConstraintHeight;
//存放所有的cell中的内容
@property (strong, nonatomic) NSMutableArray *dataSource;
//storyBoard上的控件
@property (strong, nonatomic) IBOutlet UITableView *myTableView;
//用户类型
@property (assign, nonatomic) UserType userType;
//从相册获取图片
@property (strong, nonatomic) UIImagePickerController *imagePiceker;
@end登录后复制
实现工具栏中的回调的代码如下，通过Block,工具栏和ViewController交互
//实现工具栏的回调
-(void)setToolViewBlock
{
__weak __block ChatViewController *copy_self = self;
//通过block回调接收到toolView中的text
[self.toolView setMyTextBlock:^(NSString *myText) {
NSLog(@"%@",myText);
[copy_self sendMessage:SendText Content:myText];
}];
//回调输入框的contentSize,改变工具栏的高度
[self.toolView setContentSizeBlock:^(CGSize contentSize) {
[copy_self updateHeight:contentSize];
}];
//获取录音声量，用于声音音量的提示
[self.toolView setAudioVolumeBlock:^(CGFloat volume) {
copy_self.volumeImageView.hidden = NO;
int index = (int)(volume*100)%6+1;
[copy_self.volumeImageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"record_animate_%02d.png",index]]];
}];
//获取录音地址（用于录音播放方法）
[self.toolView setAudioURLBlock:^(NSURL *audioURL) {
copy_self.volumeImageView.hidden = YES;
[copy_self sendMessage:SendVoice Content:audioURL];
}];
//录音取消（录音取消后，把音量图片进行隐藏）
[self.toolView setCancelRecordBlock:^(int flag) {
if (flag == 1) {
copy_self.volumeImageView.hidden = YES;
}
}];
//扩展功能回调
[self.toolView setExtendFunctionBlock:^(int buttonTag) {
switch (buttonTag) {
case 1:
//从相册获取
[copy_self presentViewController:copy_self.imagePiceker animated:YES completion:^{
}];
break;
case 2:
//拍照
break;
default:
break;
}
}];
}登录后复制
把聊天工具栏中返回的内容显示在tableView中，代码如下：
//发送消息
-(void)sendMessage:(MySendContentType) sendType Content:(id)content
{
//把收到的url封装成字典
UserType userType = self.userType;
NSMutableDictionary *tempDic = [[NSMutableDictionary alloc] initWithCapacity:2];
[tempDic setValue:@(userType) forKey:@"userType"];
NSDictionary *bodyDic = @{@"type":@(sendType),
@"content":content};
[tempDic setValue:bodyDic forKey:@"body"];
[self.dataSource addObject:tempDic];
//重载tableView
[self.myTableView reloadData];
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:self.dataSource.count-1 inSection:0];
[self.myTableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionBottom animated:YES];
}登录后复制
根据ToolView中回调接口，获取工具栏中textView的ContentSize,通过ContentSize来调整ToolView的高度约束，代码如下：
//更新toolView的高度约束
-(void)updateHeight:(CGSize)contentSize
{
float height = contentSize.height + 18;
if (height <= 80) {
[self.view removeConstraint:self.tooViewConstraintHeight];
NSString *string = [NSString stringWithFormat:@"V:[_toolView(%f)]", height];
NSArray * tooViewConstraintV = [NSLayoutConstraint constraintsWithVisualFormat:string options:0 metrics:0 views:NSDictionaryOfVariableBindings(_toolView)];
self.tooViewConstraintHeight = tooViewConstraintV[0];
[self.view addConstraint:self.tooViewConstraintHeight];
}
}登录后复制
从本地获取图片，并显示在相应的Cell上，代码如下：
//获取图片后要做的方法
-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
{
UIImage *pickerImage = info[UIImagePickerControllerEditedImage];
//发送图片
[self sendMessage:SendImage Content:pickerImage];
[self dismissViewControllerAnimated:YES completion:^{}];
}
-(void)imagePickerControllerDidCancel:(UIImagePickerController *)picker
{
//在ImagePickerView中点击取消时回到原来的界面
[self dismissViewControllerAnimated:YES completion:^{}];
}登录后复制
把NSString 转换成NSMutableAttributeString,用于显示表情，代码如下：
//显示表情,用属性字符串显示表情
-(NSMutableAttributedString *)showFace:(NSString *)str
{
//加载plist文件中的数据
NSBundle *bundle = [NSBundle mainBundle];
//寻找资源的路径
NSString *path = [bundle pathForResource:@"emoticons" ofType:@"plist"];
//获取plist中的数据
NSArray *face = [[NSArray alloc] initWithContentsOfFile:path];
//创建一个可变的属性字符串
NSMutableAttributedString *attributeString = [[NSMutableAttributedString alloc] initWithString:str];
UIFont *baseFont = [UIFont systemFontOfSize:17];
[attributeString addAttribute:NSFontAttributeName value:baseFont
range:NSMakeRange(0, str.length)];
//正则匹配要替换的文字的范围
//正则表达式
NSString * pattern = @"\\[[a-zA-Z0-9\\u4e00-\\u9fa5]+\\]";
NSError *error = nil;
NSRegularExpression * re = [NSRegularExpression regularExpressionWithPattern:pattern options:NSRegularExpressionCaseInsensitive error:&error];
if (!re) {
NSLog(@"%@", [error localizedDescription]);
}
//通过正则表达式来匹配字符串
NSArray *resultArray = [re matchesInString:str options:0 range:NSMakeRange(0, str.length)];
//用来存放字典，字典中存储的是图片和图片对应的位置
NSMutableArray *imageArray = [NSMutableArray arrayWithCapacity:resultArray.count];
//根据匹配范围来用图片进行相应的替换
for(NSTextCheckingResult *match in resultArray) {
//获取数组元素中得到range
NSRange range = [match range];
//获取原字符串中对应的值
NSString *subStr = [str substringWithRange:range];
for (int i = 0; i < face.count; i ++)
{
if ([face[i][@"chs"] isEqualToString:subStr])
{
//face[i][@"gif"]就是我们要加载的图片
//新建文字附件来存放我们的图片
NSTextAttachment *textAttachment = [[NSTextAttachment alloc] init];
//给附件添加图片
textAttachment.image = [UIImage imageNamed:face[i][@"png"]];
//把附件转换成可变字符串，用于替换掉源字符串中的表情文字
NSAttributedString *imageStr = [NSAttributedString attributedStringWithAttachment:textAttachment];
//把图片和图片对应的位置存入字典中
NSMutableDictionary *imageDic = [NSMutableDictionary dictionaryWithCapacity:2];
[imageDic setObject:imageStr forKey:@"image"];
[imageDic setObject:[NSValue valueWithRange:range] forKey:@"range"];
//把字典存入数组中
[imageArray addObject:imageDic];
}
}
}
//从后往前替换
for (int i = imageArray.count -1; i >= 0; i--)
{
NSRange range;
[imageArray[i][@"range"] getValue:&range];
//进行替换
[attributeString replaceCharactersInRange:range withAttributedString:imageArray[i][@"image"]];
}
return attributeString;
}登录后复制
根据Cell显示内容来调整Cell的高度，代码如下：
//调整cell的高度
-(float)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
//根据文字计算cell的高度
if ([self.dataSource[indexPath.row][@"body"][@"type"] isEqualToNumber:@(SendText)]) {
NSMutableAttributedString *contentText = [self showFace:self.dataSource[indexPath.row][@"body"][@"content"]];
CGRect textBound = [contentText boundingRectWithSize:CGSizeMake(150, 1000) options:NSStringDrawingUsesLineFragmentOrigin context:nil];
float height = textBound.size.height + 40;
return height;
}
if ([self.dataSource[indexPath.row][@"body"][@"type"] isEqualToNumber:@(SendVoice)])
{
return 73;
}
if ([self.dataSource[indexPath.row][@"body"][@"type"] isEqualToNumber:@(SendImage)])
{
return 125;
}
return 100;
}登录后复制
根据cell内容和用户类型，来选择Cell,代码如下：
//设置cell
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
//根据类型选cell
MySendContentType contentType = [self.dataSource[indexPath.row][@"body"][@"type"] integerValue];
if ([self.dataSource[indexPath.row][@"userType"] isEqual: @(MyFriend)]) {
switch (contentType) {
case SendText:
{
TextCell *cell = [tableView dequeueReusableCellWithIdentifier:@"textCell" forIndexPath:indexPath];
NSMutableAttributedString *contentText = [self showFace:self.dataSource[indexPath.row][@"body"][@"content"]];
[cell setCellValue:contentText];
return cell;
}
break;
case SendImage:
{
heImageCell *cell = [tableView dequeueReusableCellWithIdentifier:@"heImageCell" forIndexPath:indexPath];
[cell setCellValue:self.dataSource[indexPath.row][@"body"][@"content"]];
__weak __block ChatViewController *copy_self = self;
//传出cell中的图片
[cell setButtonImageBlock:^(UIImage *image) {
[copy_self displaySendImage:image];
}];
return cell;
}
break;
case SendVoice:
{
VoiceCellTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"heVoiceCell" forIndexPath:indexPath];
[cell setCellValue:self.dataSource[indexPath.row]];
return cell;
}
break;
default:
break;
}
}
if ([self.dataSource[indexPath.row][@"userType"] isEqual: @(MySelf)]) {
switch (contentType) {
case SendText:
{
TextCell *cell = [tableView dequeueReusableCellWithIdentifier:@"myselfTextCell" forIndexPath:indexPath];
NSMutableAttributedString *contentText = [self showFace:self.dataSource[indexPath.row][@"body"][@"content"]];
[cell setCellValue:contentText];
return cell;
}
break;
case SendImage:
{
MyImageCell *cell = [tableView dequeueReusableCellWithIdentifier:@"myImageCell" forIndexPath:indexPath];
[cell setCellValue:self.dataSource[indexPath.row][@"body"][@"content"]];
__weak __block ChatViewController *copy_self = self;
//传出cell中的图片
[cell setButtonImageBlock:^(UIImage *image) {
[copy_self displaySendImage:image];
}];
return cell;
}
break;
case SendVoice:
{
VoiceCellTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"myVoiceCell" forIndexPath:indexPath];
[cell setCellValue:self.dataSource[indexPath.row]];
return cell;
}
break;
default:
break;
}
}
UITableViewCell *cell;
return cell;
}登录后复制
点击发送的图片来放大图片代码如下：
//发送图片的放大
-(void) displaySendImage : (UIImage *)image
{
//把照片传到放大的controller中
UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:[NSBundle mainBundle]];
ImageViewController *imageController = [storyboard instantiateViewControllerWithIdentifier:@"imageController"];
[imageController setValue:image forKeyPath:@"image"];
[self.navigationController pushViewController:imageController animated:YES];
}登录后复制
根据键盘的高度来调整ToolView的位置，代码如下：
//键盘出来的时候调整tooView的位置
-(void) keyChange:(NSNotification *) notify
{
NSDictionary *dic = notify.userInfo;
CGRect endKey = [dic[@"UIKeyboardFrameEndUserInfoKey"] CGRectValue];
//坐标系的转换
CGRect endKeySwap = [self.view convertRect:endKey fromView:self.view.window];
//运动时间
[UIView animateWithDuration:[dic[UIKeyboardAnimationDurationUserInfoKey] floatValue] animations:^{
[UIView setAnimationCurve:[dic[UIKeyboardAnimationCurveUserInfoKey] doubleValue]];
CGRect frame = self.view.frame;
frame.size.height = endKeySwap.origin.y;
self.view.frame = frame;
[self.view layoutIfNeeded];
}];
}登录后复制
代码有点多，不过在关键的部分都加有注释，在图片显示View中通过捏合手势来调整图片的大小，代码如下：
- (IBAction)tapPichGesture:(id)sender {
UIPinchGestureRecognizer *gesture = sender;
//手势改变时
if (gesture.state == UIGestureRecognizerStateChanged)
{
//捏合手势中scale属性记录的缩放比例
self.myImageView.transform = CGAffineTransformMakeScale(gesture.scale, gesture.scale);
}
}登录后复制
更多iOS开发之微信聊天页面实现 相关文章请关注PHP中文网！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
Windows 11 KB5054979中的新功能以及如何解决更新问题
4 周前
By DDD
如何修复KB5055523无法在Windows 11中安装？
3 周前
By DDD
如何修复KB5055518无法在Windows 10中安装？
3 周前
By DDD
R.E.P.O.的每个敌人和怪物的力量水平
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
蓝王子：如何到达地下室
3 周前
By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
艾尔登法环ui怎么一直显示
Mar 11, 2024 pm 04:31 PM
在艾尔登法环中这款游戏的ui页面在一段时间以后是会自动进行隐藏的，有很多玩家不知道ui怎么一直显示，玩家可以在显示以及声音配置中选择其中的量表显示配置，点击开启即可。艾尔登法环ui怎么一直显示1、首先我们进入主菜单后，点击【系统配置】。2、在【显示及声音配置】界面，选择其中的量表显示配置。3、点击开启即可完成。
两位谷歌华人研究员发布首个纯视觉「移动UI理解」模型，四大任务刷新SOTA
Apr 12, 2023 pm 04:40 PM
对AI来说，「玩手机」可不是一件易事，光是识别各种用户界面（user interface, UI）就是一大难题：不光要识别出各个组件的类型，还要根据其使用的符号、位置来判断组件的功能。对移动设备UI的理解，能够帮助实现各种人机交互任务，比如UI自动化等。之前的工作对移动UI的建模通常依赖于屏幕的视图层次信息，直接利用了UI的结构数据，并借此绕过了从屏幕像素开始对组件进行识别的难题。不过并不是所有的场景下都有可用的视图层次，这种方法通常会因为对象描述的缺失或结构信息的错位而输出错误结果，所以尽管使
Vue 中常见的 UI 组件库有哪些？
Jun 11, 2023 am 11:47 AM
Vue是一款流行的JavaScript框架，它使用组件化的方式构建Web应用程序。在Vue生态系统中，有很多UI组件库可以帮助您快速构建漂亮的界面，并提供丰富的功能和交互效果。在本文中，我们将介绍一些常见的VueUI组件库。ElementUIElementUI是一款由饿了么团队开发的Vue组件库，它为开发人员提供了一组优雅，
ui是什么意思的缩写
Mar 14, 2024 pm 03:20 PM
UI是“User Interface”的缩写，主要用于描述软件的人机交互、操作逻辑和界面美观。UI设计的目的是让软件操作更简单舒适，充分体现其定位和特点。常见的UI设计分为实体UI和虚拟UI，其中虚拟UI广泛应用于互联网领域。
探索最受欢迎的jQuery移动UI框架
Feb 27, 2024 pm 12:03 PM
jQuery移动UI框架是一种用于开发移动应用程序的工具，它提供了丰富的界面组件和交互效果，使开发者能够快速构建优秀的移动用户界面。在这篇文章中，我们将探索一些最受欢迎的jQuery移动UI框架，并提供具体的代码示例来帮助读者更好地了解和使用这些框架。1.jQueryMobilejQueryMobile是一个基于HTML5和CSS3的开源移动UI框架，
Android 15 Beta 4 全面测试完成 稳定版发布进入倒计时
Jul 29, 2024 pm 07:57 PM
日前，谷歌正式向符合条件的Pixel智能手机和平板电脑用户推送了Android15Beta4更新，这标志着Android15操作系统已迈入平台稳定阶段，预示着其稳定版将在接下来的几天内正式与全球用户见面。同时，这一进展也为三星电子的Galaxy设备系列加速其OneUI7.0版本的开发进程注入了新的活力。1.[Android15Beta4推广三星OneUI7.0稳定构建](https://www.cnbeta.com/articles/tech/1427022.htm)随着Android15Bet
ux与ui设计的区别是什么
Sep 27, 2022 pm 03:52 PM
ux与ui设计的区别：1、UX让界面更好用，UI让界面更好看；2、UX让用户实现目标，UI让界面提升品牌感；3、UX核心目标引导用户完成任务，UI不是；4、UI和UX的交付成果不一样，UX的输出包括UX体验报告、功能定义、功能规划、项目进度等，而UI交付的包括视觉和交互、视觉设计、品牌设计、动效设计、组件设计和设计语言等等。
ui是什么意思
Mar 14, 2024 pm 03:09 PM
UI，全称用户界面，指的是软件中人机交互、操作逻辑和界面美观的设计。它分为实体UI和虚拟UI，其中虚拟UI广泛应用于移动互联网。好的UI设计不仅能让软件外观有品位，更重要的是让软件操作变得舒适简易，充分体现软件的定位和特点。
