iOS——tableview高度自适应(简单的聊天界面)
2019-08-09 17:12
1671 查看
难点
- UITableView的高度自适应
- 发送消息后,在最后添加一行新的cell,并更新tableView
具体实现
(iPhone8 plus)
- 首先建立起主要的页面框架,就是tableView,和输入框等。
//创建一个tableaView _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT - 60) style:UITableViewStylePlain]; _tableView.backgroundColor = [UIColor whiteColor]; //设置分割线的style _tableView.separatorStyle = UITableViewCellSeparatorStyleNone; //设置代理 _tableView.delegate = self; _tableView.dataSource = self; //注册 [_tableView registerClass:[ZWYTableViewCell class] forCellReuseIdentifier:cellInIdentifier]; [self.view addSubview:_tableView]; //输入框的设置 _messgeTextField = [[UITextField alloc] init]; _messgeTextField.frame = CGRectMake(0, 0, WIDTH - 20, 45); _messgeTextField.borderStyle = UITextBorderStyleRoundedRect; _messgeTextField.layer.borderWidth = 2; _messgeTextField.layer.borderColor = [UIColor blackColor].CGColor; _messgeTextField.delegate = self; [self.view addSubview:_messgeTextField]; //设置发送Button UIButton *sendButton = [[UIButton alloc] init]; sendButton.frame = CGRectMake(0, 0, 50, 45); [sendButton setTitle:@"发送" forState:UIControlStateNormal]; [sendButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; sendButton.backgroundColor = [UIColor orangeColor]; [sendButton addTarget:self action:@selector(send) forControlEvents:UIControlEventTouchUpInside]; _messgeTextField.rightViewMode = UITextFieldViewModeAlways; _messgeTextField.rightView = sendButton; //将输入框和发送Button添加在一个cell上 UIView *bottomView = [[UIView alloc] initWithFrame:CGRectMake(0, HEIGHT - 60, WIDTH, 60)]; bottomView.backgroundColor = [UIColor colorWithRed:243/255.0 green:243/255.0 blue:243/255.0 alpha:1]; [self.view addSubview:bottomView]; [bottomView addSubview:_messgeTextField];
- 创建数据源,里面是,文字,就是很简单的文字内容
//创建各项数据 -(void)creatData :(NSMutableArray *)messageArray { for (NSString *str in messageArray) { //定义一个字典 NSMutableDictionary *dic = [[NSMutableDictionary alloc] init]; //获取label的高度 CGFloat labheight = [self getWidth:WIDTH / 2 title:str font:[UIFont systemFontOfSize:30]]; //在字典中加入label的高度 [dic setValue:[NSString stringWithFormat:@"%f", labheight] forKey:@"labheight"]; //设置cell的高度(因为头每个聊天信息,都有一个头像,头像大小时已经确定的为50*50) CGFloat height; if (labheight > 30) { height = labheight + 30 ; } else { height = 50.0; } //cell高度 [dic setValue:[NSString stringWithFormat:@"%f", height] forKey:@"cellheight"]; //在字典中加入label中的文字 [dic setValue:str forKey:@"info"]; //将每个label对应的字典加入在数组中 [_dataArray addObject:dic]; } //数据创建完成 }
最好,我们在数据源中就要完成cell的高度的计算
- UILabel的高度计算
//label获取高度的方法 -(CGFloat)getWidth:(CGFloat)width title:(NSString *)title font:(UIFont *)font { UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, width, 0)]; label.text = title; label.font = font; //自适应 label.numberOfLines = 0; [label sizeToFit]; //经过自适应之后的label,已经有新的高度 CGFloat height = label.frame.size.height; return height; }
- 实现TableView的协议
返回数据源中数组的个数
//根据数组中的字典个数,返回row - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return _dataArray.count; }
section默认为1,所以可以不用设置
实现cell
Tips:一般不要在复用池内创建UI类的东西,会影响TableView的性能
//设置cell - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { ZWYTableViewCell *cell = [_tableView dequeueReusableCellWithIdentifier:cellInIdentifier forIndexPath:indexPath]; //这是自己的对话信息 if (indexPath.row % 2 == 0) { [cell getImageName:@"非正2.jpg" getLabelInfo:[[_dataArray objectAtIndex:indexPath.row] objectForKey: @"info"] getHeight:[[_dataArray objectAtIndex:indexPath.row] objectForKey:@"labheight"] andIndexpath:indexPath]; } else { [cell getImageName:@"非正4.jpg" getLabelInfo:[[_dataArray objectAtIndex:indexPath.row] objectForKey: @"info"] getHeight:[[_dataArray objectAtIndex:indexPath.row] objectForKey:@"labheight"] andIndexpath:indexPath]; }//对方的对话信息 return cell; }
- 自定义的cell
在TableViewCell.h文件里面,定义好我们需要的控件
@interface ZWYTableViewCell : UITableViewCell //文字label的位置y,因为不同的消息发送者,label的位置是不同的 @property CGFloat labelleft; //头像的位置y,与文字同理 @property CGFloat imageleft; //label的高度 @property CGFloat labelHeight; @property UIImageView *touimageView; @property UILabel *messageLabel; //是一个方法,get 到一些高度等一些数据。 -(void)getImageName:(NSString *)name getLabelInfo:(NSString *)Info getHeight:(NSString *)labelHeight andIndexpath:(NSIndexPath *)indexPath; @end
高度
//根据数组中字典里cellheight的数值返回cell的高度 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return [[[_dataArray objectAtIndex:indexPath.row] objectForKey:@"cellheight"]floatValue]; }
TableViewCell.m文件里面
//初始化方法 - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier { self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; self.messageLabel = [[UILabel alloc] init]; [self.contentView addSubview:_messageLabel]; self.touimageView = [[UIImageView alloc] init]; [self.contentView addSubview:_touimageView]; return self; } //get方法 - (void)getImageName:(NSString *)name getLabelInfo:(NSString *)Info getHeight:(NSString *)labelHeight andIndexpath:(NSIndexPath *)indexPath { //设置图像 self.touimageView.image = [UIImage imageNamed:name]; self.messageLabel.text = Info; self.messageLabel.numberOfLines = 0; //得到label的高度 _labelHeight = [labelHeight floatValue]; if (indexPath.row % 2 == 0) { _labelleft = [UIScreen mainScreen].bounds.size.width / 2; _imageleft = [UIScreen mainScreen].bounds.size.width - 50; _messageLabel.backgroundColor = [UIColor colorWithRed:236/255.0 green:236/255.0 blue:236/255.0 alpha:1.0]; } else { _labelleft = 60; _imageleft = 0; } } //视图方法 - (void)layoutSubviews { [super layoutSubviews]; _messageLabel.frame = CGRectMake(_labelleft, 10, ([UIScreen mainScreen].bounds.size.width - 150 )/ 2, _labelHeight); _messageLabel.layer.borderColor = [UIColor blackColor].CGColor; _messageLabel.layer.borderWidth = 1; _messageLabel.layer.cornerRadius = 10; _messageLabel.textAlignment = NSTextAlignmentCenter; _touimageView.frame = CGRectMake(_imageleft, 10, 50, 50); }
以上就是tableView的高度自适应中所要用到的东西,
下面就是ViewControll中要实现聊天功能的东西
viewController.m
//在ViewDidLaod中,紧接上面的代码 //初始的聊天信息 _messageArray = [NSMutableArray arrayWithObjects:@"你拍的真不错!", @"谢谢,已关注你", @"好专业的照片,非常喜欢", @"nice", nil]; _dataArray = [NSMutableArray array]; //进行数据的初始化 [self creatData:_messageArray]; //键盘回收事件 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil]; [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil];
发送信息,进行数据的更新
//发送信息 -(void)send { //建立一个可变数组,用来存储,发送的信息 NSMutableArray *array = [NSMutableArray array]; //将输入框的信息加入两次,是要让对方返回一样的信息 [array addObject:_messgeTextField.text]; //继续在数组中加入数据 [self creatData:array]; //数据更新 [_tableView reloadData]; //清空输入框 _messgeTextField.text = @""; //设置滚动到底部, NSIndexPath *indexPath = [NSIndexPath indexPathForRow:(_dataArray.count - 1) inSection:0]; [self.tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionBottom animated:NO]; }
键盘的相关,及细节方面
//键盘出现 -(void)keyboardWillShow : (NSNotification *)notify { //计算键盘高度 CGFloat kbHeight = [[notify.userInfo objectForKey:UIKeyboardFrameEndUserInfoKey] CGRectValue].size.height; CGFloat offset = kbHeight; double duration = [[notify.userInfo objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue]; //视图上移 if (offset > 0) { [UIView animateWithDuration:duration animations:^{ self.view.frame = CGRectMake(0.0f, -offset, self.view.frame.size.width, self.view.frame.size.height); }]; } } //键盘回收,视图下移 -(void)keyboardWillHide: (NSNotification *)notify { double duration = [[notify.userInfo objectForKey:UIKeyboardAnimationCurveUserInfoKey] doubleValue]; [UIView animateWithDuration:duration animations:^{ self.view.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height); }]; } //选择cell取消阴影 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { [tableView deselectRowAtIndexPath:indexPath animated:NO]; }
这样一个简单的聊天界面就做好了
看下效果图
初始时的对话
这是键盘弹出后,视图上移的效果
然后这是,我发送几句话后的效果
会发现,当键盘快要挡住消息时,视图会自动上移。
相关文章推荐
- IOS TableView的Cell高度自适应,UILabel自动换行适应 table里控件位置自适应
- IOS TableView的Cell高度自适应,UILabel自动换行适应
- IOS TableView的Cell高度自适应,UILabel自动换行适应
- IOS TableView的Cell高度自适应,UILabel自动换行适应
- IOS TableView的Cell高度自适应,UILabel自动换行适应
- iOS 改变TableHeadView的高度,tableView自适应
- ios TableView的Cell高度自适应,UILabel自动换行适应
- IOS TableView的Cell高度自适应,UILabel自动换行适应
- IOS TableView的Cell高度自适应,UILabel自动换行适应(转载)
- iOS的 tableView的自适应高度, XML 的 DOM 解析
- iOS 给tableView 每行设置预估行高estimatedRowHeight,达到cell高度的自适应
- IOS TableView的Cell高度自适应,UILabel自动换行适应
- IOS TableView的Cell高度自适应,UILabel自动换行适应
- IOS tableView自适应高度
- iOS 设置 tableView 代理, 注册 cell, 自适应高度.
- iOS tableview自适应高度
- 简单的两句话 轻松搞定tableview的高度自适应
- iOS tableview自适应高度
- IOS TableView的Cell高度自适应,UILabel自动换行适应
- IOS TableView的Cell高度自适应,UILabel自动换行适应