iOS开发之微信聊天页面实现

发布日期： 2017-02-15 阅读量： 作者： 网络

　　聊天界面的效果图如下：在下面的聊天界面中中用到了3类cell,一类是显示文字和表情的，一类是显示录音的，一类是显示图片的。当点击图片时会跳转到另一个controller中来进行图片显示，在图片显示页面中添加了一个捏合的手势。点击播放按钮，会播放录制的音频，cell的大学会根据内容的多少来调整，而cell中textview的高度是通过约束来设置的。

iOS开发之微信聊天页面实现

　　一，定义我们要用的cell,代码如下：

　　　　1，显示表情和text的cell,代码如下，需要根据NSMutableAttributedString求出bound,然后改变cell上的ImageView和TextView的宽度的约束值，动态的调整气泡的大小，具体代码如下：

#import "TextCell.h"

@interface TextCell()

@property (strong, nonatomic) IBOutlet UIImageView *headImageView;
@property (strong, nonatomic) IBOutlet UIImageView *chatBgImageView;
@property (strong, nonatomic) IBOutlet UITextView *chatTextView;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *chatBgImageWidthConstraint;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *chatTextWidthConstaint;
@property (strong, nonatomic) NSMutableAttributedString *attrString;

@end

@implementation TextCell

-(void)setCellValue:(NSMutableAttributedString *)str
{
    //移除约束
    [self removeConstraint:_chatBgImageWidthConstraint];
    [self removeConstraint:_chatTextWidthConstaint];
    
    self.attrString = str;
    NSLog(@"%@",self.attrString);
    
    //由text计算出text的宽高
      CGRect bound = [self.attrString boundingRectWithSize:CGSizeMake(150, 1000) options:NSStringDrawingUsesLineFragmentOrigin context:nil];
   
    //根据text的宽高来重新设置新的约束
    //背景的宽
    NSString *widthImageString;
    NSArray *tempArray;
    
    widthImageString = [NSString stringWithFormat:@"H:[_chatBgImageView(%f)]", bound.size.width+45];
    tempArray = [NSLayoutConstraint constraintsWithVisualFormat:widthImageString options:0 metrics:0 views:NSDictionaryOfVariableBindings(_chatBgImageView)];
    _chatBgImageWidthConstraint = tempArray[0];
    [self addConstraint:self.chatBgImageWidthConstraint];
    
    widthImageString = [NSString stringWithFormat:@"H:[_chatTextView(%f)]", bound.size.width+20];
    tempArray = [NSLayoutConstraint constraintsWithVisualFormat:widthImageString options:0 metrics:0 views:NSDictionaryOfVariableBindings(_chatTextView)];
    _chatBgImageWidthConstraint = tempArray[0];
    [self addConstraint:self.chatBgImageWidthConstraint];
    
    //设置图片
    UIImage *image = [UIImage imageNamed:@"chatfrom_bg_normal.png"];
    image = [image resizableImageWithCapInsets:(UIEdgeInsetsMake(image.size.height * 0.6, image.size.width * 0.4, image.size.height * 0.3, image.size.width * 0.4))];
    
    //image = [image stretchableImageWithLeftCapWidth:image.size.width * 0.5 topCapHeight:image.size.height * 0.5];
    
    
    
    [self.chatBgImageView setImage:image];
    
    self.chatTextView.attributedText = str;
    
    
}

@end

# UI # IOS # CoreData # 自动布局

相关栏目：【 SEO优化45326 】【技术教程24582 】【 IDC资讯40819 】【网络快讯9946 】【 SEO推广10016 】

上一篇: 怎么把docker下的图片拷贝出来

下一篇: golang框架在高并发场景中如何避免死锁

iOS开发之微信聊天页面实现

随便看看