UI 一一 自定义等高cell (纯代码-Autolayout)方式

这里使用纯代码的方式来自定义等高cell,使用Autolayout方式: 有autolayout代码,VFL,masonry等实现方式

这三种方式,最重要的也是使用第三方框架Masonry来实现Autolayout.所以我们就使用这种方式来做

需要用到的第三方框架: MJExtension,Masonry

实现思路及简要过程:

其实过程和我上一篇UI 一一 自定义等高cell (纯代码-Frame)方式的思路一模一样.

不同之处就在于:  设置子控件的位置.的方法发生了变化,其他代码几乎一样

1 .新建一个继承自UITableViewCell的子类，比如ZYTgCell

@interface ZYTgCell : UITableViewCell
@end

2. 在ZYTgCell.m文件中

• 重写-initWithStyle:reuseIdentifier:方法
  • 在这个方法中添加所有的子控件
  • 给子控件做一些初始化设置（设置字体、文字颜色等）

/**
 *  在这个方法中添加所有的子控件
 */
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        // ......
    }
    return self;
}

• 重写-layoutSubviews方法
  • 一定要调用[super layoutSubviews]
  • 在这个方法中计算和设置所有子控件的frame

/**
 *  在这个方法中计算所有子控件的frame
 */
- (void)layoutSubviews
{
    [super layoutSubviews];

    // ......
}

3. 在ZYTgCell.h文件中提供一个模型属性，比如ZYTg模型

@class ZYTg;

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

4. 在ZYTgCell.m中重写模型属性的set方法

• 在set方法中给子控件设置模型数据

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

    // .......
}

5. 在控制器中

• 注册cell的类型

[self.tableView registerClass:[ZYTgCell class] forCellReuseIdentifier:ID];

• 给cell传递模型数据

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 访问缓存池
    ZYTgCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];

    // 设置数据(传递模型数据)
    cell.tg = self.tgs[indexPath.row];

    return cell;
}

具体代码实现:

ZYTg文件

#import <Foundation/Foundation.h>

@interface ZYTg : NSObject

/** 图标 */
@property (nonatomic, copy) NSString *icon;

/** 标题 */
@property (nonatomic, copy) NSString *title;

/** 价格 */
@property (nonatomic, copy) NSString *price;

/** 购买数 */
@property (nonatomic, copy) NSString *buyCount;


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

@end

@implementation ZYTg


+ (instancetype)tgWithDict:(NSDictionary *)dict
{
    ZYTg *tg = [[self alloc] init];
    
    // 属性和plist中的数据一一对应的时候,可以使用KVC的方法
    [tg setValuesForKeysWithDictionary:dict];
    
    return tg;
}

@end

ZYTgCell文件

#import <UIKit/UIKit.h>
@class ZYTg;
@interface ZYTgCell : UITableViewCell

/** 团购模型 */
@property(nonatomic, strong)ZYTg * tg;

@end

#import "ZYTg.h"

// 这个两个宏必须写在Masonry.h的前面
// 方法名和参数的前缀mas可以不写
#define MAS_SHORTHAND

// 可以不写mas_equalTo的前缀mas
#define MAS_SHORTHAND_GLOBALS

#import "Masonry.h"

@interface ZYTgCell ()

/** 图标 */
@property (nonatomic, weak) UIImageView *iconImageView;

/** 标题 */
@property (nonatomic, weak) UILabel *titleLabel;

/** 价格 */
@property (nonatomic, weak) UILabel *priceLabel;

/** 购买数 */
@property (nonatomic, weak) UILabel *buyCountLabel;

@end

@implementation ZYTgCell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        // 添加子控件
        /** 图标 */
        CGFloat space = 10;
        UIImageView *iconImageView = [[UIImageView alloc] init];
        [self.contentView addSubview:iconImageView];
        self.iconImageView = iconImageView;
        
        
        [iconImageView makeConstraints:^(MASConstraintMaker *make) {
//            make.left.equalTo(self.contentView.left).offset(space);
//            make.top.equalTo(self.contentView.top).offset(space);
            make.left.and.top.equalTo(self.contentView).offset(space);
            make.bottom.equalTo(self.contentView).offset(-space);
            make.width.equalTo(80);
        }];
        
        /** 标题 */
        UILabel *titleLabel = [[UILabel alloc] init];
        [self.contentView addSubview:titleLabel];
        self.titleLabel = titleLabel;
        
        [titleLabel makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(iconImageView.top);
            make.left.equalTo(iconImageView.right).offset(space);
            make.right.equalTo(self.contentView.right).offset(-space);
            make.height.equalTo(20);
            
        }];
        
        
        /** 价格 */
        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.left);
            make.bottom.equalTo(self.contentView.bottom).offset(-space);
            make.size.equalTo(CGSizeMake(100, 15));
        }];
        
        /** 购买数 */
        UILabel *buyCountLabel = [[UILabel alloc] init];
        buyCountLabel.textAlignment = NSTextAlignmentRight;
        buyCountLabel.textColor = [UIColor lightGrayColor];
        buyCountLabel.font = [UIFont systemFontOfSize:14];
        
        [self.contentView addSubview:buyCountLabel];
        self.buyCountLabel = buyCountLabel;
        
        [buyCountLabel makeConstraints:^(MASConstraintMaker *make) {
            make.bottom.equalTo(iconImageView.bottom);
            make.right.equalTo(titleLabel.right);
            make.size.equalTo(CGSizeMake(150, 14));
            
        }];
       
    
    }
    return self;
}

// 设置所有的子控件的frame
//- (void)layoutSubviews
//{
//    [super layoutSubviews];
//    
//}

/**
    设置子控件的数据

 */
- (void)setTg:(ZYTg *)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

ViewController 文件

#import "ViewController.h"
#import "ZYTgCell.h"
#import "ZYTg.h"
#import "MJExtension.h"
@interface ViewController ()

@property (nonatomic,strong)NSArray *tgs;

@end

@implementation ViewController

- (NSArray *)tgs
{
    if (!_tgs) {
        
//        NSArray *dictArray = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"tgs.plist" ofType:nil]];
        
//        NSMutableArray *temp = [NSMutableArray array];
//        for (NSDictionary *tgDict in dictArray) {
//            [temp addObject:[ZYTg tgWithDict:tgDict]];
//        }
        
        // 当数据从网络上加载的时候使用这个方法
//        _tgs = [ZYTg mj_objectArrayWithKeyValuesArray:dictArray];
//        _tgs = [ZYTg mj_objectArrayWithFile:[[NSBundle mainBundle] pathForResource:@"tgs.plist" ofType:nil]];
        
        // 使用plist加载
        _tgs = [ZYTg mj_objectArrayWithFilename:@"tgs.plist"];
    }
    return _tgs;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.tableView.rowHeight = 70;

}

#pragma -mark 数据源方法

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

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *ID = @"tg";
    ZYTgCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    
    if (cell == nil) {
        cell = [[ZYTgCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
    }
    // 设置数据(传递模型)
    cell.tg = self.tgs[indexPath.row];
    
    return cell;
}

@end