iOS UI-QQ聊天布局

一、Model

BWMessage.h

#import <Foundation/Foundation.h>

typedef enum{
    BWMessageMe    = 0,//表示自己
    BWMessageOther = 1 //表示对方
}BWMessageType;

@interface BWMessage : NSObject
//消息正文
@property(nonatomic, copy)   NSString *text;
//消息时间
@property(nonatomic, copy)   NSString *time;
//消息类型
@property(nonatomic, assign) BWMessageType type;

//记录是否隐藏时间
@property(nonatomic, assign) BOOL hideTime;

- (instancetype)initWithDict:(NSDictionary *)dict;
+ (instancetype)messageWithDict:(NSDictionary *)dict;

@end


#import "BWMessage.h"

@implementation BWMessage

- (instancetype)initWithDict:(NSDictionary *)dict
{
    if (self = [super init]) {
//        _text = dict[@"text"];
//        _time = dict[@"time"];
//        _type =(BWMessageType)dict[@"type"];
        [self setValuesForKeysWithDictionary:dict];
    }
    return self;
}

+ (instancetype)messageWithDict:(NSDictionary *)dict
{
    return [[self alloc] initWithDict:dict];
}

@end

BWMessageFrame.h

#import <Foundation/Foundation.h>
#import <CoreGraphics/CoreGraphics.h>

#define textFont [UIFont systemFontOfSize:16]

@class BWMessage;

@interface BWMessageFrame : NSObject

@property (nonatomic, strong) BWMessage *message;
@property (nonatomic, assign, readonly) CGRect timeFrame;
@property (nonatomic, assign, readonly) CGRect iconFrame;
@property (nonatomic, assign, readonly) CGRect textFrame;

@property (nonatomic, assign, readonly) CGFloat rowHeight;

@end


#import "BWMessageFrame.h"
#import <UIKit/UIKit.h>
#import "BWMessage.h"
#import "NSString+BWTextSize.h"

@implementation BWMessageFrame

//重写setMessage
- (void)setMessage:(BWMessage *)message
{
    _message = message;
    
    //计算每个控件的Frame
    
    //设置统一的间距
    CGFloat margin = 5;
    //获取屏幕的宽度
    CGFloat screenW = [UIScreen mainScreen].bounds.size.width;
    //计算时间label的frame
    CGFloat timeX = 0;
    CGFloat timeY = 0;
    CGFloat timeW = screenW;
    CGFloat timeH = 15;
    
    if (!message.hideTime) {
        //如果需要时间Label，那么再计算frame
        _timeFrame = CGRectMake(timeX, timeY, timeW, timeH);
    }
    
    //计算头像的frame
    CGFloat iconW = 30;
    CGFloat iconH = 30;
    CGFloat iconY = CGRectGetMaxY(_timeFrame);
    CGFloat iconX = message.type == BWMessageOther ? margin : screenW - iconW - margin;
    _iconFrame = CGRectMake(iconX, iconY, iconW, iconH);
    
    //计算正文的frame
    CGSize textSize = [message.text sizeOfTextWithMaxsize:CGSizeMake(250, MAXFLOAT) andFont:textFont];
    CGFloat textW = textSize.width+40;
    CGFloat textH = textSize.height+30;
    CGFloat textY = iconY;
    CGFloat textX = message.type == BWMessageOther ? CGRectGetMaxX(_iconFrame) : screenW - margin - iconW - textW;
    _textFrame = CGRectMake(textX, textY, textW, textH);
    
    //计算行高
    //获取 头像的最大Y值和正文的最大Y值，然后用最大Y值+margin
    CGFloat maxY = MAX(CGRectGetMaxY(_iconFrame), CGRectGetMaxY(_textFrame));
    _rowHeight = maxY + margin;
    
    
}

@end

NSString+BWTextSize.h

//  NSString+BWTextSize.h
//  IOS_QQ聊天
//
//  Created by ma c on 16/1/10.
//  Copyright (c) 2016年 博文科技. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface NSString (BWTextSize)

//对象方法-计算文本尺寸
- (CGSize)sizeOfTextWithMaxsize:(CGSize)maxSize andFont:(UIFont *)font;

