聊天界面搭建及搜索模块

预览效果图:

聊天界面以及搜索模块

上图中的聊天软件主要完成了一下四项功能:

a.消息文本以气泡的形似显示在界面上,一行一个气泡

b.在textField中输入发出的消息文本,可以以气泡形式显示在界面上

c.编辑消息文本时键盘弹起,此时界面所有控件同步上移

d.搜索模块完成消息文本的搜索


====聊天气泡的创建====

主控制器GYViewController中拖拽表视图UITableView,cell为自定义GYMessageCell,每行气泡的大小取决于消息文本的大小,气泡的样式以及布局则取决于消息文本的来源,因此GYMessageCell在设计时对外公开属性为GYMessage,由GYMessage外部传入相关属性。

数据模型类GYMessage中对外公开属性:

(1)NSString* content    用来存放消息文本;

(2)BOOL fromMe   用来标知消息文本来源,是发出还是接收。

//确定文本的高度,给出一个范围值

CGRect rectOfText=CGRectMake(0, 0, MAX_WIDTH_OF_TEXT, 999);

//根据给定的范围以及text计算label的尺寸,这肯定是个变量

rectOfText=[self.label

textRectForBounds:rectOfText limitedToNumberOfLines:0];

ps.

由rectOfText可推算出气泡的大小以及坐标,主要抓住几个不变量:label在气泡中的上下左右边距;气泡的尾巴与屏幕的距离;气泡与cell的上下边距。

气泡的图片我是做了九切片处理,保证其放大缩小都不失真;由于cell的高度是根据气泡的大小变化的,所以还需调用协议方法处理下行高。


====发出的消息文本气泡显示====

textField选择响应事件为did end on exit,即编辑完成后点击return后键盘收起,响应事件:

- (IBAction)sendMessage:(UITextField *)sender {

if (self.textField.text.length>0) {

GYMessage* newMessage=[[GYMessage alloc]init];

newMessage.content=self.textField.text;

newMessage.fromMe=YES;

self.textField.text=@"";  //清空文本框

//数据保存到GYMessage类数组self.allMessages中

[self.allMessages addObject:newMessage];

//更新表格,针对单个位置的方法insertRowsAtIndexPaths

NSIndexPath* indexPath=[NSIndexPath

indexPathForRow:self.allMessages.count-1 inSection:0];

[self.tableView insertRowsAtIndexPaths:

@[indexPath] withRowAnimation:UITableViewRowAnimationBottom];

}  }


====键盘通知模式====

UIKeyboardWillShowNotification以及UIKeyboardWillHideNotification为系统自带的通知内容,在键盘弹出和收起时自动post,则需要去NSNotificationCenter注册以上两种模式的观察者,在观察者响应方法中改变界面控件的布局。

系统自带notification有userInfo属性,可以通过查看该属性获取键盘弹起或收起时的具体信息,比如notification.userInfo[UIKeyboardFrameEndUserInfoKey]可知键盘的frame属性值,从而可依据设计其他控件的布局。

在需要键盘通知处理的界面切换时切记remove观察者,养成好习惯。

//注册键盘通知

-(void)viewWillAppear:(BOOL)animated{

[super viewWillAppear:animated];

[[NSNotificationCenter defaultCenter]

addObserver:self

selector:@selector(openKeyboard:)

name:UIKeyboardWillShowNotification object:nil];

[[NSNotificationCenter defaultCenter]

addObserver:self

selector:@selector(closeKeyboard:)

name:UIKeyboardWillHideNotification object:nil];

}

//取消键盘通知

-(void)viewDidDisappear:(BOOL)animated{

[super viewDidDisappear:animated];

[[NSNotificationCenter defaultCenter]

removeObserver:self name:UIKeyboardWillShowNotification object:nil];

[[NSNotificationCenter defaultCenter]

removeObserver:self name:UIKeyboardWillHideNotification object:nil];

}


====搜索功能模块====

创建GYSearchTableViewController负责搜索结果的表视图显示,同时还需要在主控制器GYViewController中设置UISearchController,通过UISearchController
将主控制器中的显示全部消息的表视图与搜索结果表视图联系起来。首先主控制器需要遵守协议<UISearchBarDelegate,UISearchControllerDelegate,

UISearchResultsUpdating>   配置UISearchController:

self.searchController = [[UISearchController  alloc]

initWithSearchResultsController:self.searchResultViewController];

self.searchController.searchResultsUpdater = self;

self.searchResultViewController.tableView.delegate = self;

self.searchController.delegate = self;

self.searchController.searchBar.delegate = self;

主控制器中需要完成以下UISearchResultsUpdating协议的required方法:

-(void)updateSearchResultsForSearchController:(UISearchController *)searchController{

NSString *searchText = searchController.searchBar.text;

NSMutableArray *searchResults = [NSMutableArray array];

for (TRMessage* msg in self.allMessages) {

if ([msg.content rangeOfString:searchText].length>0) {

[searchResults addObject:msg];} }

//遍历后将符合条件的信息通过GYSearchTableViewController的外部属性传入,再刷新数据

self.searchResultViewController.resultArray = searchResults;

[self.searchResultViewController.tableView reloadData]; }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,997评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,603评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,359评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,309评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,346评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,258评论 1 300
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,122评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,970评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,403评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,596评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,769评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,464评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,075评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,705评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,848评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,831评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,678评论 2 354

推荐阅读更多精彩内容

  • *7月8日上午 N:Block :跟一个函数块差不多,会对里面所有的内容的引用计数+1,想要解决就用__block...
    炙冰阅读 2,486评论 1 14
  • 通知中心(NSNotificationCenter) 通知(NSNotification) 一个完整的通知一般包含...
    JonesCxy阅读 494评论 0 1
  • 摘要: IOS文本输入框的使用方法总结。 (1)---------------------------------...
    翻山越岭的另一边阅读 8,386评论 1 5
  • 如果不是一次偶然的机会,我完全不知道江西有武宁,武宁有一座江西艺术专修学院以及庐山艺术特训营;如果不是听过余工半小...
    木木的糖饼阅读 789评论 0 2
  • 在微信小程序中,要显示一张图片,有两种图片加载方式: 加载本地图片 加载网络图片 加载本地图片 加载网络图片 微信...
    乡水情缘阅读 9,019评论 0 1