百思不得姐之自定义cell的完善部分(九)

一 效果图和五个模块的分析

1 效果图:

2 五个模块分析

3 上一篇已经写了思路: 将顶部和底部用一个类来管理,其它部分交给对应的类来管理,根据从服务器中请求到的数据往空出来的中间部位插入相应的xib描述的该部分内容.

二 讲解模块—–声音模块

1 选取声音模块的原因: 由于声音模块从服务器请求到的数据都包含了其它模块中的内容,我们将这个模块弄好了,其它模块就是拷贝的问题了.

2 分别创建其它类(UIView)包括对应的xib文件

3 确定代码书写的位置:

//通过贴模型中定义的属性帖子的类型
switch (self.topices.type) {
case XFJTopicTypeWord://段子
//将声音;图片;视频图片都隐藏
self.topicesPicture.hidden = YES;
self.topicesVideo.hidden = YES;
self.topicesVoice.hidden = YES;
break;
case XFJTopicTypePicture://图片
//图片出现;声音;视频一隐藏
self.topicesVideo.hidden = YES;
self.topicesVoice.hidden = YES;
self.topicesPicture.hidden = NO;
break;
case XFJTopicTypeVideo://视频
//视频出现;声音和图片隐藏
self.topicesPicture.hidden = YES;
self.topicesVoice.hidden = YES;
self.topicesVideo.hidden = NO;
break;
case XFJTopicTypeVoice://声音
//声音出现;图片和视频隐藏
self.topicesPicture.hidden =YES;
self.topicesVoice.topicesVoice = topices;
self.topicesVoice.hidden = NO;
self.topicesVideo.hidden = YES;
break;
default:
break;
}

三 添加一个加载xib的快速方法

1 给定一个类方法,外面直接调用就能返回到对应的xib.

#pragma mark - 实现快速创建xib的方法
+ (instancetype)XFJ_middleXib
{
return [[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil].firstObject;
}

四 懒加载需要添加到cell中间部位的UIView

1 懒加载原因: 如果仅仅是通过上面直接的判断,并且在里面直接调用快速创建对应的xib的类方法的时候,运行程序我们可以看出,当发滚动tableView的时候,会有不同的cell一次的叠加在一起.意思是没滚动一次,就会创建一个xib,并且添加到contentView中,所以就造成了叠加.这就是需要懒加载的原因.

2 懒加载代码块:

#pragma mark - 图片xib懒加载
- (XFJTopicesPictureView *)topicesPicture
{
if (_topicesPicture == nil) {
//创建xib
XFJTopicesPictureView *picture = [XFJTopicesPictureView XFJ_middleXib];
//添加到tableView中的contentView中
[self.contentView addSubview:picture];
//赋值
_topicesPicture = picture;
}
return _topicesPicture;
}

#pragma mark - 视频xib懒加载
- (XFJTopicesVideoView *)topicesVideo
{
if (_topicesVideo == nil) {
//创建xib
XFJTopicesVideoView *video = [XFJTopicesVideoView XFJ_middleXib];
//添加到contentView中
[self.contentView addSubview:video];
//赋值
_topicesVideo = video;
}
return _topicesVideo;
}

#pragma mark - 声音xib懒加载
- (XFJTopicesVoiceView *)topicesVoice
{
if (_topicesVoice == nil) {
//创建xib
XFJTopicesVoiceView *voice = [XFJTopicesVoiceView XFJ_middleXib];
//添加到contentView中
[self.contentView addSubview:voice];
//赋值
_topicesVoice = voice;
}
return _topicesVoice;
}

五 设置对应的xib的Frame

1 在模型的属性里面添加一个属性,用来作为计算中间部分的frame,该属性在服务器返回的数据中并没有,只是为了方便开发,定义的属性.

/**
*  设置一个属性作为中间内容的frame值
*/
@property (nonatomic, assign) CGRect middleFrame;

2 在上一篇计算cell的高度中我们重写了cellHeight的get方法对cell的高度进行计算,那么计算中间部分尺寸的代码我们也需要写在cellHeight的get方法里面,作为cell高度的累加.

#pragma makr - 重写cellHeight的get方法
- (CGFloat)cellHeight
{
//判断如果cell的高度设置了就直接返回
if (_cellHeight) return _cellHeight;
//正文的y值
_cellHeight += 55;
//正文的宽度
CGSize cellSize = CGSizeMake(XFJ_screenW - 2 * XFJ_margin, MAXFLOAT);
_cellHeight += [self.text boundingRectWithSize:cellSize options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName :[UIFont systemFontOfSize:15]} context:nil].size.height + XFJ_margin;
if (self.type != XFJTopicTypeWord) {
//中间的内容的宽度
CGFloat middleW = cellSize.width;
//中间内容的高度
CGFloat middleH = middleW * self.height / self.width;
//中间内容的X值
CGFloat middleX = XFJ_margin;
//中间内容的Y值
CGFloat middleY = _cellHeight;
//中间内容的frame值
self.middleFrame = CGRectMake(middleX, middleY, middleW, middleH);
//中间内容的高度加上10
_cellHeight += middleH + XFJ_margin;
}
//如果有最热评论
if (self.top_cmt.count) {
_cellHeight += 21;

//取出用户名
NSString *userName = self.top_cmt.firstObject[@"user"][@"username"];
//取出评论内容
NSString *content = self.top_cmt.firstObject[@"content"];
//判断没有文字评论,是语音评论
if (content.length == 0) {
content = @"[语音评论]";
}
//拼接评论的文字
NSString *topCmtText = [NSString stringWithFormat:@"%@ : %@",userName,content];
//计算文字评论的高度
_cellHeight += [topCmtText boundingRectWithSize:cellSize options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:16]} context:nil].size.height + XFJ_margin;
}
//加上工具条
_cellHeight += 35 + XFJ_margin;

