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

歡迎各位攻城獅們來討論