ios绘制聊天框

第一次在csdn发文章，怎么说也要来点有用点的：） 手写了一段模仿手机QQ和微信的聊天页面（好像现在手机端聊天都是这种模式），具体样式还需要优化调整，基本是完成了绘制，使用到了UIScrollView，三角形的绘图，字符串长度的判断，自适应屏幕宽度来调整控件位置等技巧，调用也十分简单。

先展示一下样子：

直接上代码，screenWidth，dataArr，self.chatScrollView是在.h文件中定义～ 

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    screenWidth = [UIScreen mainScreen].bounds.size.width;
    
    NSDictionary *fstDic = [NSDictionary dictionaryWithObjectsAndKeys:@"weibo.png",@"imgName",@"卖家是上帝",@"name",@"卖家是上帝" @"我在专卖店里，正好打折全部有货，我只能带20个，快点抢购！",@"text", nil];
    NSDictionary *sndDic = [NSDictionary dictionaryWithObjectsAndKeys:@"weibo.png",@"imgName",@"屁股君",@"name",@"已经购入！上帝！已经购入！上帝！已经购入！上帝！已经购入！上帝！已经购入！上帝！",@"text", nil];
    NSDictionary *thdDic = [NSDictionary dictionaryWithObjectsAndKeys:@"timeline.png",@"imgName",@"我",@"name",@"哪家店？我自己去！！！",@"text", nil];
    NSDictionary *fthDic = [NSDictionary dictionaryWithObjectsAndKeys:@"timeline.png",@"imgName",@"我",@"name",@"老板吧日期拍下，谢谢！！",@"text", nil];
    NSDictionary *fifDic = [NSDictionary dictionaryWithObjectsAndKeys:@"timeline.png",@"imgName",@"我",@"name",@"我要买，我要买！！！我的我的，都是我的！！！我的我的，都是我的！！！我的我的，都是我的！！！我的我的，都是我的！！！我的我的，都是我的！！！我的我的，都是我的！！！",@"text", nil];
    
    dataArr = [NSMutableArray arrayWithObjects:fstDic,sndDic,thdDic,fthDic,fifDic, nil];
    
    int yPosition = 0;
    for (int i=0; i<[dataArr count]; i++) {
        UIView *cellView;
        if ([[[dataArr objectAtIndex:i] objectForKey:@"name"] isEqualToString:@"我"]) {
            cellView = [self drawChatCellRight:yPosition imgNameStr:[[dataArr objectAtIndex:i] objectForKey:@"imgName"] nameStr:[[dataArr objectAtIndex:i] objectForKey:@"name"] text:[[dataArr objectAtIndex:i] objectForKey:@"text"]];
        }else{
            cellView = [self drawChatCellLeft:yPosition imgNameStr:[[dataArr objectAtIndex:i] objectForKey:@"imgName"] nameStr:[[dataArr objectAtIndex:i] objectForKey:@"name"] text:[[dataArr objectAtIndex:i] objectForKey:@"text"]];
        }
        [self.chatScrollView addSubview:cellView];
        yPosition += cellView.bounds.size.height+5;
        [self.chatScrollView setContentSize:CGSizeMake(screenWidth, yPosition)];
    }
}

下面是绘制cell的方法：

//返回字符串的长度，针对中英文混合字符串长度
- (int)convertToInt:(NSString*)strtemp
{
    int strlength = 0;
    char* p = (char*)[strtemp cStringUsingEncoding:NSUnicodeStringEncoding];
    for (int i=0 ; i<[strtemp lengthOfBytesUsingEncoding:NSUnicodeStringEncoding] ;i++) {
        if (*p) {
            p++;
            strlength++;
        }
        else {
            p++;
        }
        
    }
    return strlength;
}

//聊天cell的绘制
//头像在左边的，接受到的他人的聊天信息
-(UIView *)drawChatCellLeft:(int)yPosition imgNameStr:(NSString *)imgNameStr nameStr:(NSString *)nameStr text:(NSString *)text{
    int length = [self convertToInt:text];
    int line = (int)length/20;
    //cell的绘制
    UIView *cellView = [[UIView alloc] initWithFrame:CGRectMake(0, yPosition, screenWidth,35+line*10+20)];
    cellView.backgroundColor = [UIColor clearColor];
    
    //头像绘制
    UIImageView *headImgView = [[UIImageView alloc] initWithFrame:CGRectMake(5, 5, 50, 50)];
    headImgView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@",imgNameStr]];
    [cellView addSubview:headImgView];
    
    //暱称绘制
    UILabel *nameLabel = [[UILabel alloc] initWithFrame:CGRectMake(70, 5, 100, 20)];
    nameLabel.font = [UIFont fontWithName:@"Arial" size:13.0]; //Helvetica-Bold
    nameLabel.text = nameStr;
    [cellView addSubview:nameLabel];
    
    //文本框绘制
    UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(70, 30, 230, line*10+20)];
    textLabel.backgroundColor = [UIColor whiteColor];
    textLabel.font = [UIFont fontWithName:@"Arial" size:13.0];
    textLabel.text = text;
    textLabel.numberOfLines = line;
    textLabel.layer.borderWidth = 1;
    textLabel.layer.borderColor = [UIColor lightGrayColor].CGColor;
    textLabel.layer.cornerRadius = 8;
    textLabel.clipsToBounds = YES;
    [cellView addSubview:textLabel];
    
    //－－－－画三角形－－－－
    UIGraphicsBeginImageContext(cellView.bounds.size);
    //设置背景颜色
    [[UIColor clearColor]set];
    UIRectFill([cellView bounds]);
    //拿到当前视图准备好的画板
    CGContextRef context = UIGraphicsGetCurrentContext();
    //利用path进行绘制三角形
    CGContextBeginPath(context);//标记
    CGContextMoveToPoint(context, 71, 36);//设置起点
    CGContextAddLineToPoint(context, 58, 44);
    CGContextAddLineToPoint(context, 71, 52);
