iOS开发——UI进阶篇（二）自定义等高cell，xib自定义等高的cell，Autolayout布局子控件，团购案例

一、纯代码自定义等高cell

---

首先创建一个继承UITableViewCell的类
@interface XMGTgCell : UITableViewCell
在该类中依次做一下操作
1.添加子控件

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
// 图片
UIImageView *iconImageView = [[UIImageView alloc] init];
[self.contentView addSubview:iconImageView];
self.iconImageView = iconImageView;

// 标题
UILabel *titleLabel = [[UILabel alloc] init];
[self.contentView addSubview:titleLabel];
self.titleLabel = titleLabel;

// 价格
UILabel *priceLabel = [[UILabel alloc] init];
[self.contentView addSubview:priceLabel];
self.priceLabel = priceLabel;

// 购买数
UILabel *buyCountLabel = [[UILabel alloc] init];
[self.contentView addSubview:buyCountLabel];
self.buyCountLabel = buyCountLabel;
}
return self;
}

2.布局子控件

/**

* 需要注意的是通过initWithStyle:创建cell，就不会调用下面这个方法
* - (instancetype)initWithFrame:(CGRect)frame;
* 那么可以在layoutSubviews中计算所有子控件的frame

* 需求：图片与lable之间，lable与屏幕的margin都是10（加配图）
*/

- (void)layoutSubviews
{
[super layoutSubviews];

CGFloat margin = 10;
CGFloat contentH = self.contentView.frame.size.height;
CGFloat contentW = self.contentView.frame.size.width;

// 图片
CGFloat iconX = margin;
CGFloat iconY = margin;
CGFloat iconW = 80;
CGFloat iconH = contentH - 2 * iconY;
self.iconImageView.frame = CGRectMake(iconX, iconY, iconW, iconH);

// 标题
CGFloat titleX = iconX + iconW + margin;
CGFloat titleY = iconY;
CGFloat titleW = contentW - titleX - margin;
CGFloat titleH = 20;
self.titleLabel.frame = CGRectMake(titleX, titleY, titleW, titleH);

// 价格
CGFloat priceX = titleX;
CGFloat priceH = 15;
CGFloat priceY = iconY + iconH - priceH;
CGFloat priceW = 100;
self.priceLabel.frame = CGRectMake(priceX, priceY, priceW, priceH);

// 购买数
CGFloat buyCountW = 150;
CGFloat buyCountH = 13;
CGFloat buyCountX = contentW - margin - buyCountW;
CGFloat buyCountY = iconY + iconH - buyCountH;
self.buyCountLabel.frame = CGRectMake(buyCountX, buyCountY, buyCountW, buyCountH);
}

3.设置子控件数据
在设置数据之前，我们可以创建一个TG类，用于保存每一个cell的数据，这就是典型的数据转模型，在前面也有介绍过，比如我们的数据是这样的

实现代码：

/******************* XMGTg.h *******************/
#import <Foundation/Foundation.h>

@interface XMGTg : NSObject
/** 标题 */
@property (nonatomic, copy) NSString *title;
/** 购买数 */
@property (nonatomic, copy) NSString *buyCount;
/** 图片 */
@property (nonatomic, copy) NSString *icon;
/** 价格 */
@property (nonatomic, copy) NSString *price;

+ (instancetype)tgWithDict:(NSDictionary *)dict;
@end

/******************* XMGTg.m *******************/
#import "XMGTg.h"

@implementation XMGTg
+ (instancetype)tgWithDict:(NSDictionary *)dict
{
XMGTg *tg = [[self alloc] init];
[tg setValuesForKeysWithDictionary:dict];
return tg;
}
@end

/******************* XMGTgCell *******************/
#import <UIKit/UIKit.h>
@class XMGTg;

@interface XMGTgCell : UITableViewCell
/** 团购模型数据 */
@property (nonatomic, strong) XMGTg *tg;
@end

// 那么重写tg的setter方法就可以设置数据了
- (void)setTg:(XMGTg *)tg
{
_tg = tg;

self.iconImageView.image = [UIImage imageNamed:tg.icon];
self.titleLabel.text = tg.title;
self.priceLabel.text = [NSString stringWithFormat:@"￥%@", tg.price];
self.buyCountLabel.text = [NSString stringWithFormat:@"%@人已购买", tg.buyCount];
}

二、Autolayout布局子控件（Masonry）

---

 

在布局控件时我们可以使用三方框架，Masonry
那么我么可以直接把创建子控件以及布局控件全部写在
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
这个方法中

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
CGFloat margin = 10;

