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

自定义等高cell.

1. 通过纯代码方式创建:

--- Frame方式

--- Autolayout方式

2. XIB

3. StoryBoard

效果图都如下:

实现思路及简要过程:

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"

@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]) {
        // 添加子控件
        /** 图标 */
        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];
        priceLabel.font = [UIFont systemFontOfSize:15];
        priceLabel.textColor = [UIColor orangeColor];
        [self.contentView addSubview:priceLabel];
        self.priceLabel = priceLabel;
        
        /** 购买数 */
        UILabel *buyCountLabel = [[UILabel alloc] init];
        buyCountLabel.textAlignment = NSTextAlignmentRight;
        buyCountLabel.textColor = [UIColor lightGrayColor];
        buyCountLabel.font = [UIFont systemFontOfSize:14];
        
        [self.contentView addSubview:buyCountLabel];
        self.buyCountLabel = buyCountLabel;
    
    }
    return self;
}

// 设置所有的子控件的frame
- (void)layoutSubviews
{
    [super layoutSubviews];
    
    CGFloat space = 10;
//    CGFloat contentViewW = self.contentView.frame.size.width;
    CGFloat contentViewW = CGRectGetWidth(self.contentView.frame);
//    CGFloat contentViewH = self.contentView.frame.size.height;
    CGFloat contentViewH = CGRectGetHeight(self.contentView.frame);
    /** 图标 */
    CGFloat iconX = space;
    CGFloat iconY = space;
    CGFloat iconW = 80;
    CGFloat iconH = contentViewH - 2 * space;
    self.iconImageView.frame = CGRectMake(iconX, iconY, iconW, iconH);

    /** 标题 */
    CGFloat titleX = iconX + iconW + space;
    CGFloat titleY = iconY;
    CGFloat titleW = contentViewW - titleX - space;
    CGFloat titleH = 20;
    self.titleLabel.frame = CGRectMake(titleX, titleY, titleW, titleH);
    
    /** 标题 */
    CGFloat priceW = 100;
    CGFloat priceH = 15;
    CGFloat priceX = titleX;
    CGFloat priceY = iconH + iconY - priceH;
    self.priceLabel.frame = CGRectMake(priceX, priceY, priceW, priceH);
    
    /** 购买数 */
    CGFloat buyW = 150;
    CGFloat buyH = 15;
    CGFloat buyX = contentViewW - buyW - space;
    CGFloat buyY = iconH + iconY - buyH;
    self.buyCountLabel.frame = CGRectMake(buyX, buyY,buyW, buyH);
    
}

/**
    设置子控件的数据

 */
- (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"
@interface ViewController ()


/**
    所有的数据
 */
@property (nonatomic,strong)NSArray *tgs;

@end

@implementation ViewController

- (NSArray *)tgs
{
    if (_tgs == nil) {
        
        NSString *path =[[NSBundle mainBundle] pathForResource:@"tgs.plist" ofType:nil];
        NSArray *dictArray = [NSArray arrayWithContentsOfFile:path];
        
        NSMutableArray *temp = [NSMutableArray array];
        for (NSDictionary *tgDict in dictArray) {
            [temp addObject:[ZYTg tgWithDict:tgDict]];
        }
        _tgs = temp;
    }
    return _tgs;
}

NSString *ID = @"tg";
- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.tableView.rowHeight = 70;
    
    // 注册的方法
    [self.tableView registerClass:[ZYTgCell class] forCellReuseIdentifier:ID];

}

#pragma -mark 数据源方法

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

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    
    ZYTgCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    
    
    // 设置数据(传递模型)
    cell.tg = self.tgs[indexPath.row];
    
    return cell;
}

@end