//    CGContextClosePath(context);//路径结束标志，不写默认封闭
    [[UIColor whiteColor] setFill]; //设置填充色
    [[UIColor lightGrayColor] setStroke]; //设置边框颜色
    CGContextDrawPath(context, kCGPathFillStroke);//绘制路径path
    //从Context中获取图像，并显示在界面上
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    UIImageView *gifTriangleView = [[UIImageView alloc] initWithImage:img];
    [cellView addSubview:gifTriangleView];
    //－－－－画三角形－－－－
    
    return cellView;
}

//头像在右边的，本人发出的聊天信息
-(UIView *)drawChatCellRight:(int)yPosition imgNameStr:(NSString *)imgNameStr nameStr:(NSString *)nameStr text:(NSString *)text{
    int length = [self convertToInt:text];
    int line = (int)length/20;
    //cell的绘制
    UIView *cellView = [[UIView alloc] initWithFrame:CGRectMake(0, yPosition, screenWidth,35+line*10+20)];
    cellView.backgroundColor = [UIColor clearColor];
    
    //头像绘制
    UIImageView *headImgView = [[UIImageView alloc] initWithFrame:CGRectMake(screenWidth-55, 5, 50, 50)];
    headImgView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@",imgNameStr]];
    [cellView addSubview:headImgView];
    
    //暱称绘制
    UILabel *nameLabel = [[UILabel alloc] initWithFrame:CGRectMake(screenWidth-70-100, 5, 100, 20)];
    nameLabel.font = [UIFont fontWithName:@"Arial" size:13.0]; //Helvetica-Bold
    nameLabel.text = nameStr;
    nameLabel.textAlignment = NSTextAlignmentRight; //暱称右对齐
    [cellView addSubview:nameLabel];
    
    //文本框绘制
    int textLabelWidth = 0;
    if (length<30) {
        textLabelWidth = length*7;
    }else{
        textLabelWidth = 230;
    }
    UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(screenWidth-70-textLabelWidth, 30, textLabelWidth, line*10+20)];
    textLabel.backgroundColor = [UIColor whiteColor];
//    textLabel.textAlignment = NSTextAlignmentRight; //文本右对齐
    textLabel.font = [UIFont fontWithName:@"Arial" size:13.0];
    textLabel.text = text;
    textLabel.numberOfLines = line;
    textLabel.layer.borderWidth = 1;
    textLabel.layer.borderColor = [UIColor lightGrayColor].CGColor;
    textLabel.layer.cornerRadius = 8;
    textLabel.clipsToBounds = YES;
    [cellView addSubview:textLabel];
    
    //－－－－画三角形－－－－
    UIGraphicsBeginImageContext(cellView.bounds.size);
    //设置背景颜色
    [[UIColor clearColor]set];
    UIRectFill([cellView bounds]);
    //拿到当前视图准备好的画板
    CGContextRef context = UIGraphicsGetCurrentContext();
    //利用path进行绘制三角形
    CGContextBeginPath(context);//标记
    CGContextMoveToPoint(context, screenWidth-71, 36);//设置起点
    CGContextAddLineToPoint(context, screenWidth-71+13, 44);
    CGContextAddLineToPoint(context, screenWidth-71, 52);
    //    CGContextClosePath(context);//路径结束标志，不写默认封闭
    [[UIColor whiteColor] setFill]; //设置填充色
    [[UIColor lightGrayColor] setStroke]; //设置边框颜色
    CGContextDrawPath(context, kCGPathFillStroke);//绘制路径path
    //从Context中获取图像，并显示在界面上
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    UIImageView *gifTriangleView = [[UIImageView alloc] initWithImage:img];
    [cellView addSubview:gifTriangleView];
    //－－－－画三角形－－－－
    
    return cellView;
}

欢迎各位攻城狮们来讨论