不等高cell搭建(二)

 

一.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底层实现:       http://www.jianshu.com/p/45cbd324ea65

               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];