//类方法-计算文本尺寸
+ (CGSize)sizeWithText:(NSString *)text andMaxSize:(CGSize)maxSize andFont:(UIFont *)font;

@end

//  NSString+BWTextSize.m
//  IOS_QQ聊天
//
//  Created by ma c on 16/1/10.
//  Copyright (c) 2016年 博文科技. All rights reserved.
//

#import "NSString+BWTextSize.h"

@implementation NSString (BWTextSize)


- (CGSize)sizeOfTextWithMaxsize:(CGSize)maxSize andFont:(UIFont *)font
{
    NSDictionary *attr = @{NSFontAttributeName : font};
    return [self boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attr context:nil].size;
}

+ (CGSize)sizeWithText:(NSString *)text andMaxSize:(CGSize)maxSize andFont:(UIFont *)font
{
    return [text sizeOfTextWithMaxsize:maxSize andFont:font];
}

@end

三、View

//  BWMessageCell.h
//  IOS_QQ聊天
//
//  Created by ma c on 16/1/10.
//  Copyright (c) 2016年 博文科技. All rights reserved.
//

#import <UIKit/UIKit.h>
@class BWMessageFrame;

@interface BWMessageCell : UITableViewCell

@property (nonatomic, strong) BWMessageFrame *messageFrame;

+ (instancetype) messageCellWithTableView:(UITableView *)tableView;

@end

//  BWMessageCell.m
//  IOS_QQ聊天
//
//  Created by ma c on 16/1/10.
//  Copyright (c) 2016年 博文科技. All rights reserved.
//

#import "BWMessageCell.h"
#import "BWMessage.h"
#import "BWMessageFrame.h"

@interface BWMessageCell ()

@property (nonatomic, strong) UILabel *lblTime;
@property (nonatomic, strong) UIImageView *imgViewHead;
@property (nonatomic, strong) UIButton *btnText;

@end

@implementation BWMessageCell

