UI017: UITableView xib自定义Cell实现团购

实现团购:自定义Cell

• 通过xib实现自定义Cell

每个cell中的内容是固定的，控件个数、位置、尺寸等都是一样的时候(团购案例)

• 完全手写，实现自定义cell

每个cell中的结构不一样，控件个数、延时等都是不一样的时候(微博案例)

系统自带的cell不好用，那么就是用自定义Cell。

MVC方式组织项目结构：group分组。

Models，Views，Controllers，Others，Supporting Files

使用自定义单元格。使用xib重定义cell

新建xib：new--iOS--UserInterface--Empty--CZGoodsCell.xib
往xib中，拖拽1个UITableViewCell控件。设置高度44.
往里面拖图片框：高度宽度40，x=5,y=2
添加Label，用于显示名称：
添加Label，用于显示价格：
添加Label，显示已购买的数量。

自己写一个类CZGoodsCell:继承自 UITableViewCell，将该类CZGoodsCell设置到Xib的Class属性中。

给xib的cell的控件拖线： 到 CZGoodsCell.m中。

// CXGoodsCell.h
#import <UIKit/UIKit.h>
@interface CXGoodsCell: UITableViewCell
@property(nonatomic, strong) CZGoods *goods;

+ (instancetype)goodsCellWithTableView:(UITableView *)tableView; // 封装1个创建自定义cell的方法。
@end


#import "CZGoodsCell.h"
@interface CZGoodsCell()
// 4个控件拖线
@property(weak, nonatomic) IBOutlet UIImageView *imgViewIcon;
@property(weak, nonatomic) IBOutlet UILabel *lblTitle;
@property(weak, nonatomic) IBOutlet UILabel *lblPrice;
@property(weak, nonatomic) IBOutlet UILabel *lblBuyCount;

@end

@implementation CZGoodsCell
+ (instancetype)goodsCellWithTableView:(UITableView *)tableView
{
    static NSString *ID = @"goods_cell"; 
    UITableViewCell *cell =[tableView dequeueReusableCellWithIdentifier:ID];
    if(cell == nil) {
        cell = [[[NSBundle mainBundle] loadNibNamed:@"CZGoodsCell" owner:nil options:nil] firstObject];
        // 选中xib文件，属性中Identifier中设置可重用id的名称：goods_cell，给xib指定可重用id。
    }
    return cell;
}
// 重写goods属性的setter方法，给数据赋值。
- (void)setGoods: (CZGoods *) goods 
{
    _goods = goods;
    // 把模型数据，设置给子控件。
    self.imgViewIcon.image = [UIImage imageNamed:goods.icon];
    self.lblTitle.text = goods.title;
    self.lblPrice.text = [NSString stringWithFormat:@"￥ %@",goods.price];
    self.lblBuyCount.text = [NSString stringWithFormat:@"%@ 人已购买",goods.buyCount];
}
@end

// 通过xib的方式来创建单元格

-(UITableViewCell *)tableView: (UITableView *)tableView cellForRowAtIndexPath: (NSIndexPath *)indexPath {
    // 1.获取数据模型
    CZGoods *model = self.goods[indexPath.row];
    // 2. 创建单元格：使用xib的方式来创建单元格。
    /* static NSString *ID = @"goods_cell"; 
    UITableViewCell *cell =[tableView dequeueReusableCellWithIdentifier:ID];
    if(cell == nil) {
        cell = [[[NSBundle mainBundle] loadNibNamed:@"CZGoodsCell" owner:nil options:nil] firstObject];
        // 选中xib文件，属性中Identifier中设置可重用id的名称：goods_cell，给xib指定可重用id。
    } */
    // 2.2 封装到类方法中。
    CZGoodsCell *cell = [CZGoodsCell goodsCellWithTableView:tableView];

    // 3.把模型数据设置给单元格。
    cell.goods = model;
    // 4.返回单元格
    return cell;
}
-(void)viewDidLoad {
    [super viewDidLoad];
    self.tableView.rowHeight = 44;
}

cell.imgView.image = model.icon;
给cell的属性赋值。
1).封装不够完整，每次用到了都要写设置数据代码。为属性赋值。
2).控制器太强依赖于单元格cell，一旦cell子控件属性修改了，控制器也要改。造成紧耦合。
cell.goods = model;

在自定义cell的set方法中，给各个属性赋值。

setGoods:(CZGoodsCell *)model 
{
    self.imgView.image = model.icon;
    self.lblTitle.text = model.title;
}

其他：

self.tableView.rowHeight = 44;
如果没有给tableView指定行高，运行起来会报警告。

单元格xib，子控件是添加到Content View中，不是直接放在单元格中的，是放在单元格的Content View里面。

2023/05/30 周二