传智播客第八天练习总结-QQ聊天UI界面
摘要: 本练习是传智播客IOS UI基础班的第八天课程练习,对练习的知识点和重点进行总结。实现效果如图所示
基本思路
- 导入素材,创建主界面
- 实现字典转模型(可以暂时不计算控件的frame),并实现懒加载
- 创建自定义Cell,实现其创建单元格各控件的类方法和对象方法,重写数据模型的set方法,在该方法中对各控件的内容和frame进行赋值
- 实现tableView的datasource方法
- 在frame模型中计算各控件的frame
- 修正tableView的细节:分割线、不可选中、背景色、正文的文字颜色和背景图片等(拉伸图片)
- 实现对自定义Cell中时间的判断,如果与上一条消息发送时间相同,则不显示
- 实现键盘弹出时整个View的随动效果(通知)
- 把键盘的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:方法