//创建自定义Cell
+ (instancetype)messageCellWithTableView:(UITableView *)tableView
{
    NSString *cellIdentifier = @"cellIdentifier";
    BWMessageCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
    if (!cell) {
        cell = [[BWMessageCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellIdentifier];
    }
    //设置单元格的背景颜色
    cell.backgroundColor = [UIColor clearColor];
    return cell;
}

#pragma mark - 重写initWithStyle的方法
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        //创建子控件
        
        //显示时间的label
        self.lblTime = [[UILabel alloc] init];
        self.lblTime.textAlignment = NSTextAlignmentCenter;
        self.lblTime.font = [UIFont systemFontOfSize:14];
        [self.contentView addSubview:self.lblTime];
        
        //显示头像的UIImageView
        self.imgViewHead = [[UIImageView alloc] init];
        [self.contentView addSubview:self.imgViewHead];
        
        //显示正文的按钮
        self.btnText = [[UIButton alloc] init];
        self.btnText.titleLabel.font = textFont;
        [self.btnText setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        self.btnText.titleLabel.numberOfLines = 0;
        //self.btnText.backgroundColor = [UIColor purpleColor];
        //self.btnText.titleLabel.backgroundColor = [UIColor redColor];
        
        //设置按钮的内边距
        self.btnText.contentEdgeInsets = UIEdgeInsetsMake(15, 20, 15, 20);
        [self.contentView addSubview:self.btnText];
    }
    return self;
}
#pragma mark - 重写setMessageFrame的方法
- (void)setMessageFrame:(BWMessageFrame *)messageFrame
{
    _messageFrame = messageFrame;
    
    //获取数据模型
    BWMessage *message = messageFrame.message;
    
    //分别设置控件的数据和frame
    
    //设置时间的内容和frame
    self.lblTime.text = message.time;
    self.lblTime.frame = messageFrame.timeFrame;
    self.lblTime.hidden = message.hideTime;
    
    //设置头像的图片和frame
    //根据消息类型，判断应该使用哪张图片
    NSString *iconImg = message.type == BWMessageMe ? @"me" : @"other";
    self.imgViewHead.image = [UIImage imageNamed:iconImg];
    self.imgViewHead.frame = messageFrame.iconFrame;
    
    //设置正文的内容和frame
    [self.btnText setTitle:message.text forState:UIControlStateNormal];
    self.btnText.frame = messageFrame.textFrame;
    
    //设置正文的背景图
    NSString *imgNor,*imgHighlighted;
    if (message.type == BWMessageMe) {
        //自己发送的消息
        imgNor = @"chat_send_nor";
        imgHighlighted = @"chat_send_press_pic";
        //设置消息字体的颜色
        [self.btnText setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    }
    else{
        //对方发送的消息
        imgNor = @"chat_recive_nor";
        imgHighlighted = @"chat_recive_press_pic";
        //设置消息的字体颜色
        [self.btnText setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    }
    //加载图片
    UIImage *imageNor = [UIImage imageNamed:imgNor];
    UIImage *imageHighlighted = [UIImage imageNamed:imgHighlighted];
    
    //用平铺的方式拉伸图片
    imageNor = [imageNor stretchableImageWithLeftCapWidth:imageNor.size.width/2 topCapHeight:imageNor.size.height/2];
    imageHighlighted = [imageHighlighted stretchableImageWithLeftCapWidth:imageHighlighted.size.width/2 topCapHeight:imageHighlighted.size.height/2];
    
    //设置背景图
    [self.btnText setBackgroundImage:imageNor forState:UIControlStateNormal];
    [self.btnText setBackgroundImage:imageHighlighted forState:UIControlStateHighlighted];
    
}

- (void)awakeFromNib {
    // Initialization code
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

@end

三、Controller

//  ViewController.m
//  IOS_QQ聊天
//
//  Created by ma c on 16/1/9.
//  Copyright (c) 2016年 博文科技. All rights reserved.
//

#import "ViewController.h"
#import "BWMessage.h"
#import "BWMessageFrame.h"
#import "BWMessageCell.h"

@interface ViewController ()<UITableViewDataSource,UITableViewDelegate,UITextFieldDelegate>
//消息的Frame模型对象
@property (nonatomic, strong) NSMutableArray *arrMessageFrame;

@property (weak, nonatomic) IBOutlet UITableView *tableView;
@property (weak, nonatomic) IBOutlet UITextField *textInput;

@end

@implementation ViewController

#pragma mark - 文本框代理方法

//return键被单击的时候触发
- (BOOL)textFieldShouldReturn:(UITextField *)textField
{
    //1.获取用户输入的文本
    NSString *text = textField.text;
    
    //2.发送用户的消息
    [self sendMessage:text withType:BWMessageMe];
    
    //3.发送系统的消息
    [self sendMessage:@"不认识" withType:BWMessageOther];

    //4.清空文本框
    textField.text = nil;
    
       return YES;
}
//发送消息
- (void)sendMessage:(NSString *)msg withType:(BWMessageType)type
{
    //1.创建一个数据模型和frame模型
    //数据模型
    BWMessage *model = [[BWMessage alloc] init];
    //获取当前系统时间
    NSDate *nowDate = [NSDate date];
    //创建一个日期格式化器
    NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
    //设置格式
    formatter.dateFormat = @"今天：HH:mm";
    //进行日期的格式化
    model.time = [formatter stringFromDate:nowDate];
    model.type = type;
    model.text = msg;
    
    //frame模型
    BWMessageFrame *frameModel = [[BWMessageFrame alloc] init];
    frameModel.message = model;
    //根据当前的消息时间和上一条消息的时间，来设置是否隐藏时间Label
    BWMessageFrame *lastMessageFrame = [self.arrMessageFrame lastObject];
    NSString *lastTime = lastMessageFrame.message.time;
    if ([model.time isEqualToString:lastTime]) {
        model.hideTime = YES;
    }
    
    //2.把frame模型加载到集合中
    [self.arrMessageFrame addObject:frameModel];
    
    //3.刷新UITableView数据
    [self.tableView reloadData];
    
    //4.把最后一行滚动到最上面
    NSIndexPath *lastIndexPath = [NSIndexPath indexPathForRow:self.arrMessageFrame.count - 1 inSection:0];
    [self.tableView scrollToRowAtIndexPath:lastIndexPath atScrollPosition:UITableViewScrollPositionTop animated:YES];
}


#pragma mark - 滚动视图代理方法
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    //[self.textInput resignFirstResponder];
    //滚动把键盘叫回去
    [self.view endEditing:YES];
}

#pragma mark - 数据源方法
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.arrMessageFrame.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //1.获取模型数据
    BWMessageFrame *frameModel = self.arrMessageFrame[indexPath.row];
    //2.创建单元格
    BWMessageCell *cell = [BWMessageCell messageCellWithTableView:tableView];
    //3.把模型赋值给单元格
    cell.messageFrame = frameModel;
    //4.返回单元格
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    BWMessageFrame *frameModel = self.arrMessageFrame[indexPath.row];
    return frameModel.rowHeight;
}

#pragma mark - 懒加载
- (NSMutableArray *)arrMessageFrame
{
    if (_arrMessageFrame == nil) {
        
        NSString *path = [[NSBundle mainBundle] pathForResource:@"messages.plist" ofType:nil];
        
        NSArray *arrDict = [NSArray arrayWithContentsOfFile:path];
        NSMutableArray *arrModel = [NSMutableArray array];
        
        for (NSDictionary *dict in arrDict) {
            //创建一个数据模型
            BWMessage *dataModel = [BWMessage messageWithDict:dict];
            //创建一个Frame模型
            BWMessageFrame *modelFrame = [[BWMessageFrame alloc] init];
            
            //获取上一个数据模型
            BWMessage *lastMessage = (BWMessage *)[[arrModel lastObject] message];
            //判断“当前的模型时间”是否和“上一个模型时间”一样
            if ([dataModel.time isEqualToString:lastMessage.time]) {
                dataModel.hideTime = YES;
            }
            else
            {
                dataModel.hideTime = NO;
            }
            
            modelFrame.message = dataModel;
        
            //把Frame模型加载到arrModel模型数组中
            [arrModel addObject:modelFrame];
        }
        _arrMessageFrame = arrModel;
    }
    return _arrMessageFrame;
}

#pragma mark - 视图加载
- (void)viewDidLoad {
    [super viewDidLoad];
    //取消分割线
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    //设置TableView的背景色
    self.tableView.backgroundColor = [UIColor colorWithRed:236.0/255 green:236.0/255 blue:236.0/255 alpha:1];
    //设置TableView的行不允许被选中
    self.tableView.allowsSelection = NO;
    //设置文本框距离最左侧有一段距离
    UIView *leftView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 5, 1)];
    //把leftView设置给文本框
    self.textInput.leftView = leftView;
    self.textInput.leftViewMode = UITextFieldViewModeWhileEditing;
    
    //监听键盘的弹出事件
    //1.创建一个NSNotificationCenter对象
    NSNotificationCenter *center = [NSNotificationCenter defaultCenter];
    //2.监听键盘弹出发出的通知
    [center addObserver:self selector:@selector(keyboardWillChangeFrame:) name:UIKeyboardWillChangeFrameNotification object:nil];
    
}
//通知关联方法
- (void)keyboardWillChangeFrame:(NSNotification *)noteInfo
{
//    NSLog(@"通知的名称：%@",noteInfo.name);
//    NSLog(@"通知的发布者：%@",noteInfo.object);
//    NSLog(@"通知的内容：%@",noteInfo.userInfo);
    //1.获取键盘显示完毕或者隐藏完毕后的Y值
    CGRect rectEnd = [noteInfo.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];
    CGFloat keyboardY = rectEnd.origin.y;
    //用键盘的Y值减去屏幕的高度计算平移的值
    CGFloat transformValue = keyboardY - self.view.frame.size.height;
    
    [UIView animateWithDuration:0.25 animations:^{
        
        self.view.transform = CGAffineTransformMakeTranslation(0, transformValue);
    }];
    
    //让UITableView的最后一行滚动到最上面
    NSIndexPath *lastRowindexPath = [NSIndexPath indexPathForRow:self.arrMessageFrame.count - 1 inSection:0];
    [self.tableView scrollToRowAtIndexPath:lastRowindexPath atScrollPosition:UITableViewScrollPositionTop animated:YES];
}

- (void)dealloc
{
    [[NSNotificationCenter defaultCenter] removeObserver:self];
}

- (BOOL)prefersStatusBarHidden
{
    return YES;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end