// 图片
UIImageView *iconImageView = [[UIImageView alloc] init];
[self.contentView addSubview:iconImageView];
self.iconImageView = iconImageView;

[iconImageView makeConstraints:^(MASConstraintMaker *make) {
make.left.top.equalTo(self.contentView).offset(margin);
make.bottom.equalTo(self.contentView).offset(-margin);
make.width.equalTo(80);
}];

// 标题
UILabel *titleLabel = [[UILabel alloc] init];
[self.contentView addSubview:titleLabel];
self.titleLabel = titleLabel;

[titleLabel makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(iconImageView);
make.left.equalTo(iconImageView.right).offset(margin);
make.height.equalTo(20);
make.right.equalTo(self.contentView).offset(-margin);
}];

// 价格
UILabel *priceLabel = [[UILabel alloc] init];
priceLabel.font = [UIFont systemFontOfSize:15];
priceLabel.textColor = [UIColor orangeColor];
[self.contentView addSubview:priceLabel];
self.priceLabel = priceLabel;

[priceLabel makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(titleLabel);
make.bottom.equalTo(iconImageView);
make.size.equalTo(CGSizeMake(100, 15));
}];

// 购买数
UILabel *buyCountLabel = [[UILabel alloc] init];
buyCountLabel.font = [UIFont systemFontOfSize:13];
buyCountLabel.textColor = [UIColor grayColor];
buyCountLabel.textAlignment = NSTextAlignmentRight;
[self.contentView addSubview:buyCountLabel];
self.buyCountLabel = buyCountLabel;

[buyCountLabel makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(iconImageView);
make.right.equalTo(titleLabel);
make.size.equalTo(CGSizeMake(150, 13));
}];
}
return self;
}

三、字典转模型的几种方式（MJExtension）

---

1.遍历数组
一般最笨的方法分以下三步：加载字典数组、创建模型数组、将字典数组转换为模型数组
示例代码如下：

- (NSArray *)tgs
{
if (!_tgs) {
// 加载字典数组
NSArray *dictArray = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"tgs" ofType:@"plist"]];

// 创建模型数组
NSMutableArray *tgArray = [NSMutableArray array];

// 将字典数组 -> 模型数组
for (NSDictionary *dict in dictArray) {
XMGTg *tg = [XMGTg tgWithDict:dict];
[tgArray addObject:tg];
} 
_tgs = tgArray;
}
return _tgs;
}

2.世界流行框架MJExtension
再来看看用李明杰的MJExtension框架怎么解决
有一个方法，一句话可以解决

_tgs = [XMGTg objectArrayWithFilename:@"tgs.plist"];

或者这样

_tgs = [XMGTg objectArrayWithFile:[[NSBundle mainBundle] pathForResource:@"tgs" ofType:@"plist"]];

或是这样

_tgs = [XMGTg objectArrayWithKeyValuesArray:[NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"tgs" ofType:@"plist"]]];

那么在上次说到的索引条案例中可以这样写

// 懒加载
- (NSArray *)cargroups
{
if (!_cargroups) { 
// 提前告诉CarGroup类其中的Cars数组要解析成什么模型数组
[CarGroup setupObjectClassInArray:^NSDictionary *{
return @{
@"cars": @"Car"
};
}];
_cargroups = [CarGroup objectArrayWithFilename:@"cars.plist"];

}
return _cargroups;
}

四、xib自定义等高的cell

---

首先可以先创建一个名为XMGTgCell继承UITableViewCell的类
然后创建你想要的xib文件

并且xib中的Custom Class中的class一定要设置成XMGTgCell
最后在XMGTgCell的实现中重写

- (void)setTg:(XMGTg *)tg
设置数据

#import <UIKit/UIKit.h>

@class XMGTg;

@interface XMGTgCell : UITableViewCell
/** 团购模型数据 */
@property (nonatomic, strong) XMGTg *tg;
@end

#import "XMGTgCell.h"
#import "XMGTg.h"

@interface XMGTgCell()
@property (weak, nonatomic) IBOutlet UIImageView *iconImageView;
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
@property (weak, nonatomic) IBOutlet UILabel *priceLabel;
@property (weak, nonatomic) IBOutlet UILabel *buyCountLabel;
@end

@implementation XMGTgCell

