SHARE demo中的聊天页面搭建

首先观察图片进行布局
在这里插入图片描述
主要结构是tableview和textfield
首先tableview的样式不是系统自带的所以进行cell的自定义
观察有两个imageview和三个lable

自定义cell.h
@interface sixinTableViewCell : UITableViewCell
@property UIImageView * rightImageView;
@property UIImageView * leftImageView;
@property UILabel* rightTextView;
@property UILabel * leftTextView;
@property UILabel *dateLabel;
@end
自定义cell.m文件【一般进行cell的自定义是会将frame一起设置，不过由于聊天室的界面的frame不是写死的，所以放在外面】
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if(self)
    {
        _leftImageView = [[UIImageView alloc]init];
        _rightImageView = [[UIImageView alloc]init];
        _leftTextView = [[UILabel alloc]init];
        _rightTextView = [[UILabel alloc]init];
        _dateLabel = [[UILabel alloc]init];
        [self.contentView addSubview:_dateLabel];
        [self.contentView addSubview:_leftTextView];
         [self.contentView addSubview:_rightTextView];
         [self.contentView addSubview:_leftImageView];
         [self.contentView addSubview:_rightImageView]; 
    }
    return self;
}
聊天室页面
首先进行tableview和textfield的布局并加入到视图

_arryleftsizewidh = [[NSMutableArray alloc]init];
_arryrightsizewidh = [[NSMutableArray alloc]init];
_arryleftsizeheight = [[NSMutableArray alloc]init];
_arryrightsizeheight = [[NSMutableArray alloc]init];
_tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 580) style:UITableViewStyleGrouped];
_tableView.delegate = self;
_tableView.dataSource = self;
_shuruTextField.delegate = self;
_shuruTextField = [[UITextField alloc]initWithFrame:CGRectMake(30, 600, 290, 40)];
[self.view addSubview:_shuruTextField];
_shuruTextField.backgroundColor = [UIColor whiteColor];
UIButton *sendButton = [[UIButton alloc]initWithFrame:CGRectMake(340, 610, 30, 30)];
[sendButton setTitle:@"发送" forState:UIControlStateNormal];
[sendButton setTintColor:[UIColor whiteColor]];
[self.view addSubview:_tableView];
[self.view addSubview:sendButton];

然后进行数据的处理，在此之我们需要写一个方法进行CGSize的计算
这个方法很重要就是通过给定的字体的内容，字体的大小，和区域为你计算CGSize

-(CGSize)size:(NSString*)text font:(UIFont*)font maxSize:(CGSize)maxSize
{
    NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys:font,NSFontAttributeName ,nil];
    return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil].size;
}

那接下来就可以进行数据的处理了，由于CGSize是结构体，不能之间存储于数组中，就分成了两个进行存储

   _arryright = [[NSMutableArray alloc]initWithObjects:@"你拍的真不错",@"好专业的照片，非常喜欢这种风格，期待你更好的作品", nil];
    _arryM = [[NSMutableArray alloc]initWithObjects:@"谢谢，已关注你",@"嗯嗯，好的", nil];
     _arryleftsizewidh = [[NSMutableArray alloc]init];
    _arryrightsizewidh = [[NSMutableArray alloc]init];
    _arryleftsizeheight = [[NSMutableArray alloc]init];
    _arryrightsizeheight = [[NSMutableArray alloc]init];
    for (NSString * str in _arryright) {
        CGSize sizeright = [self size:str font:[UIFont systemFontOfSize:14.0] maxSize:CGSizeMake(375/2-70 , MAXFLOAT)];
        
        NSNumber *num = [NSNumber numberWithFloat:sizeright.width];
        NSNumber *num1 = [NSNumber numberWithFloat:sizeright.height];
        [_arryrightsizeheight addObject:num1];
        [_arryrightsizewidh addObject:num];
    }
    for (NSString * str in _arryM) {
        CGSize sizeleft = [self size:str font:[UIFont systemFontOfSize:14.0] maxSize:CGSizeMake(372/2-70, MAXFLOAT)];
        NSNumber *num = [NSNumber numberWithFloat:sizeleft.width];
        NSNumber *num1 = [NSNumber numberWithFloat:sizeleft.height];
        [_arryleftsizeheight addObject:num1];
        [_arryleftsizewidh addObject:num];
        _shuruTextField.delegate = self;
    }
    然后聊天使的输入内容进行获取并且添加到数组中然后计算CGSize在添加到存储Frame的数组中
      [sendButton addTarget:self action:@selector(send) forControlEvents:UIControlEventTouchUpInside];//添加点击事件
      -(void)send
{
    [_arryM addObject:_shuruTextField.text];
    [_arryright addObject:_shuruTextField.text];
    
    CGSize sizeright = [self size:_shuruTextField.text font:[UIFont systemFontOfSize:14.0] maxSize:CGSizeMake(375/2-70 , MAXFLOAT)];
    
    NSNumber *num = [NSNumber numberWithFloat:sizeright.width];
    NSNumber *num1 = [NSNumber numberWithFloat:sizeright.height];
    [_arryrightsizeheight addObject:num1];
    [_arryrightsizewidh addObject:num];


    CGSize sizeleft = [self size:_shuruTextField.text font:[UIFont systemFontOfSize:14.0] maxSize:CGSizeMake(372/2-70, MAXFLOAT)];
    NSNumber *num3 = [NSNumber numberWithFloat:sizeleft.width];
    NSNumber *num4 = [NSNumber numberWithFloat:sizeleft.height];
    [_arryleftsizeheight addObject:num4];
    [_arryleftsizewidh addObject:num3];
NSLog(@"%@",_arryleftsizeheight[2]);
 NSLog(@"%@",_arryM[2]);
_shuruTextField.text = @"";
[_tableView reloadData];
}

