15468人阅读
iphone（101）
大家好，百忙之中，抽出点空，写个微博，话说好久没写。
最近项目中有碰到写类似微信聊天界面上的效果，特整理了一下，写了一个小的Demo，希望给没头绪的同学们一个参考！
Demo下载地址：
先看一下效果图：左图为截取微信的，右图是本demo的效果
再看一下主要代码实现：
@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 =
bubbleText.numberOfLines = 0;
bubbleText.lineBreakMode = NSLineBreakByWordW
bubbleText.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);
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 returnV
//泡泡语音
- (UIView *)yuyinView:(NSInteger)logntime from:(BOOL)fromSelf withIndexRow:(NSInteger)indexRow
withPosition:(int)position{
//根据语音长度
int yuyinwidth = 66+fromS
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.tag = indexR
if(fromSelf)
button.frame =CGRectMake(320-position-yuyinwidth, 10, yuyinwidth, 54);
button.frame =CGRectMake(position, 10, yuyinwidth, 54);
//image偏移量
UIEdgeInsets imageI
imageInsert.top = -10;
imageInsert.left = fromSelf?button.frame.size.width/3:-button.frame.size.width/3;
button.imageEdgeInsets = imageI
[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 = NSTextAlignmentC
label.backgroundColor = [UIColor clearColor];
[button addSubview:label];
#pragma UITableView
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
return _resultArray.
-(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 = UITableViewCellSelectionStyleN
for (UIView *cellView in cell.subviews){
[cellView removeFromSuperview];
NSDictionary *dict = [_resultArray objectAtIndex:indexPath.row];
//创建头像
UIImageView *
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]];
[cell addSubview:[self bubbleView:[dict objectForKey:@&content&] from:YES withPosition:65]];
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]];
[cell addSubview:[self bubbleView:[dict objectForKey:@&content&] from:NO withPosition:65]];
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
其实很简单，主要说一下两个知识点，重要的两个知识点就能写出完美的泡泡对话聊天！
第一个是NSString中的一个方法：
- (CGSize)sizeWithFont:(UIFont *)font constrainedToSize:(CGSize)size lineBreakMode:(NSLineBreakMode)lineBreakM
根据文本内容，算出所需要的大小CGSize；
第二个是UIImage中的一个方法：
- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapH
这里有几遍文章供大家参考这个方法的使用：
http://blog.csdn.net/lixing333/article/details/7589281
http://blog.csdn.net/w/article/details/7848980
/bandy/archive//2469369.html
<span style="font-size:14 color:#ff-12-31 10:19编辑
感谢这位朋友的提出
写此Demo的时候，没有考虑到那么多，发现了一些问题，具体请参考后来写的此文章：&
可以做个参考，另外更新一下此Demo的下载：
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：854524次
积分：9790
积分：9790
排名：第867名
原创：198篇
转载：34篇
评论：628条
技术交流群：
工作邮箱：
(1)(1)(2)(4)(3)(3)(5)(17)(6)(6)(4)(2)(5)(6)(2)(8)(8)(5)(8)(16)(2)(10)(3)(15)(7)(7)(23)(29)(14)(9)(1)