- (void)setTg:(XMGTg *)tg
{
_tg = tg;

self.iconImageView.image = [UIImage imageNamed:tg.icon];
self.titleLabel.text = tg.title;
self.priceLabel.text = [NSString stringWithFormat:@"￥%@", tg.price];
self.buyCountLabel.text = [NSString stringWithFormat:@"%@人已购买", tg.buyCount];
}
@end

五、不同类型的cell共存

---

首先在cellForRowAtIndexPath方法中返回不同类型的cell

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (indexPath.row % 2 == 0) {
XMGTgCell *cell = [tableView dequeueReusableCellWithIdentifier:tgID];
cell.tg = self.tgs[indexPath.row];
return cell;
} else {
XMGNewsCell *cell = [tableView dequeueReusableCellWithIdentifier:newsID];
return cell;
} 
}

并且在使用这些cell之前要先注册

- (void)viewDidLoad {
[super viewDidLoad];

self.tableView.rowHeight = 70;

[self.tableView registerNib:[UINib nibWithNibName:NSStringFromClass([XMGTgCell class]) bundle:nil] forCellReuseIdentifier:tgID];
[self.tableView registerNib:[UINib nibWithNibName:NSStringFromClass([XMGNewsCell class]) bundle:nil] forCellReuseIdentifier:newsID];
}

效果如下

六、storyboard自定义cell

这两种不同的cell绑定的Identifier分别为：tg、test
那么让我们来看下代码

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (indexPath.row % 2 == 0) {
static NSString *ID = @"tg";
XMGTgCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

cell.tg = self.tgs[indexPath.row];

return cell;
} else {
return [tableView dequeueReusableCellWithIdentifier:@"test"];
}
}

如果我们在viewDidLoad注册一个Identifier为tg，并且类型为UITableViewCell的cell，会出现什么情况呢

- (void)viewDidLoad {
[super viewDidLoad];

[self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"tg"];
}

经过测试，发现运行程序会直接蹦了，并且报了一个错误
reason: '-[UITableViewCell setTg:]: unrecognized selector sent to instance 0x7f8fcbc2be70'

这里是什么意思呢，首先在这里要知道 "当缓存池中找不到cell 的时候,先根据重用标识从注册这里找,然后再从storysboard中找"
这个错误的意思是发送了一个不能识别的消息-[UITableViewCell setTg:]
也就是说UITableViewCell中的setTg方法它找不到，程序运行到
"cell.tg = self.tgs[indexPath.row];这一句时就会报错，因为我们根本没有在UITableViewCell里创建tg这个属性，自然也就找不到tg的set方法，进而可以验证上面所说的系统会优先选择代码创建的cell而不是storyboard里的"

七、分割线，静态cell

---

分割线的原理：实际上cell中的Content View的高度要比cell少1左右的高度（大概），那么我们可以紧贴着Content View底部添加一个高度为0~1、宽度等于cell的view，并把颜色设置为灰色，最好将self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;不显示分割线

静态cell，iPhone的设置界面就是用的静态cell

八、团购案例（TG）

最后是今天自己敲的完整的代码

团购案例

#import <UIKit/UIKit.h>

@interface ViewController : UITableViewController

@end

#import "ViewController.h"
#import "TgCellTableViewCell.h"
#import "MJExtension.h"
#import "TgCell.h"

#define ID  @"chgCell"

@interface ViewController ()
@property (nonatomic, strong) NSArray *tgCells;
@end

@implementation ViewController
- (NSArray *)tgCells
{
    if (nil == _tgCells) {
        _tgCells = [TgCell objectArrayWithFilename:@"tgs.plist"];
    }
    return _tgCells;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    self.tableView.rowHeight = 70;
    
//    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    
    [self.tableView registerClass:[TgCellTableViewCell class] forCellReuseIdentifier:ID];
    
}

- (NSInteger)tableView:(nonnull UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.tgCells.count;
}

- (UITableViewCell *)tableView:(nonnull UITableView *)tableView cellForRowAtIndexPath:(nonnull NSIndexPath *)indexPath
{
    TgCellTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    cell.tgcell = self.tgCells[indexPath.row];
    
    return cell;
}
@end

/**************** TgCellTableViewCell*******************/
#import <UIKit/UIKit.h>
#import "TgCell.h"
@interface TgCellTableViewCell : UITableViewCell
@property (nonatomic, strong) TgCell *tgcell;
@end

#import "TgCellTableViewCell.h"

@interface TgCellTableViewCell()
// 图标
@property (nonatomic, weak) UIImageView *icon_imageView;
// 标题
@property (nonatomic, weak) UILabel *titel_lable;
// 价格
@property (nonatomic, weak) UILabel *price_lable;
// 购买人数
@property (nonatomic, weak) UILabel *buy_lable;

