一.commentView模块搭建
commentView样式分为两种
1.xib搭建界面
1.1 因为评论的样式大体上一样,我们可以用同一个xib来处理
1.2 最热评论 用一个label来搭建
1.3 下面的内容不一样
1.3.1 文本样式的评论,下面也用一个label搭建就可以了
label约束设置为左右和上面固定间距,这样,高度会随着内容缩放,前提是设置label为0行
1.3.2 声音样式评论
声音样式的评论.高度是固定的
先添加一个view在文本评论的位置(根据数据再决定到时候哪种样式的评论显示,上面的部分是一样的)
再往view里面添加一个label 和 button 就行了
注意:button的图片和文字有间距 只需要设置内部子控件的内边距就行了
如果label下面对view有约束,button下面就不要对view设置约束了 会有冲突, 总之,设置其中一个,另一个就不要设置了
2.请求数据
2.1 在设置模型属性的时候,我们要对数据进行处理
2.2 从上图中可以看到,我们需要拿到username 首先要拿到top_cmt这个数组,然后再拿到 user字典
2.3 我们习惯都是面向模型开发,所以我们拿到 top_cmt 数组的第一个元素(字典) 转为模型
2.4 然后取出字典中的user字典,在转为另一个模型
2.5 那么我们就需要先自定义两个模型
2.6 我们最好在最外层模型中定义一个模型属性,来保存内层的一个模型(item0 也是就是评论模型) 为什么?
在取内层模型属性的时候,会因为层级太深,需要写很长一段代码
进行这样的优化后,取内层模型属性的时候,就方便很多
2.7 怎么把模型中的数组属性里面的字典转换为 模型中的一个属性
重写数组元素的set方法 只要拿到数组中的字典元素,给模型中的这个属性赋值
为了严谨,要判断数组是否为空
// 给模型的top_cmt属性赋值调用
- (void)setTop_cmt:(NSArray *)top_cmt
{
_top_cmt = top_cmt;
if (top_cmt.count) {
_commentItem = top_cmt.firstObject;
}
}
3.怎么在外层模型里面,把模型中的数组属性中的字典(或字典属性)转成模型?
有两种方法来转
3.1第一种方法 ,自己手动利用MJ框架来转
3.2第二种方法,让MJ框架自动帮我们转,(前提是MJ框架知道模型中属性要转成哪种类型的模型)
3.3 MJ框架怎么自动帮我们转内层模型?
MJExtension:如果模型中有模型,MJExtension会自动帮你转换好
@property (nonatomic, strong) XTUserItem *user;
因为我们在定义这个字典的时候,就告诉MJ框架,要把字典转为哪种类型的模型
MJExtension:如果模型中有数组,数组中又是字典,MJExtension不会自动帮你转
MJExtension可以把数组中字典转模型 ,但是需要告诉他要把数组中的字典转为哪种类型的模型
3.4 怎么告诉MJ把数组中的字典转为哪种类型的模型
// key:哪个数组需要转换
+ (NSDictionary *)mj_objectClassInArray
{
return @{@"top_cmt":@"XTCommentItem"};
}
3.5 MJExtension底层实现
3.5.1 MJ底层是利用KVC对模型进行赋值的
遍历模型中的key, 然后去字典中查找对应的value对key赋值
3.5.2 利用kvc赋值,模型中可以没有字典中的某些key值, 但模型中的key 在字典中一定要有对应的value,否则会报错
MJ框架不存在这个问题,
KVC是通过[item setValuesForKeysWithDictionary:dict]这个方法,将字典转为模型
setValuesForKeysWithDictionary:底层实现
便利字典当中的所有Key Value值.给对应的key,value赋值
[dict enumerateKeysAndObjectsUsingBlock:^(id _Nonnull key, id _Nonnull obj, BOOL * _Nonnull stop) {
给对应的key,value赋值
setValuesForKeysWithDictionary:会调用setValue:forKeyPath:
[item setValue:obj forKeyPath:key];
}];
setValue:forKeyPath:的底层实现:
setValue: forKeyPath:
1.根据key值与当前的属性进行对比,先去看有没有与key值相同的set方法.如果有,就调用set方法.
2.如果没有,再去对比,有没有跟key值相同的成员属性,如果有,就直接进行赋值.
3.如果没有,再去对比,有没有跟key值相同的而且带有下划线的成员属性,如果有,就直接进行赋值.
4.如果还没有,会调用setValue:(id)value forUndefinedKey:
5.如果没有实现,直接报错.
3.5.3 kvc要求,在模型中定义的key值得数据类型 一定要跟字典中key对应的value的值的数据类型相同,否则会报错
3.5.4 MJ框架,能够把一些key值的数据类型自动转换为和字典中key对应的value的数据类型(前提是,这个两种数据类型能相互转换)
4.在视图模型中计算cell子控件的frame和高度
if (item.commentItem) { // 先判断有没有最热评论,有评论才需要计算
CGFloat commentH = ; 声音评论,高度是确定的
注意点:以后只要判断字符串有没有内容,用长度
if (item.commentItem.content.length) { // 有内容,就是文本评论
根据文字的高度来计算评论的高度
NSString *totalStr = [NSString stringWithFormat:@"%@:%@",item.commentItem.user.username,item.commentItem.content];
textH = [totalStr sizeWithFont:[UIFont systemFontOfSize:] constrainedToSize:CGSizeMake(textW, MAXFLOAT)].height;
commentH = + textH;
}
CGFloat commentW = textW;
CGFloat commentX = margin;
CGFloat commentY = _cellH;
_commentViewFrame = CGRectMake(commentX, commentY, commentW, commentH);
_cellH = CGRectGetMaxY(_commentViewFrame) + margin;
}5.展示数据
可以根据top_cmt数组的元素个数来判断commentView是否显示 或者根据这个数组中的元素转换的模型是否存在判断
二.bottomView模块搭建
此界面搭建相对来说比较简单,就不做具体介绍了
1.xib搭建界面
2.请求数据
2.1 查看接口文档,使用afn发送网络请求
2.2网络请求成功时,把数据转换成模型
2.3在模型中定义属性(先自定义模型)
查看界面需要使用哪些数据,就找到定义数据的属性定义到模型中
2.3自定义视图模型,视图模型包含模型(就是在视图模型中定义一个模型的属性)
2.4遍历模型,全部转换为视图模型
创建视图模型对象
用视图模型的模型属性来接收模型
把视图模型保存到数组中
3.在视图模型中计算cell子控件的frame和高度
高度给一个固定值就行了,cell的高度就是Y轴方向最后一个控件的最大Y值
4.展示数据
4.1展示数据的方法都一样,这里主要是对数据进行一些处理
4.2当评论或赞的数字超过一万的时候要进行处理
4.2.1 超过一万,让总数除以一万,得到的数字保留一位小数,显示xx.x万
4.2.2 如果总数为0的话,显示在界面上,效果很差,我们要进行一些处理
如果数据为0, 我们就在界面显示占位文字
处理数据原码
- (void)setItem:(XTThemeItem *)item
{
[super setItem:item]; [self setButton:_dingView count:item.ding title:@"赞"];
[self setButton:_caiView count:item.cai title:@"踩"];
[self setButton:_shareView count:item.repost title:@"转发"];
[self setButton:_commentView count:item.comment title:@"评论"];
} - (void)setButton:(UIButton *)button count:(NSInteger)count title:(NSString *)title
{
如何抽取一个方法:先把要抽取成方法的源代码拷贝过来,缺什么补什么就行了,需要外界决定的东西,写成参数,让外界传递进来
CGFloat valueF = ;
NSString *str = title;
if (count > 10000.0) {
valueF = count / 10000.0;
str = [NSString stringWithFormat:@"%.1f万",valueF];
str = [str stringByReplacingOccurrencesOfString:@".0" withString:@""];
} else if (count > ) {
str = [NSString stringWithFormat:@"%ld",count];
}
[button setTitle:str forState:UIControlStateNormal];
}
三.处理cell的外观细节
1.cell的选中样式很难看,我们怎么取消?
1.1 设置cell的一个属性就可以了
self.selectionStyle = UITableViewCellSelectionStyleNone;
1.2 在哪里写代码?
在初始化cell方法里面写
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
2.我们想把分割线设置的宽一点,怎么设置?
首先,我们要先取消系统的分割线
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
2.1自定义分割线
给cell的底部加一个uiview设置高度和颜色能达到分割线的效果
2.2 设置cell的frame,让cell的高度减少一个值,减少的部分就能看到背景色,只需要设置背景色就可以达到设置分割线的目的
注意:在这里减少的值,一定要在设置cell的高度的时候加上去,否则cell可能被压缩
设置frame源代码
- (void)setFrame:(CGRect)frame
{
frame.origin.y += ;
frame.size.height -= ;
注意:一定要调用super方法
[super setFrame:frame];
}
2.3 给cell设置背景图片
通过 backgroundView属性给cell设置背景图片,只需要给cell的 backgroundView设置UIImageView就可以了
设置完发现,背景图片边缘有些难看,很有可能是图片被拉伸了,我们要对图片进行处理
设置图片的可拉伸区域,然后再设置cell的背景图片
设置cell背景图片原码
UIImage *image = [UIImage imageNamed:@"mainCellBackground"];
处理图片:设置可拉伸区域
image = [image stretchableImageWithLeftCapWidth:image.size.width * 0.5 topCapHeight:image.size.height * 0.5]; self.backgroundView = [[UIImageView alloc] initWithImage:image];