仿QQ聊天布局--iOS - 顾小

　　虽然注册博客园这么久了，但很少在这上面写些东西，一来也是觉得自己能力不够，二来怕误人子弟，所以一直秉着“多看，多做，少说”的原则混迹在各论坛之中。但日子久了，觉着这其实是一种逃避的方法。思来想去，那些牛逼的人其实是那些能把自己心中所想完全表达出来，让人看之舒服，听之认同的人。所以，除了“多看，多做，少说”外，怕要加一条“多总结”，否则恐要淹死在这信息化的浪潮中了。

　　最近对QQ、微信聊天布局产生兴趣，便搜索资料试着搞搞，趁着空隙，先上效果图，得空再补充说明。

　　大致思路就是自定义tableViewcell(包括imageView和UIButton)，选用button是因为他既可以设置背景也可以显示文字，如果用Label只能显示文字。

　　下面是大致的框架：

　　要解决的难点就是怎样实现让cell高度随着文本的大小显示，iOS7 摒弃了原来的sizeWithFont: constrainedToSize:lineBreakMode:方法，采用了boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attributes:(NSDictionary *)attributes context:(NSStringDrawingContext *)context的方法，以及设置button的UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)使文字在中间显示，当然还得解决背景图片的拉伸问题，关于拉伸的解决方法提供一个网址写得不错：http://www.cnblogs.com/mjios/archive/2013/02/26/2934280.html。

添上本工程代码：

 1  // 按钮的文本
 2     NSDictionary *attributes = @{NSFontAttributeName: [UIFont fontWithName:@"HelveticaNeue" size:kUIFontSize]};
 3     CGSize maximumLabelSize = CGSizeMake(180, MAXFLOAT);
 4     CGRect size = [message.message boundingRectWithSize:maximumLabelSize options:(NSStringDrawingUsesLineFragmentOrigin) attributes:attributes context:nil];
 5    // 2) 设置文字按钮的文本
 6     NSLog(@"%@ %@", NSStringFromCGSize(size.size), message.message);
 7     
 8     // 3) 设置文字按钮的大小和位置
 9     CGFloat x = 0;
10     if (message.fromSelf) {
11         x = 250 - 10 - size.size.width - 40;
12 //        NSLog(@"x = %f",x);
13     } else {
14         x = 80;
15     }
16     // 增加消息按钮的外间距
17     [self.massage setContentEdgeInsets:UIEdgeInsetsMake(5, 20,10, 20)];
18     
19     self.massage.frame = CGRectMake(x, 10, size.size.width + 20, size.size.height + 20);
20     [self.massage setTitle:message.message forState:UIControlStateNormal];
21 
22     // 按钮的背景
23     UIImage *nomalImg;
24     UIImage *highImg;
25     if(message.fromSelf)
26     {
27         nomalImg = [UIImage imageNamed:@"chatto_bg_normal"];
28         highImg = [UIImage imageNamed:@"chatto_bg_focused"];
29        
30         
31     }else
32     {
33         nomalImg = [UIImage imageNamed:@"chatfrom_bg_normal"];
34         highImg = [UIImage imageNamed:@"chatfrom_bg_focused"];
35         
36     }
37     
38     // 拉伸图像
39     nomalImg = [nomalImg stretchableImageWithLeftCapWidth:nomalImg.size.width * 0.5 topCapHeight:nomalImg.size.height *0.6];
40     highImg = [highImg stretchableImageWithLeftCapWidth:highImg.size.width * 0.5 topCapHeight:highImg.size.height *0.6];
41 
42     
43     [self.massage setBackgroundImage:nomalImg forState:UIControlStateNormal
44      ];
45     [self.massage setBackgroundImage:highImg forState:UIControlStateHighlighted];

posted on 2014-06-24 12:06 顾小阅读(1335) 评论(0) 收藏举报

刷新页面返回顶部