微博
**效果展示: **
Snip20160330_1.png
01 cell的封装
这里先补充一个知识点:
以前, 我们都是在我们的UIView里面直接拖一个TableView. 而且, 如果我们需要设置数据源, 还要遵守他的数据源协议, 而且 , 需要的话, 我们还要连线让控制器成为我们的代理, 现在我们完全不需要了. 跟着下面的步骤, 我们来简化代码, 完成这个操作:
- 删除我们原来我的控制器即是原来的
storyboard, 然后我们在原来的位置拖一个UItableView这个tableView不是原来的那个, 我们要拖的是一个UITableView的控制器:
这个是删掉的
Snip20160330_2.png
换成这个:
Snip20160330_3.png
- 这样之后, 我们会发现, 在这个位置
Snip20160330_4.png
他是默认为是UITableViewController的所以我们要将他改成GJViewController(这一步应该在我们将我们控制器继承的对象换成UITableViewController之后才去做的)
- 其次 , 我们应该注意的是这一段代码. 之后我再解释吧:
Snip20160330_5.png
以前, 他是继承自UIView的, 现在我们让他直接继承UITableViewControler
注意到我们以前的那个UIViewController中会自带一个UIView
而, 现在的这个控制器会自带一个tableView, 而且 , 我们的控制器继承了UITableViewControler没有必要再去连线, 遵守协议等等了
还有就是我们的关于数据加载的东西类似于: plist文件导入\模型在这里就不讲了, 我们直接开始我们的创建自定义cell环节
由于我们做的是微博,所以我们的这个cell全部将是由我们的代码完成
02 添加子控件\设置子控件数据
首先, 我们在上面的显示效果中, 发现这个上面有很多的东西: eg: 皇冠, 他的位置, 总是在变化, 所以我们需要自定义cell来完成
再比如说: 我们的plist文件中有的有图片, 有的没有图片, 有的有皇冠, 有的没有皇冠.
算了, 还是直接将plist文件展示出来, 大家看看吧:
Snip20160330_6.png
我们这里面的vip中是1或者是0 显然我们在后面将利用这个东西, 来判断是否显示皇冠
1. 步骤分析:
Snip20160330_7.png
其实这样分的话使我们的条理更加清晰. 然后我们就跟着这个步骤写代码:
**这个是我们控制器中的代码: **
#import "GJViewController.h"
#import "GJStatus.h"
#import "GJStatusCell.h"
@interface GJViewController ()
@property (nonatomic, strong) NSArray *statuses;
@end
@implementation GJViewController
- (void)viewDidLoad
{
[super viewDidLoad];
}
- (NSArray *)statuses
{
if (_statuses == nil) {
// 初始化
// 1.获得plist的全路径
NSString *path = [[NSBundle mainBundle] pathForResource:@"statuses.plist" ofType:nil];
// 2.加载数组
NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];
// 3.将dictArray里面的所有字典转成模型对象,放到新的数组中
NSMutableArray *statusArray = [NSMutableArray array];
for (NSDictionary *dict in dictArray) {
// 3.1.创建模型对象
GJStatus *status = [GJStatus statusWithDict:dict];
// 3.2.添加模型对象到数组中
[statusArray addObject:status];
}
// 4.赋值
_statuses = statusArray;
}
return _statuses;
}
- (BOOL)prefersStatusBarHidden
{
return YES;
}
#pragma mark - 实现数据源方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.statuses.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *ID = @"status";
GJStatusCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
if (cell == nil) {
cell = [[GJStatusCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
}
cell.status = self.statuses[indexPath.row];
return cell;
}
@end
我们的那个模型类的代码这里我就不写了, 主要的还是那几个, 关键就是我们的继承自
UITableViewCell的自定义cell里面的代码:
#import "GJStatusCell.h"
#import "GJStatus.h"
@interface GJStatusCell()
/**
* 头像
*/
@property (nonatomic, weak) UIImageView *iconView;
/**
* 昵称
*/
@property (nonatomic, weak) UILabel *nameView;
/**
* 会员图标
*/
@property (nonatomic, weak) UIImageView *vipView;
/**
* 正文
*/
@property (nonatomic, weak) UILabel *textView;
/**
* 配图
*/
@property (nonatomic, weak) UIImageView *pictureView;
@end
@implementation MJStatusCell
/**
* 构造方法(在初始化对象的时候会调用)
* 一般在这个方法中添加需要显示的子控件
*/
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
// 1.头像
UIImageView *iconView = [[UIImageView alloc] init];
[self.contentView addSubview:iconView];
self.iconView = iconView;
// 2.昵称
UILabel *nameView = [[UILabel alloc] init];
nameView.font = MJNameFont;
[self.contentView addSubview:nameView];
self.nameView = nameView;
// 3.会员图标
UIImageView *vipView = [[UIImageView alloc] init];
vipView.image = [UIImage imageNamed:@"vip"];
[self.contentView addSubview:vipView];
self.vipView = vipView;
// 4.正文
UILabel *textView = [[UILabel alloc] init];
textView.numberOfLines = 0;
textView.font = MJTextFont;
[self.contentView addSubview:textView];
self.textView = textView;
// 5.配图
UIImageView *pictureView = [[UIImageView alloc] init];
[self.contentView addSubview:pictureView];
self.pictureView = pictureView;
}
return self;
}
/**
* 在这个方法中设置子控件的frame和显示数据
*/
- (void)setStatus:(MJStatus *)status
{
_status = status;
// 1.设置数据
[self settingData];
// 2.设置frame
[self settingFrame];
}
/**
* 设置数据
*/
- (void)settingData
{
// 1.头像
self.iconView.image = [UIImage imageNamed:self.status.icon];
// 2.昵称
self.nameView.text = self.status.name;
// 3.会员图标
if (self.status.vip) {
self.vipView.hidden = NO;
self.nameView.textColor = [UIColor redColor];
} else {
self.vipView.hidden = YES;
self.nameView.textColor = [UIColor blackColor];
}
// 4.正文
self.textView.text = self.status.text;
// 5.配图
self.pictureView.image = [UIImage imageNamed:self.status.picture];
}
设置frame
由于我们的这个程序中的cell的尺寸不固定, 所以我们要一个一个的算,
其实我们的这个frame主要靠的是计算.
首先, 我们的选择是一个一个控件的计算:
**头像: **
// 子控件之间的间距
CGFloat padding = 10;
// 1.头像
CGFloat iconX = padding;
CGFloat iconY = padding;
CGFloat iconW = 30;
CGFloat iconH = 30;
self.iconView.frame = CGRectMake(iconX, iconY, iconW, iconH);
**昵称: **
// 昵称的字体
#define GJNameFont [UIFont systemFontOfSize:14]
/**
* 计算文字尺寸
*
* @param text 需要计算尺寸的文字
* @param font 文字的字体
* @param maxSize 文字的最大尺寸
*/
- (CGSize)sizeWithText:(NSString *)text font:(UIFont *)font maxSize:(CGSize)maxSize
{
NSDictionary *attrs = @{NSFontAttributeName : font};
return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;
}
// 2.昵称
// 文字的字体
CGSize nameSize = [self sizeWithText:self.status.name font:GJNameFont maxSize:CGSizeMake(MAXFLOAT, MAXFLOAT)];
CGFloat nameX = CGRectGetMaxX(self.iconView.frame) + padding;
CGFloat nameY = iconY + (iconH - nameSize.height) * 0.5;
self.nameView.frame = CGRectMake(nameX, nameY, nameSize.width, nameSize.height);
**皇冠标志: **
// 3.会员图标
CGFloat vipX = CGRectGetMaxX(self.nameView.frame) + padding;
CGFloat vipY = nameY;
CGFloat vipW = 14;
CGFloat vipH = 14;
self.vipView.frame = CGRectMake(vipX, vipY, vipW, vipH);
**正文: **
// 正文的字体
#define GJTextFont [UIFont systemFontOfSize:15]
// 4.正文
CGFloat textX = iconX;
CGFloat textY = CGRectGetMaxY(self.iconView.frame) + padding;
CGSize textSize = [self sizeWithText:self.status.text font:GJTextFont maxSize:CGSizeMake(300, MAXFLOAT)];
self.textView.frame = CGRectMake(textX, textY, textSize.width, textSize.height);
**配图: **
// 5.配图
if (self.status.picture) {// 有配图
CGFloat pictureX = textX;
CGFloat pictureY = CGRectGetMaxY(self.textView.frame) + padding;
CGFloat pictureW = 100;
CGFloat pictureH = 100;
self.pictureView.frame = CGRectMake(pictureX, pictureY, pictureW, pictureH);
}
而我们每一个cell的宽度暂时先设为400, 后面我们在订正
引入frame模型
关于我们上面的代码的缺点:
由于我们上面的代码中, 我们的cell都是利用了cell的循环利用, 其原理在这里我就不说了, 但是 注意的是, 在这里, 我们的所要创建的cell都是不同的, 其中还包括:
- 皇冠有的展示, 有的不展示
- 配图有的有, 而有的却没有
但是, 无论有没有, 我们的每一个cell都将具有最多cell的子控件. 而我们在利用缓存池加载我们的cell的时候, 如果没有图片的也加载出来怎么办???
所以我们呢就需要对代码进一步的优化:
// 3.会员图标
if (self.status.vip) {
self.vipView.hidden = NO;
self.nameView.textColor = [UIColor redColor];
} else {
self.vipView.hidden = YES;
self.nameView.textColor = [UIColor blackColor];
}
// 5.配图
if (self.status.picture) { // 有配图
self.pictureView.hidden = NO;
self.pictureView.image = [UIImage imageNamed:self.status.picture];
} else { // 没有配图
self.pictureView.hidden = YES;
}
就上面的两个子控件, 我们利用if语句就可以解决我们一开始提到的问题.
要提到的是, 一旦有hidden = YES; 就必须有hidden = NO;
其实, 这个有关于frame模型, 具体的知识点, 我就不做过多地的介绍了, 直接上代码了, 这个完全可以通过代码, 了解知识点.而且. 这一次的代码真的是大大改. 我也会在写代码的时候, 说一些比较难的点.
代码:
**控制器.m的代码: **
#import "GJViewController.h"
#import "GJStatus.h"
#import "GJStatusFrame.h"
#import "GJStatusCell.h"
@interface GJViewController ()
//@property (nonatomic, strong) NSArray *statuses;
/**
* 存放所有cell的frame模型数据
*/
@property (nonatomic, strong) NSArray *statusFrames;
@end
@implementation GJViewController
- (void)viewDidLoad
{
[super viewDidLoad];
}
- (NSArray *)statusFrames
{
if (_statusFrames == nil) {
// 初始化
// 1.获得plist的全路径
NSString *path = [[NSBundle mainBundle] pathForResource:@"statuses.plist" ofType:nil];
// 2.加载数组
NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];
// 3.将dictArray里面的所有字典转成模型对象,放到新的数组中
NSMutableArray *statusFrameArray = [NSMutableArray array];
for (NSDictionary *dict in dictArray) {
// 3.1.创建GJStatus模型对象
GJStatus *status = [GJStatus statusWithDict:dict];
// 3.2.创建GJStatusFrame模型对象
GJStatusFrame *statusFrame = [[GJStatusFrame alloc] init];
statusFrame.status = status;
// 3.2.添加模型对象到数组中
[statusFrameArray addObject:statusFrame];
}
// 4.赋值
_statusFrames = statusFrameArray;
}
return _statusFrames;
}
- (BOOL)prefersStatusBarHidden
{
return YES;
}
#pragma mark - 实现数据源方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.statusFrames.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
// 1.创建cell
GJStatusCell *cell = [GJStatusCell cellWithTableView:tableView];
// 2.在这个方法算好了cell的高度
cell.statusFrame = self.statusFrames[indexPath.row];
// 3.返回cell
return cell;
}
#pragma mark - 实现代理方法
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
// 取出这行对应的frame模型
GJStatusFrame *statusFrame = self.statusFrames[indexPath.row];
return statusFrame.cellHeight;
}
@end
cell数据类的代码我就不写了, 因为很简单, 就是我们以前将我们的plist文件转模型
**cell的frame模型.h文件: **
// 这个模型对象专门用来存放cell内部所有的子控件的frame数据 + cell的高度
// 一个cell拥有一个GJStatusFrame模型
#import <Foundation/Foundation.h>
@class GJStatus;
@interface GJStatusFrame : NSObject
/**
* 头像的frame
*/
@property (nonatomic, assign, readonly) CGRect iconF;
/**
* 昵称的frame
*/
@property (nonatomic, assign, readonly) CGRect nameF;
/**
* 会员图标的frame
*/
@property (nonatomic, assign, readonly) CGRect vipF;
/**
* 正文的frame
*/
@property (nonatomic, assign, readonly) CGRect textF;
/**
* 配图的frame
*/
@property (nonatomic, assign, readonly) CGRect pictureF;
/**
* cell的高度
*/
@property (nonatomic, assign, readonly) CGFloat cellHeight;
@property (nonatomic, strong) GJStatus *status;
@end
**frame模型.m文件: **
// 昵称的字体
#define MJNameFont [UIFont systemFontOfSize:14]
// 正文的字体
#define MJTextFont [UIFont systemFontOfSize:15]
#import "MJStatusFrame.h"
#import "MJStatus.h"
@implementation MJStatusFrame
/**
* 计算文字尺寸
*
* @param text 需要计算尺寸的文字
* @param font 文字的字体
* @param maxSize 文字的最大尺寸
*/
- (CGSize)sizeWithText:(NSString *)text font:(UIFont *)font maxSize:(CGSize)maxSize
{
NSDictionary *attrs = @{NSFontAttributeName : font};
return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;
}
- (void)setStatus:(MJStatus *)status
{
_status = status;
// 子控件之间的间距
CGFloat padding = 10;
// 1.头像
CGFloat iconX = padding;
CGFloat iconY = padding;
CGFloat iconW = 30;
CGFloat iconH = 30;
_iconF = CGRectMake(iconX, iconY, iconW, iconH);
// 2.昵称
// 文字的字体
CGSize nameSize = [self sizeWithText:self.status.name font:MJNameFont maxSize:CGSizeMake(MAXFLOAT, MAXFLOAT)];
CGFloat nameX = CGRectGetMaxX(_iconF) + padding;
CGFloat nameY = iconY + (iconH - nameSize.height) * 0.5;
_nameF = CGRectMake(nameX, nameY, nameSize.width, nameSize.height);
// 3.会员图标
CGFloat vipX = CGRectGetMaxX(_nameF) + padding;
CGFloat vipY = nameY;
CGFloat vipW = 14;
CGFloat vipH = 14;
_vipF = CGRectMake(vipX, vipY, vipW, vipH);
// 4.正文
CGFloat textX = iconX;
CGFloat textY = CGRectGetMaxY(_iconF) + padding;
CGSize textSize = [self sizeWithText:self.status.text font:MJTextFont maxSize:CGSizeMake(300, MAXFLOAT)];
_textF = CGRectMake(textX, textY, textSize.width, textSize.height);
// 5.配图
if (self.status.picture) {// 有配图
CGFloat pictureX = textX;
CGFloat pictureY = CGRectGetMaxY(_textF) + padding;
CGFloat pictureW = 100;
CGFloat pictureH = 100;
_pictureF = CGRectMake(pictureX, pictureY, pictureW, pictureH);
_cellHeight = CGRectGetMaxY(_pictureF) + padding;
} else {
_cellHeight = CGRectGetMaxY(_textF) + padding;
}
}
@end
**继承自UITableViewCell的cell.h文件: **
#import <UIKit/UIKit.h>
@class GJStatusFrame;
@interface GJStatusCell : UITableViewCell
@property (nonatomic, strong) GJStatusFrame *statusFrame;
+ (instancetype)cellWithTableView:(UITableView *)tableView;
@end
**继承自UITableViewCell的cell.m文件: **
// 昵称的字体
#define MJNameFont [UIFont systemFontOfSize:14]
// 正文的字体
#define MJTextFont [UIFont systemFontOfSize:15]
#import "MJStatusCell.h"
#import "MJStatus.h"
#import "MJStatusFrame.h"
@interface MJStatusCell()
/**
* 头像
*/
@property (nonatomic, weak) UIImageView *iconView;
/**
* 昵称
*/
@property (nonatomic, weak) UILabel *nameView;
/**
* 会员图标
*/
@property (nonatomic, weak) UIImageView *vipView;
/**
* 正文
*/
@property (nonatomic, weak) UILabel *textView;
/**
* 配图
*/
@property (nonatomic, weak) UIImageView *pictureView;
@end
@implementation MJStatusCell
/**
* 构造方法(在初始化对象的时候会调用)
* 一般在这个方法中添加需要显示的子控件
*/
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
// 1.头像
UIImageView *iconView = [[UIImageView alloc] init];
[self.contentView addSubview:iconView];
self.iconView = iconView;
// 2.昵称
UILabel *nameView = [[UILabel alloc] init];
nameView.font = MJNameFont;
[self.contentView addSubview:nameView];
self.nameView = nameView;
// 3.会员图标
UIImageView *vipView = [[UIImageView alloc] init];
vipView.image = [UIImage imageNamed:@"vip"];
[self.contentView addSubview:vipView];
self.vipView = vipView;
// 4.正文
UILabel *textView = [[UILabel alloc] init];
textView.numberOfLines = 0;
textView.font = MJTextFont;
[self.contentView addSubview:textView];
self.textView = textView;
// 5.配图
UIImageView *pictureView = [[UIImageView alloc] init];
[self.contentView addSubview:pictureView];
self.pictureView = pictureView;
}
return self;
}
/**
* 在这个方法中设置子控件的frame和显示数据
*/
- (void)setStatusFrame:(MJStatusFrame *)statusFrame
{
_statusFrame = statusFrame;
// 1.设置数据
[self settingData];
// 2.设置frame
[self settingFrame];
}
/**
* 设置数据
*/
- (void)settingData
{
// 微博数据
MJStatus *status = self.statusFrame.status;
// 1.头像
self.iconView.image = [UIImage imageNamed:status.icon];
// 2.昵称
self.nameView.text = status.name;
// 3.会员图标
if (status.vip) {
self.vipView.hidden = NO;
self.nameView.textColor = [UIColor redColor];
} else {
self.vipView.hidden = YES;
self.nameView.textColor = [UIColor blackColor];
}
// 4.正文
self.textView.text = status.text;
// 5.配图
if (status.picture) { // 有配图
self.pictureView.hidden = NO;
self.pictureView.image = [UIImage imageNamed:status.picture];
} else { // 没有配图
self.pictureView.hidden = YES;
}
}
/**
* 计算文字尺寸
*
* @param text 需要计算尺寸的文字
* @param font 文字的字体
* @param maxSize 文字的最大尺寸
*/
- (CGSize)sizeWithText:(NSString *)text font:(UIFont *)font maxSize:(CGSize)maxSize
{
NSDictionary *attrs = @{NSFontAttributeName : font};
return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;
}
/**
* 设置frame
*/
- (void)settingFrame
{
// 1.头像
self.iconView.frame = self.statusFrame.iconF;
// 2.昵称
self.nameView.frame = self.statusFrame.nameF;
// 3.会员图标
self.vipView.frame = self.statusFrame.vipF;
// 4.正文
self.textView.frame = self.statusFrame.textF;
// 5.配图
if (self.statusFrame.status.picture) {// 有配图
self.pictureView.frame = self.statusFrame.pictureF;
}
}
+ (instancetype)cellWithTableView:(UITableView *)tableView
{
static NSString *ID = @"status";
MJStatusCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
if (cell == nil) {
cell = [[MJStatusCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
}
return cell;
}
@end
知识点:
我们拥有两个模型: a.用于存储cell数据的模型 ; b.用于设置cellframe\存储数据模型
然而我们发现, 在我们控制器中只发现了frame模型, 这是由于我们的frame模型里面加载了存储数据模型, 所以我们控制器中一旦拥有了frame模型, 那么存储数据模型也被控制器拥有了
为什么我们要将存储数据模型加载到frame模型中???
我们要设置每一个cell的尺寸. 首先要拿到每一个cell的内部数据, 才能计算,每一个cell的尺寸貌似这样做很麻烦, 为什么???
这个代码的整体是比较麻烦, 而且其他方法比较简单, 但是这样做事为了, 程序的流畅性考虑的, 以前的那种写法, 就是将我们计算cell的frame直接写到我们改写的setter方法中, 这样做的后果就是, 每当我们创建一个cell时, 都需要重新计算一次cell的frame, 这样会导致, 程序运行起来不够流畅
- 我们的
tableView中有一个代理方法 也是和我们的cell 高度有关,
为什么不直接在这个方法中设设置cell高度呢???
因为, 如果要计算我们每一个cell的高度, 都必须要我们的继承自tableViewCell的cell传入计算好的值给我们的控制器, 这样没有办法完成.
还有就是在程序中cell创建中, 这个方法只调用一次, 所以也没有办法完成.
步骤总结:
通过代码自定义cell(cell的高度不一致)
1.新建一个继承自UITableViewCell的类
2.重写initWithStyle:reuseIdentifier:方法
- 添加所有需要显示的子控件(不需要设置子控件的数据和frame, 子控件要添加到contentView中)
- 进行子控件一次性的属性设置(有些属性只需要设置一次, 比如字体\固定的图片)
3.提供2个模型
- 数据模型: 存放文字数据\图片数据
- frame模型: 存放数据模型\所有子控件的frame\cell的高度
4.cell拥有一个frame模型(不要直接拥有数据模型)
5.重写frame模型属性的setter方法: 在这个方法中设置子控件的显示数据和frame
6.frame模型数据的初始化已经采取懒加载的方式(每一个cell对应的frame模型数据只加载一次)
作者说:
很抱歉, 现在才更新, 最近课程太多了, 让我有点感觉是在高三, 而不是在大一, 在后面我们努力的.