获取了数据现在就就可以进行tableview的书写了

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{   
    return _arryM.count;//这里返回的section就是数组内存储的个数
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 1;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *ID = @"123";
    sixinTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    if(cell==nil)
    {
     cell = [[sixinTableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
    }
    if(indexPath.section>=3)
    {	//这里就是进行tableview的滚动效果
        [self push:tableView didSelectRowAtIndexPath:indexPath];
    }
    //每一个cell的计算就是从右开始布局然后在右的基础上进行增加高度和宽度
    cell.dateLabel.frame = CGRectMake(120, 10, 200, 10) ;
    NSData*data =[NSData data];//获取时间
    NSDateFormatter *format = [[NSDateFormatter alloc] init];
    [format setDateFormat:@"YYYY/MM/dd hh:mm:ss"];
    NSString *sDate = [format stringFromDate:date];
    NSLog(@"%@",sDate);
    cell.dateLabel.text = sDate;
    cell.dateLabel.textColor = [UIColor blackColor];
    cell.dateLabel.font = [UIFont systemFontOfSize:10];
    cell.rightImageView.image = [UIImage imageNamed:@"sixin_img1.png"];
    cell.rightImageView.frame = CGRectMake(315, 40, 40, 40);
    CGSize textSizeright;
    textSizeright.height =[_arryrightsizeheight[indexPath.section] floatValue];
    textSizeright.width = [_arryrightsizewidh[indexPath.section] floatValue];
    CGSize textSizeleft;
    textSizeleft.height =[_arryleftsizeheight[indexPath.section] floatValue];
    textSizeleft.width = [_arryleftsizewidh[indexPath.section] floatValue];
    cell.rightTextView.frame = CGRectMake(375/2, 40, textSizeright.width, textSizeright.height);
    cell.rightTextView.text = _arryright[indexPath.section];
    cell.leftImageView.frame = CGRectMake(10, textSizeright.height+60, 40, 40);
    cell.leftImageView.image = [UIImage imageNamed:@"sixin_img2.png"];
    cell.leftTextView.text =_arryM[indexPath.section];
    cell.leftTextView.frame =CGRectMake(60, textSizeright.height+60, textSizeleft.width, textSizeleft.height);
    cell.leftTextView.font = [UIFont systemFontOfSize:14.0];
    cell.leftTextView.numberOfLines = 0;
    cell.rightTextView.numberOfLines = 0;
    cell.rightTextView.font = [UIFont systemFontOfSize:14.0];
    return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
//每一个单元格的高度计算就是获取存储CGSize数组的高度加上固定行高进行计算
    CGSize right;
  right.height =[_arryrightsizeheight[indexPath.section] floatValue];
    CGSize left;
    left.height =[_arryleftsizeheight[indexPath.section] floatValue];
    return (left.height+right.height+80);
}

效果图
在这里插入图片描述

向景乐

发布了34 篇原创文章 · 获赞 4 · 访问量 748

私信关注

SHARE demo中的聊天页面搭建

猜你喜欢