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

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

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

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

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





再看一下主要代码实现：

[cpp] view
plaincopy





@implementation ViewController

- (void)viewDidLoad

{

[super viewDidLoad];

NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys:@"weixin",@"name",@"微信团队欢迎你。很高兴你开启了微信生活，期待能为你和朋友们带来愉快的沟通体检。",@"content", nil];

NSDictionary *dict1 = [NSDictionary dictionaryWithObjectsAndKeys:@"rhl",@"name",@"hello",@"content", nil];

NSDictionary *dict2 = [NSDictionary dictionaryWithObjectsAndKeys:@"rhl",@"name",@"0",@"content", nil];

NSDictionary *dict3 = [NSDictionary dictionaryWithObjectsAndKeys:@"weixin",@"name",@"谢谢反馈，已收录。",@"content", nil];

NSDictionary *dict4 = [NSDictionary dictionaryWithObjectsAndKeys:@"rhl",@"name",@"0",@"content", nil];

NSDictionary *dict5 = [NSDictionary dictionaryWithObjectsAndKeys:@"weixin",@"name",@"谢谢反馈，已收录。",@"content", nil];

NSDictionary *dict6 = [NSDictionary dictionaryWithObjectsAndKeys:@"rhl",@"name",@"大数据测试，长数据测试，大数据测试，长数据测试，大数据测试，长数据测试，大数据测试，长数据测试，大数据测试，长数据测试，大数据测试，长数据测试。",@"content", nil];

_resultArray = [NSMutableArray arrayWithObjects:dict,dict1,dict2,dict3,dict4,dict5,dict6, nil];

}

- (void)didReceiveMemoryWarning

{

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

//泡泡文本

- (UIView *)bubbleView:(NSString *)text from:(BOOL)fromSelf withPosition:(int)position{

//计算大小

UIFont *font = [UIFont systemFontOfSize:14];

CGSize size = [text sizeWithFont:font constrainedToSize:CGSizeMake(180.0f, 20000.0f) lineBreakMode:NSLineBreakByWordWrapping];

// build single chat bubble cell with given text

UIView *returnView = [[UIView alloc] initWithFrame:CGRectZero];

returnView.backgroundColor = [UIColor clearColor];

//背影图片

UIImage *bubble = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:fromSelf?@"SenderAppNodeBkg_HL":@"ReceiverTextNodeBkg" ofType:@"png"]];

UIImageView *bubbleImageView = [[UIImageView alloc] initWithImage:[bubble stretchableImageWithLeftCapWidth:floorf(bubble.size.width/2) topCapHeight:floorf(bubble.size.height/2)]];

NSLog(@"%f,%f",size.width,size.height);

//添加文本信息

UILabel *bubbleText = [[UILabel alloc] initWithFrame:CGRectMake(fromSelf?15.0f:22.0f, 20.0f, size.width+10, size.height+10)];

bubbleText.backgroundColor = [UIColor clearColor];

bubbleText.font = font;

bubbleText.numberOfLines = 0;

bubbleText.lineBreakMode = NSLineBreakByWordWrapping;

bubbleText.text = text;

bubbleImageView.frame = CGRectMake(0.0f, 14.0f, bubbleText.frame.size.width+30.0f, bubbleText.frame.size.height+20.0f);

if(fromSelf)

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

else

returnView.frame = CGRectMake(position, 0.0f, bubbleText.frame.size.width+30.0f, bubbleText.frame.size.height+30.0f);

[returnView addSubview:bubbleImageView];

[returnView addSubview:bubbleText];

return returnView;

}

//泡泡语音

- (UIView *)yuyinView:(NSInteger)logntime from:(BOOL)fromSelf withIndexRow:(NSInteger)indexRow withPosition:(int)position{

//根据语音长度

int yuyinwidth = 66+fromSelf;

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];

button.tag = indexRow;

if(fromSelf)

button.frame =CGRectMake(320-position-yuyinwidth, 10, yuyinwidth, 54);

else

button.frame =CGRectMake(position, 10, yuyinwidth, 54);

//image偏移量

UIEdgeInsets imageInsert;

imageInsert.top = -10;

imageInsert.left = fromSelf?button.frame.size.width/3:-button.frame.size.width/3;

button.imageEdgeInsets = imageInsert;

[button setImage:[UIImage imageNamed:fromSelf?@"SenderVoiceNodePlaying":@"ReceiverVoiceNodePlaying"] forState:UIControlStateNormal];

UIImage *backgroundImage = [UIImage imageNamed:fromSelf?@"SenderVoiceNodeDownloading":@"ReceiverVoiceNodeDownloading"];

backgroundImage = [backgroundImage stretchableImageWithLeftCapWidth:20 topCapHeight:0];

[button setBackgroundImage:backgroundImage forState:UIControlStateNormal];

UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(fromSelf?-30:button.frame.size.width, 0, 30, button.frame.size.height)];

label.text = [NSString stringWithFormat:@"%d''",logntime];

label.textColor = [UIColor grayColor];

label.font = [UIFont systemFontOfSize:13];

label.textAlignment = NSTextAlignmentCenter;

label.backgroundColor = [UIColor clearColor];

[button addSubview:label];

return button;

}

#pragma UITableView

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

{

return 1;

}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

{

return _resultArray.count;

}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

NSDictionary *dict = [_resultArray objectAtIndex:indexPath.row];

UIFont *font = [UIFont systemFontOfSize:14];

CGSize size = [[dict objectForKey:@"content"] sizeWithFont:font constrainedToSize:CGSizeMake(180.0f, 20000.0f) lineBreakMode:NSLineBreakByWordWrapping];

return size.height+44;

}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil) {

cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];

cell.selectionStyle = UITableViewCellSelectionStyleNone;

}else{

for (UIView *cellView in cell.subviews){

[cellView removeFromSuperview];

}

}

NSDictionary *dict = [_resultArray objectAtIndex:indexPath.row];

//创建头像

UIImageView *photo ;

if ([[dict objectForKey:@"name"]isEqualToString:@"rhl"]) {

photo = [[UIImageView alloc]initWithFrame:CGRectMake(320-60, 10, 50, 50)];

[cell addSubview:photo];

photo.image = [UIImage imageNamed:@"photo1"];

if ([[dict objectForKey:@"content"] isEqualToString:@"0"]) {

[cell addSubview:[self yuyinView:1 from:YES withIndexRow:indexPath.row withPosition:65]];

}else{

[cell addSubview:[self bubbleView:[dict objectForKey:@"content"] from:YES withPosition:65]];

}

}else{

photo = [[UIImageView alloc]initWithFrame:CGRectMake(10, 10, 50, 50)];

[cell addSubview:photo];

photo.image = [UIImage imageNamed:@"photo"];

if ([[dict objectForKey:@"content"] isEqualToString:@"0"]) {

[cell addSubview:[self yuyinView:1 from:NO withIndexRow:indexPath.row withPosition:65]];

}else{

[cell addSubview:[self bubbleView:[dict objectForKey:@"content"] from:NO withPosition:65]];

}

}

return cell;

}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath

{

}

@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
2013-12-31 10:19编辑

感谢这位朋友的提出



写此Demo的时候，没有考虑到那么多，发现了一些问题，具体请参考后来写的此文章：

IOS高访新浪微博界面(讲解如何自定义UITableViewCell，处理@#链接 特殊字符)

可以做个参考，另外更新一下此Demo的下载：

http://download.csdn.net/detail/rhljiayou/6791445

转载来自任海丽博客