return _cellHeight;
}

//判断如果不是段子那么就是声音,图片和视频
/*
屏幕高度    屏幕宽度
------ =  -------
图片高度    图片宽度
*/

六 布局cell中间的子控件

1 一提到布局,那么自然而然的就是在layoutSubviews里面书写代码了.

#pragma mark - 布局子控件
- (void)layoutSubviews
{
[super layoutSubviews];
//不同类型的frame值
switch (self.topices.type) {
case XFJTopicTypePicture:
self.topicesPicture.frame = self.topices.middleFrame;
break;
case XFJTopicTypeVideo:
self.topicesVideo.frame = self.topices.middleFrame;
break;
case XFJTopicTypeVoice:
self.topicesVoice.frame = self.topices.middleFrame;
break;
default:
break;
}
}

self.middleFrame = CGRectMake(middleX, middleY, middleW, middleH);

七 处理声音

1 构建声音模块的xib文件,做好自动布局

2 搭建声音模块xib的两种方式

3 查看plist文件中关于声音模块中需要的模型属性,添加属性

/**
*  图片0
*/
@property (nonatomic, strong) NSString *image0;
/**
*  图片1
*/
@property (nonatomic, strong) NSString *image1;
/**
*  图片2
*/
@property (nonatomic, strong) NSString *image2;
/**
*  播放量
*/
@property (nonatomic, assign) NSInteger playcount;
/**
*  播放时长
*/
@property (nonatomic, assign) NSInteger voicetime;

4 在声音模块的类中定义模型属性,重写模型的set方法,用来作为对应xib中子控件赋值.

#pragma mark - 模型的set方法
- (void)setTopicesVoice:(XFJItem *)topicesVoice
{
_topicesVoice = topicesVoice;
//设置图片
[self.voicesBackgroundImageView sd_setImageWithURL:[NSURL URLWithString:topicesVoice.image1]];
//设置播放次数
if (topicesVoice.playcount >= 10000) {
self.playcountLabel.text = [NSString stringWithFormat:@"%.1f万人播放",topicesVoice.playcount / 10000.0];
}else{
self.playcountLabel.text = [NSString stringWithFormat:@"%zd人播放",topicesVoice.playcount];
}
self.voicetimeLabel.text = [NSString stringWithFormat:@"%02zd : %02zd",topicesVoice.voicetime / 60,topicesVoice.voicetime % 60];
}

5 能显示在cell中的核心代码

self.topicesVoice.topicesVoice = topices;//在第(二)已经写过了,这里强调一下

八 知识点补充

1 会不会出现先调用layoutSubViews然后在调用计算frame的模型中的方法呢?

2 我们通过创建类同时创建xib的时候,就算我们不绑定标识符,tableView运行的时候,也是会从缓存池中去取相应的cell,为什么?

//注册
[self.tableView registerNib:[UINib nibWithNibName:NSStringFromClass([XFJTopicesViewCell class]) bundle:nil] forCellReuseIdentifier:ID];

九 autoresizing的问题

1 通过xib创建的蓝色的view和通过代码创建的红色的view,将蓝色加入到红色的view中,点击控制器的view,运行的变化图.(一)

2 黄色的view和红色的view都是通过纯代码创建的,将黄色加入到红色的view中,点击控制器的view,运行的变化图.(二)

3 原因: autoresizing的作用,通过xib创建的空间和通过纯代码创建的空间不一样(因为autoresizing的作用)–>宽度和高度跟随父控件变化而变化.在给cell添加中间的xib的时候很有可能会发生这种情况,这就是因为autoresizing的作用导致的.

4 注意: 如果要取消这种功能,直接用代码去掉,不要在xib中去掉

// 去掉默认的自动拉伸宽高功能
blueView.autoresizingMask = UIViewAutoresizingNone;

5 在开发中海有哪些控件创建就会默认拉伸?

6 注意: 一个控件尺寸运行中的时候尺寸很可能会发生变化,这是因为autoresizing的作用导致的

7 调试: 如果在以后写程序的时候,自己明明设置了宽高,但是运行的时候就是不出现,那么很可能是因为autoresizing的作用,可以先打印运行时候子控件的frame,然后在延迟几秒打印出控件的尺寸,就会发现问题.

十 xib会出现的错误

1 创建图片文件,并且创建xib(运行的时候报错了)

错误信息
-[UIViewController _loadViewFromNibNamed:bundle:] loaded the "XFJPictureView" nib but the view outlet was not set.

2 解决: 但是改善了,运行的时候又报错了.原因是控制器需要一个tableView,但是给了控制器一个普通的view,所以控制器不认,那么就会报错.

-[UITableViewController loadView] loaded the "XFJPictureView" nib but didn't get a UITableView.

3 最终方案: 创建不同名的xib

十一 总结

** 今天写的比较多,里面也有很多是开发中需要用到的东西.明天还会继续完善百思app,希望能带给大家最好的,如果有什么问题,直接给我留言,我会一 一解答.最后大家如果觉得我的博客写得还行,那么请关注我的官方博客,谢谢!!!!