ios绘制聊天框

ios绘制聊天框"/>

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)];}
}

//返回字符串的长度，针对中英文混合字符串长度
- (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-BoldnameLabel.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-BoldnameLabel.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;
}