IOS即时聊天UI设计

深藏阁楼爱情的钟 2022-08-27 04:43 257阅读 0赞

//消息实体类ChatMessage.h

\#import <Foundation/Foundation.h>

@interface ChatMessage :NSObject

@property (nonatomic,strong) NSString \*content;

@property (nonatomic,assign) BOOL isSelfSend;

@end

//实现类

\#import "ChatMessage.h"

@implementation ChatMessage

@end

//自定义cell

\#import <UIKit/UIKit.h>

@interface ChatMainViewCell :UITableViewCell

@property (nonatomic,strong) UIImageView \*leftImageView;

@property (nonatomic,strong) UIImageView \*rightImageView;

@property (nonatomic,strong) UILabel \*leftLabel;

@property (nonatomic,strong) UILabel \*rightLabel;

@end

// ChatMainViewCell.m文件

\#import "ChatMainViewCell.h"

@implementation ChatMainViewCell

\- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString \*)reuseIdentifier

self = \[superinitWithStyle:style reuseIdentifier:reuseIdentifier\];

if (self) \{

\[selfmakeView\];

return self;

\- (void)makeView\{

UIImage \*leftImage=\[UIImageimageNamed:@"ReceiverTextNodeBkg.png"\];

UIImage \*rightImage=\[UIImageimageNamed:@"SenderTextNodeBkg.png"\];

//获取图片某像素进行拉伸

leftImage=\[leftImage stretchableImageWithLeftCapWidth:30topCapHeight:35\];

rightImage=\[rightImage stretchableImageWithLeftCapWidth:30topCapHeight:35\];

self.leftImageView=\[\[UIImageViewalloc\]initWithFrame:CGRectMake(10,5, 66,54)\];

self.leftImageView.image=leftImage;

\[self.contentViewaddSubview:self.leftImageView\];

//leftLabel

self.leftLabel=\[\[UILabelalloc\]initWithFrame:CGRectMake(15,5, 10,10)\];

self.leftLabel.font=\[UIFontsystemFontOfSize:14\];

self.leftLabel.backgroundColor=\[UIColorclearColor\];

self.leftLabel.numberOfLines=0;

//字符折行

self.leftLabel.lineBreakMode=NSLineBreakByCharWrapping;

\[self.leftImageViewaddSubview:self.leftLabel\];

//右侧

self.rightImageView=\[\[UIImageViewalloc\]initWithFrame:CGRectMake(320\-76,5, 66,54)\];

self.rightImageView.image=rightImage;

\[self.contentViewaddSubview:self.rightImageView\];

self.rightLabel=\[\[UILabelalloc\]initWithFrame:CGRectMake(15,5, 10,10)\];

self.rightLabel.font=\[UIFontsystemFontOfSize:14\];

self.rightLabel.backgroundColor=\[UIColorclearColor\];

self.rightLabel.numberOfLines=0;

self.rightLabel.lineBreakMode=NSLineBreakByCharWrapping;

\[self.rightImageViewaddSubview:self.rightLabel\];

@end

//viewController.h

\#import <UIKit/UIKit.h>

@interface ViewController :UIViewController<UITableViewDataSource ,

UITableViewDelegate ,UITextFieldDelegate>

UITableView \*\_tableView;

NSMutableArray \*\_dataArray;

UIView \*\_chatView;

UITextField \*\_textField;

@end

//viewController.m

\#import "ViewController.h"

\#import "ChatMessage.h"

\#import "ChatMainViewCell.h"

@implementation ViewController

\- (void)viewDidLoad

\[superviewDidLoad\];

\_dataArray=\[NSMutableArrayarray\];

\_tableView=\[\[UITableViewalloc\]initWithFrame:CGRectMake(0,20, 320,  420)\];

\_tableView.delegate=self;

\_tableView.dataSource=self;

//隐藏表格的分割线

\_tableView.separatorStyle=UITableViewCellSeparatorStyleNone;

\[self.viewaddSubview:\_tableView\];

//聊天面板

\_chatView=\[\[UIViewalloc\]initWithFrame:CGRectMake(0,420, 320,  40)\];

\_chatView.backgroundColor=\[UIColorgrayColor\];

\[self.viewaddSubview:\_chatView\];

//输入信息框

\_textField=\[\[UITextFieldalloc\]initWithFrame:CGRectMake(10,5, 200,30)\];

\_textField.borderStyle=UITextBorderStyleRoundedRect;

\_textField.delegate=self;

\[\_chatView addSubview:\_textField\];

//发送按钮

UIButton \*send=\[UIButtonbuttonWithType:UIButtonTypeRoundedRect\];

send.frame=CGRectMake(250,5, 50, 30);

\[send setTitle:@"发送"forState:UIControlStateNormal\];

\[send addTarget:selfaction:@selector(sendMessage)forControlEvents:UIControlEventTouchUpInside\];

\[\_chatViewaddSubview:send\];

//键盘出现的监听

\[\[NSNotificationCenterdefaultCenter\]addObserver:selfselector:@selector(keyboardWillShow:)name:UIKeyboardWillShowNotificationobject:nil\];

//键盘收起的监听

\[\[NSNotificationCenterdefaultCenter\]addObserver:selfselector:@selector(keyboardWillHide:)name:UIKeyboardWillHideNotificationobject:nil\];

\- (void)keyboardWillShow:(NSNotification \*)noti\{

CGSize size=\[\[noti.userInfoobjectForKey:UIKeyboardFrameEndUserInfoKey\]CGRectValue \].size;

\[UIViewanimateWithDuration:0.25animations:^\{

\_tableView.frame=CGRectMake(0,20, 320, 420\-size.height);

\_chatView.frame=CGRectMake(0,440\-size.height,320, 40);

\}\];

\- (void)keyboardWillHide:(NSNotification \*)noti\{

\_tableView.frame=CGRectMake(0,20, 320, 420);

\_chatView.frame=CGRectMake(0,440, 320, 40);

//键盘收起

\- (BOOL)textFieldShouldReturn:(UITextField \*)textField\{

\[\_textFieldresignFirstResponder\];

return YES;

\- (CGFloat)tableView:(UITableView \*)tableView heightForRowAtIndexPath:(NSIndexPath \*)indexPath\{

ChatMessage \*chat=\[\_dataArrayobjectAtIndex:indexPath.row\];

//计算气泡的拉伸大小

CGSize size=\[chat.contentsizeWithFont:\[UIFontsystemFontOfSize:14.0f\]constrainedToSize:CGSizeMake(250,1000) lineBreakMode:NSLineBreakByCharWrapping\];

return size.height\+30;

\- (NSInteger)tableView:(UITableView \*)tableView numberOfRowsInSection:(NSInteger)section\{

return\_dataArray.count;

\- (UITableViewCell \*)tableView:(UITableView \*)tableView cellForRowAtIndexPath:(NSIndexPath \*)indexPath\{

ChatMainViewCell \*cell=\[tableViewdequeueReusableCellWithIdentifier:@"ID"\];

if (cell==nil) \{

cell=\[\[ChatMainViewCellalloc\]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:@"ID"\];

//隐藏cell被选定

cell.selectionStyle=UITableViewCellSelectionStyleNone;

ChatMessage \*chat=\[\_dataArrayobjectAtIndex:indexPath.row\];

//计算气泡的拉伸大小

CGSize size=\[chat.contentsizeWithFont:\[UIFontsystemFontOfSize:14.0f\]constrainedToSize:CGSizeMake(250,1000) lineBreakMode:NSLineBreakByCharWrapping\];

//自己发送的消息

if (chat.isSelfSend) \{

cell.leftImageView.hidden=YES;

cell.rightImageView.hidden=NO;

cell.rightLabel.text=chat.content;

cell.rightLabel.frame=CGRectMake(10,5, size.width, size.height);

//计算气泡的拉伸

cell.rightImageView.frame=CGRectMake(320\-10\-size.width\-30,5, 30\+size.width,20\+size.height);

\}else\{

//别人发送的

cell.rightImageView.hidden=YES;

cell.leftImageView.hidden=NO;