IOS高访微信聊天对话界面(sizeWithFont:constrainedToSize和stretchableImageWithLeftCapWidth的使用)_移动开发_编程开发_程序员俱乐部

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

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

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

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

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

再看一下主要代码实现：

class="dp-cpp" start="1">
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！