传智播客第八天练习总结-QQ聊天UI界面

传智播客第八天练习总结-QQ聊天UI界面

摘要: 本练习是传智播客IOS UI基础班的第八天课程练习，对练习的知识点和重点进行总结。实现效果如图所示

基本思路

1. 导入素材，创建主界面
2. 实现字典转模型（可以暂时不计算控件的frame），并实现懒加载
3. 创建自定义Cell，实现其创建单元格各控件的类方法和对象方法，重写数据模型的set方法，在该方法中对各控件的内容和frame进行赋值
4. 实现tableView的datasource方法
5. 在frame模型中计算各控件的frame
6. 修正tableView的细节：分割线、不可选中、背景色、正文的文字颜色和背景图片等(拉伸图片)
7. 实现对自定义Cell中时间的判断，如果与上一条消息发送时间相同，则不显示
8. 实现键盘弹出时整个View的随动效果(通知)
9. 把键盘的return键变成send键，实现新的消息的发送和回复(UITextField的delegate方法)

1、导入素材，创建主界面

素材主要有一个的plist文件和相关的图片，plist文件总体是一个数组，每条消息是一个Dictionary，包含正文、事件和类型条信息，类型中0表示自己发送的消息，1表示别人发送的消息

2、实现字典转模型和懒加载

由于要在懒加载时就计算控件的Frame和单元格行高，所以创建两个Model，一个存储消息模型，一个存储Frame信息

个人认为可以直接在一个model中存储message和messageFrame信息，但是结构不够清晰，维护相对复杂

由于消息的类型只有0和1两种类型，为了更加直观，可以将其存储为一个枚举形式

typedef enum {
    LJMessageTypeMe = 0,//表示自己发的消息
    LJMessageTypeOther = 1//表示对方发的消息
}LJMessageType;

@implementation LJMessage
-(instancetype)initWithDic:(NSDictionary *)dic
{
    if (self = [super init]) {
    		//注意类成员的名称要与字典的键名称一致
        [self setValuesForKeysWithDictionary:dic];
    }
    return self;
}
+(instancetype)messageWithDic:(NSDictionary *)dic
{
    return [[self alloc] initWithDic:dic];
}
@end

Frame模型类中将message模型作为自己的成员之一，还包括时间、正文、头像的Frame，以及单元格的行高。.m文件中需要重写message的set方法，在这个方法中计算各控件的Frame和行高。

注意：计算Frame需要先引入<UIKit/UIKit.h>，否则无法计算文字高度

懒加载的实质是重写模型对象的get方法，当程序需要调用这个成员的get方法时，在方法内部判断模型对象是否为空，如果为空则加载对应的数据

懒加载通常的模式为：1、获取plist文件路径；2、根据文件路径创建一个由NSDictionary组成的NSArray；3、创建一个空的NSMutableArray；4、遍历每一个NSDictionary，使用模型对象的类方法或对象方法将其转换为模型对象；5、将该模型对象加入NSMutableArray；6、循环结束后将这个可变数组赋值给模型数据集；

注意：因为后续要实现消息的发送和自动回复，因此创建的模型数据集应该是一个可变数组

-(NSMutableArray *)messageFrames
{
    if (_messageFrames == nil) {
        NSString * path_plist = [[NSBundle mainBundle] pathForResource:@"messages.plist" ofType:nil];
        NSArray * messages_dic = [NSArray arrayWithContentsOfFile:path_plist];
        NSMutableArray * messageFrames_model = [NSMutableArray array];
        for (NSDictionary * dic in messages_dic) {
            LJMessageFrame * messageFrame_model_temp = [[LJMessageFrame alloc] init];
            LJMessage * currentMessage = [LJMessage messageWithDic:dic];
            messageFrame_model_temp.message= currentMessage;
            [messageFrames_model addObject:messageFrame_model_temp];
        }
        _messageFrames = messageFrames_model;
    }
    return _messageFrames;
}

3、创建自定义Cell

创建一个基于UITableViewCell的类，定义三个私有成员，lbl_time,img_icon,btn_text分别表示时间、头像和正文控件

重写自定义Cell的initWithStyle: reuseIdentifier:方法