@end

@implementation TgCellTableViewCell

// 添加一个灰色的边框
- (void)awakeFromNib
{
    self.layer.borderWidth = 1;
    self.layer.borderColor = [UIColor colorWithRed:0.5 green:0.5 blue:0.5 alpha:0.3].CGColor;
}

// 添加所有子控件
- (nonnull instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(nullable NSString *)reuseIdentifier
{
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        // 1.创建图标
        UIImageView *icon_imageView = [[UIImageView alloc] init];
        [self.contentView addSubview:icon_imageView];
        self.icon_imageView = icon_imageView;
        
        // 2.创建标题
        UILabel *titel_lable = [[UILabel alloc] init];
        [self.contentView addSubview:titel_lable];
        self.titel_lable = titel_lable;
        
        // 3.创建价格
        UILabel *price_lable = [[UILabel alloc] init];
        [self.contentView addSubview:price_lable];
        price_lable.textColor = [UIColor orangeColor];
        price_lable.font = [UIFont systemFontOfSize:15];
        self.price_lable = price_lable;
        
        
        // 4.创建购买人数
        UILabel *buy_lable = [[UILabel alloc] init];
        [self.contentView addSubview:buy_lable];
        buy_lable.textAlignment = NSTextAlignmentRight;
        buy_lable.textColor = [UIColor grayColor];
        buy_lable.font = [UIFont systemFontOfSize:13];
        self.buy_lable = buy_lable;
        
    }
    return self;
}



// 布局控件
- (void)layoutSubviews
{
    [super layoutSubviews];
    
    CGFloat margin = 10;
    CGFloat contentW = self.contentView.frame.size.width;
    CGFloat contentH = self.contentView.frame.size.height;
    // 设置frame
    // 1、设置图标的frame
    CGFloat icon_imageViewX = margin;
    CGFloat icon_imageViewY = margin;
    CGFloat icon_imageViewW = 80;
    CGFloat icon_imageViewH = contentH - 2 * margin;
    self.icon_imageView.frame = CGRectMake(icon_imageViewX, icon_imageViewY, icon_imageViewW, icon_imageViewH);
    
    // 2、设置标题的frame
    CGFloat titel_lableX = CGRectGetMaxX(self.icon_imageView.frame) + margin;
    CGFloat titel_lableY = margin;
    CGFloat titel_lableW = contentW - titel_lableX - margin;
    CGFloat titel_lableH = 20;
    self.titel_lable.frame = CGRectMake(titel_lableX, titel_lableY, titel_lableW, titel_lableH);
    
    // 3、设置价格的frame
    CGFloat price_lableX = titel_lableX;
    CGFloat price_lableH = 15;
    CGFloat price_lableW = 100;
    CGFloat price_lableY = CGRectGetMaxY(self.icon_imageView.frame) - price_lableH;
    self.price_lable.frame = CGRectMake(price_lableX, price_lableY, price_lableW, price_lableH);
    
    // 4、设置购买人数的frame
    CGFloat buy_lableX = CGRectGetMaxX(self.price_lable.frame) + margin;
    CGFloat buy_lableH = 13;
    CGFloat buy_lableY = CGRectGetMaxY(self.icon_imageView.frame) - buy_lableH;
    CGFloat buy_lableW = contentW - buy_lableX - margin;
    self.buy_lable.frame = CGRectMake(buy_lableX, buy_lableY, buy_lableW, buy_lableH);
    
}

- (void)setTgcell:(TgCell *)tgcell
{
    _tgcell = tgcell;
    
    self.icon_imageView.image = [UIImage imageNamed:tgcell.icon];
    self.titel_lable.text = tgcell.title;
    self.price_lable.text = [NSString stringWithFormat:@"￥%@",tgcell.price];
    self.buy_lable.text = [NSString stringWithFormat:@"%@人购买",tgcell.buyCount];
}

@end

/**************** TgCell*******************/
#import <Foundation/Foundation.h>

@interface TgCell : NSObject
/** 标题 */
@property (nonatomic, copy) NSString *title;
/** 购买数 */
@property (nonatomic, copy) NSString *buyCount;
/** 图片 */
@property (nonatomic, copy) NSString *icon;
/** 价格 */
@property (nonatomic, copy) NSString *price;
@end

#import "TgCell.h"

@implementation TgCell

@end