IOS高访微信聊天对话界面(sizeWithFont:constrainedToSize和stretchableImageWithLeftCapWidth的使用)

大家好，百忙之中，抽出点空，写个微博，话说好久没写。

最近项目中有碰到写类似微信聊天界面上的效果，特整理了一下，写了一个小的Demo，希望给没头绪的同学们一个参考！

下载地址：https://files.cnblogs.com/ios8/WeixinDeom.zip

Demo下载地址：http://download.csdn.net/detail/rhljiayou/6524347

先看一下效果图：左图为截取微信的，右图是本demo的效果

     

 

再看一下主要代码实现：

  1. @implementation ViewController  
  2.   
  3. - (void)viewDidLoad  
  4. {  
  5.     [super viewDidLoad];  
  6.       
  7.     NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys:@"weixin",@"name",@"微信团队欢迎你。很高兴你开启了微信生活，期待能为你和朋友们带来愉快的沟通体检。",@"content", nil];  
  8.     NSDictionary *dict1 = [NSDictionary dictionaryWithObjectsAndKeys:@"rhl",@"name",@"hello",@"content", nil];  
  9.     NSDictionary *dict2 = [NSDictionary dictionaryWithObjectsAndKeys:@"rhl",@"name",@"0",@"content", nil];  
  10.     NSDictionary *dict3 = [NSDictionary dictionaryWithObjectsAndKeys:@"weixin",@"name",@"谢谢反馈，已收录。",@"content", nil];  
  11.     NSDictionary *dict4 = [NSDictionary dictionaryWithObjectsAndKeys:@"rhl",@"name",@"0",@"content", nil];  
  12.     NSDictionary *dict5 = [NSDictionary dictionaryWithObjectsAndKeys:@"weixin",@"name",@"谢谢反馈，已收录。",@"content", nil];  
  13.     NSDictionary *dict6 = [NSDictionary dictionaryWithObjectsAndKeys:@"rhl",@"name",@"大数据测试，长数据测试，大数据测试，长数据测试，大数据测试，长数据测试，大数据测试，长数据测试，大数据测试，长数据测试，大数据测试，长数据测试。",@"content", nil];  
  14.       
  15.     _resultArray = [NSMutableArray arrayWithObjects:dict,dict1,dict2,dict3,dict4,dict5,dict6, nil];  
  16.       
  17.   
  18. }  
  19.   
  20. - (void)didReceiveMemoryWarning  
  21. {  
  22.     [super didReceiveMemoryWarning];  
  23.     // Dispose of any resources that can be recreated.  
  24. }  
  25.   
  26. //泡泡文本  
  27. - (UIView *)bubbleView:(NSString *)text from:(BOOL)fromSelf withPosition:(int)position{  
  28.       
  29.     //计算大小  
  30.     UIFont *font = [UIFont systemFontOfSize:14];  
  31.     CGSize size = [text sizeWithFont:font constrainedToSize:CGSizeMake(180.0f, 20000.0f) lineBreakMode:NSLineBreakByWordWrapping];  
  32.       
  33.     // build single chat bubble cell with given text  
  34.     UIView *returnView = [[UIView alloc] initWithFrame:CGRectZero];  
  35.     returnView.backgroundColor = [UIColor clearColor];  
  36.       
  37.     //背影图片  
  38.     UIImage *bubble = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:fromSelf?@"SenderAppNodeBkg_HL":@"ReceiverTextNodeBkg" ofType:@"png"]];  
  39.       
  40.     UIImageView *bubbleImageView = [[UIImageView alloc] initWithImage:[bubble stretchableImageWithLeftCapWidth:floorf(bubble.size.width/2) topCapHeight:floorf(bubble.size.height/2)]];  
  41.     NSLog(@"%f,%f",size.width,size.height);  
  42.       
  43.       
  44.     //添加文本信息  
  45.     UILabel *bubbleText = [[UILabel alloc] initWithFrame:CGRectMake(fromSelf?15.0f:22.0f, 20.0f, size.width+10, size.height+10)];  
  46.     bubbleText.backgroundColor = [UIColor clearColor];  
  47.     bubbleText.font = font;  
  48.     bubbleText.numberOfLines = 0;  
  49.     bubbleText.lineBreakMode = NSLineBreakByWordWrapping;  
  50.     bubbleText.text = text;  
  51.       
  52.     bubbleImageView.frame = CGRectMake(0.0f, 14.0f, bubbleText.frame.size.width+30.0f, bubbleText.frame.size.height+20.0f);  
  53.       
  54.     if(fromSelf)  
  55.         returnView.frame = CGRectMake(320-position-(bubbleText.frame.size.width+30.0f), 0.0f, bubbleText.frame.size.width+30.0f, bubbleText.frame.size.height+30.0f);  
  56.     else  
  57.         returnView.frame = CGRectMake(position, 0.0f, bubbleText.frame.size.width+30.0f, bubbleText.frame.size.height+30.0f);  
  58.       
  59.     [returnView addSubview:bubbleImageView];  
  60.     [returnView addSubview:bubbleText];  
  61.       
  62.     return returnView;  
  63. }  
  64.   
  65. //泡泡语音  
  66. - (UIView *)yuyinView:(NSInteger)logntime from:(BOOL)fromSelf withIndexRow:(NSInteger)indexRow  withPosition:(int)position{  
  67.       
  68.     //根据语音长度  
  69.     int yuyinwidth = 66+fromSelf;  
  70.       
  71.     UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];  
  72.     button.tag = indexRow;  
  73.     if(fromSelf)  
  74.         button.frame =CGRectMake(320-position-yuyinwidth, 10, yuyinwidth, 54);  
  75.     else  
  76.         button.frame =CGRectMake(position, 10, yuyinwidth, 54);  
  77.       
  78.     //image偏移量  
  79.     UIEdgeInsets imageInsert;  
  80.     imageInsert.top = -10;  
  81.     imageInsert.left = fromSelf?button.frame.size.width/3:-button.frame.size.width/3;  
  82.     button.imageEdgeInsets = imageInsert;  
  83.       
  84.     [button setImage:[UIImage imageNamed:fromSelf?@"SenderVoiceNodePlaying":@"ReceiverVoiceNodePlaying"] forState:UIControlStateNormal];  
  85.     UIImage *backgroundImage = [UIImage imageNamed:fromSelf?@"SenderVoiceNodeDownloading":@"ReceiverVoiceNodeDownloading"];  
  86.     backgroundImage = [backgroundImage stretchableImageWithLeftCapWidth:20 topCapHeight:0];  
  87.     [button setBackgroundImage:backgroundImage forState:UIControlStateNormal];  
  88.       
  89.     UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(fromSelf?-30:button.frame.size.width, 0, 30, button.frame.size.height)];  
  90.     label.text = [NSString stringWithFormat:@"%d''",logntime];  
  91.     label.textColor = [UIColor grayColor];  
  92.     label.font = [UIFont systemFontOfSize:13];  
  93.     label.textAlignment = NSTextAlignmentCenter;  
  94.     label.backgroundColor = [UIColor clearColor];  
  95.     [button addSubview:label];  
  96.       
  97.     return button;  
  98. }  
  99.   
  100. #pragma UITableView  
  101.   
  102. - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView  
  103. {  
  104.     return 1;  
  105. }  
  106.   
  107. -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section  
  108. {  
  109.     return _resultArray.count;  
  110. }  
  111.   
  112. -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath  
  113. {  
  114.     NSDictionary *dict = [_resultArray objectAtIndex:indexPath.row];  
  115.     UIFont *font = [UIFont systemFontOfSize:14];  
  116.     CGSize size = [[dict objectForKey:@"content"] sizeWithFont:font constrainedToSize:CGSizeMake(180.0f, 20000.0f) lineBreakMode:NSLineBreakByWordWrapping];  
  117.       
  118.     return size.height+44;  
  119. }  
  120.   
  121. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath  
  122. {  
  123.       
  124.     static NSString *CellIdentifier = @"Cell";  
  125.     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];  
  126.     if (cell == nil) {  
  127.         cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];  
  128.         cell.selectionStyle = UITableViewCellSelectionStyleNone;  
  129.           
  130.     }else{  
  131.         for (UIView *cellView in cell.subviews){  
  132.             [cellView removeFromSuperview];  
  133.         }  
  134.     }  
  135.       
  136.     NSDictionary *dict = [_resultArray objectAtIndex:indexPath.row];  
  137.       
  138.     //创建头像  
  139.     UIImageView *photo ;  
  140.     if ([[dict objectForKey:@"name"]isEqualToString:@"rhl"]) {  
  141.         photo = [[UIImageView alloc]initWithFrame:CGRectMake(320-60, 10, 50, 50)];  
  142.         [cell addSubview:photo];  
  143.         photo.image = [UIImage imageNamed:@"photo1"];  
  144.           
  145.         if ([[dict objectForKey:@"content"] isEqualToString:@"0"]) {  
  146.             [cell addSubview:[self yuyinView:1 from:YES withIndexRow:indexPath.row withPosition:65]];  
  147.                
  148.               
  149.         }else{  
  150.             [cell addSubview:[self bubbleView:[dict objectForKey:@"content"] from:YES withPosition:65]];  
  151.         }  
  152.           
  153.     }else{  
  154.         photo = [[UIImageView alloc]initWithFrame:CGRectMake(10, 10, 50, 50)];  
  155.         [cell addSubview:photo];  
  156.         photo.image = [UIImage imageNamed:@"photo"];  
  157.           
  158.         if ([[dict objectForKey:@"content"] isEqualToString:@"0"]) {  
  159.             [cell addSubview:[self yuyinView:1 from:NO withIndexRow:indexPath.row withPosition:65]];  
  160.         }else{  
  161.             [cell addSubview:[self bubbleView:[dict objectForKey:@"content"] from:NO withPosition:65]];  
  162.         }  
  163.     }  
  164.       
  165.     return cell;  
  166.       
  167. }  
  168.   
  169. - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath  
  170. {  
  171.       
  172. }  
  173.   
  174. @end  


其实很简单，主要说一下两个知识点，重要的两个知识点就能写出完美的泡泡对话聊天！

 

第一个是NSString中的一个方法：

 

- (CGSize)sizeWithFont:(UIFont *)font constrainedToSize:(CGSize)size lineBreakMode:(NSLineBreakMode)lineBreakMode;

根据文本内容，算出所需要的大小CGSize；

第二个是UIImage中的一个方法：

 

- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;

这里有几遍文章供大家参考这个方法的使用：
http://blog.csdn.net/lixing333/article/details/7589281

http://blog.csdn.net/w122079514/article/details/7848980

http://www.cnblogs.com/bandy/archive/2012/04/25/2469369.html

 

ok！完美，perfect！

posted @ 2013-11-09 17:53  苹果吧  阅读(32817)  评论(0)  编辑  收藏  举报