iOS 自定义cell中用masonry设置控件

low 的 示范: .h 文件里面

#import "BaseTableViewCell.h"
#import "MyLabelWithVerticalAlignment.h"
#import "CommodityListEntity.h"
@class ProductItemEntity;
@class PlusBtnView;

// 定义 增加按钮的 block
typedef void(^btnPulsBlock)(NSInteger count, BOOL animated);

@interface ProductListCell : BaseTableViewCell

// 商品增加动画的block
@property (nonatomic, copy)   btnPulsBlock block;

// 商品图标
@property (strong, nonatomic) UIImageView *imgIcon;

// 商品名称
@property (strong, nonatomic) UILabel *lblTitle;

// 商品单价
@property (strong, nonatomic) UILabel *lblUnitPrice;

// 商品规格
@property (strong, nonatomic) UILabel *lblSpecification;

// 属性1, 2, 3对应的label
@property (nonatomic, strong) UILabel *lblShow1;
@property (nonatomic, strong) UILabel *lblShow2;
@property (nonatomic, strong) UILabel *lblShow3;

// 商品简介
@property (strong, nonatomic) MyLabelWithVerticalAlignment *lblSummary;

// 分割线
@property (strong, nonatomic) UIView *lineView;

// 数量按钮
@property (strong, nonatomic) PlusBtnView *plusBtnView;

@property (nonatomic, strong) ProductItemEntity *productItemEntity;

+ (instancetype)productListCellWithTableView:(UITableView *)tableView;
复制代码

.m 文件里面

#import "ProductListCell.h"
#import "PlusBtnView.h"
#import "ProductItemEntity.h"


@interface ProductListCell ()

@end


@implementation ProductListCell

- (void)setProductItemEntity:(ProductItemEntity *)productItemEntity
{
    _productItemEntity = productItemEntity;
    // 将商品信息添加到视图上显示出来
    [self.imgIcon sd_setImageWithURL:nil placeholderImage:[UIImage imageNamed:@"placeholder_production"]];
    self.lblTitle.text = productItemEntity.productName;
    self.lblUnitPrice.text = [NSString stringWithFormat:@"%.2f元/%@  ", productItemEntity.newUnitPrice,productItemEntity.unit];
    self.lblSpecification.text = [NSString stringWithFormat:@"%.2f元/%@  ", productItemEntity.newTotalPrice,productItemEntity.specification];
    self.lblSummary.text = productItemEntity.descript;

    // 判断是否属性1, 2, 3有值, 有值就给高度, 没有就隐藏, 并设置高度为0
    if ([productItemEntity.property1 isEqualToString:@""] || !productItemEntity.property1) {
        [self.lblShow1 setHidden:YES];
        [_lblShow1 mas_updateConstraints:^(MASConstraintMaker *make) {
            make.height.mas_equalTo(@0);
        }];
//        [_lblShow1 mas_makeConstraints:^(MASConstraintMaker *make) {
//            make.height.mas_equalTo(@0);
//        }];
    } else {
        [self.lblShow1 setHidden:NO];
        [_lblShow1 mas_updateConstraints:^(MASConstraintMaker *make) {
            make.height.mas_equalTo(@20);
        }];
//        [_lblShow1 mas_makeConstraints:^(MASConstraintMaker *make) {
//            make.height.mas_equalTo(@20);
//        }];
    }
    
    if ([productItemEntity.property2 isEqualToString:@""] || !productItemEntity.property2) {
        [self.lblShow2 setHidden:YES];
//        [_lblShow2 mas_updateConstraints:^(MASConstraintMaker *make) {
//            make.height.mas_equalTo(@0);
//        }];
//        [_lblShow2 mas_makeConstraints:^(MASConstraintMaker *make) {
//            make.height.mas_equalTo(@0);
//        }];
    } else {
        [self.lblShow2 setHidden:NO];
//        [_lblShow2 mas_updateConstraints:^(MASConstraintMaker *make) {
//            make.height.mas_equalTo(@20);
//        }];
//        [_lblShow2 mas_makeConstraints:^(MASConstraintMaker *make) {
//            make.height.mas_equalTo(@20);
//        }];
    }
    
    if ([productItemEntity.property3 isEqualToString:@""] || !productItemEntity.property3) {
        [self.lblShow3 setHidden:YES];
        [_lblShow3 mas_updateConstraints:^(MASConstraintMaker *make) {
            make.height.mas_equalTo(@0);
        }];
//        [_lblShow3 mas_makeConstraints:^(MASConstraintMaker *make) {
//            make.height.mas_equalTo(@0);
//        }];
    } else {
        [self.lblShow3 setHidden:NO];
        [_lblShow3 mas_updateConstraints:^(MASConstraintMaker *make) {
            make.height.mas_equalTo(@20);
        }];
//        [_lblShow3 mas_makeConstraints:^(MASConstraintMaker *make) {
//            make.height.mas_equalTo(@20);
//        }];
    }
    
    self.lblShow1.text = productItemEntity.property1;
    self.lblShow2.text = productItemEntity.property2;
    self.lblShow3.text = productItemEntity.property3;
}

+ (instancetype)productListCellWithTableView:(UITableView *)tableView
{
    static NSString *identifyForCell = @"cellForProductList";
    ProductListCell *cell = [tableView dequeueReusableCellWithIdentifier:identifyForCell];
    if (!cell) {
        cell = [[ProductListCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifyForCell];
    }
    // 设置cell选中的样式为: 无
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    return cell;
}

#pragma mark 初始化方法
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // 商品图标
        _imgIcon = [[UIImageView alloc] init];
        _imgIcon.backgroundColor = [UIColor clearColor];
        [self.contentView addSubview:_imgIcon];
        
        // 商品标题
        _lblTitle = [[UILabel alloc] init];
        _lblTitle.backgroundColor = [UIColor clearColor];
        _lblTitle.font = [UIFont systemFontOfSize:14.0f];
        [self.contentView addSubview:_lblTitle];
        
        // 单价
        _lblUnitPrice = [[UILabel alloc] init];
        _lblUnitPrice.layer.backgroundColor = [UIColor orangeColor].CGColor;
        _lblUnitPrice.layer.cornerRadius = 10.0f;
        _lblUnitPrice.layer.masksToBounds = YES;
        _lblUnitPrice.textColor = [UIColor whiteColor];
        _lblUnitPrice.textAlignment = NSTextAlignmentCenter;
        [self.contentView addSubview:_lblUnitPrice];
        
        // 规格
        _lblSpecification = [[UILabel alloc] init];
        _lblSpecification.textColor = [UIColor orangeColor];
        _lblSpecification.backgroundColor = [UIColor clearColor];
        _lblSpecification.font = [UIFont systemFontOfSize:13.f];
        [self.contentView addSubview:_lblSpecification];
        
        // 属性1, 2, 3对应的label
        _lblShow1 = [UILabel new];
        [self.contentView addSubview:_lblShow1];
        _lblShow1.backgroundColor = [UIColor blueColor];
        _lblShow2 = [UILabel new];
        [self.contentView addSubview:_lblShow2];
        _lblShow2.backgroundColor = [UIColor redColor];
        _lblShow3 = [UILabel new];
        [self.contentView addSubview:_lblShow3];
        _lblShow3.backgroundColor = [UIColor greenColor];
        
        // 添加增加减少按钮
        _plusBtnView = [[PlusBtnView alloc] init];
        _plusBtnView.backgroundColor = [UIColor clearColor];
        _plusBtnView.number = 0;
        _plusBtnView.numlabel.font = [UIFont systemFontOfSize:14.0f];
        [_plusBtnView.lessBtn addTarget:self action:@selector(lessBtnClicked:) forControlEvents:UIControlEventTouchUpInside];
        [_plusBtnView.plusBtn addTarget:self action:@selector(plusBtnClicked:) forControlEvents:UIControlEventTouchUpInside];
        [self.contentView addSubview:_plusBtnView];
        
        // 中间的分割线
        _lineView = [[UIView alloc] init];
        _lineView.layer.backgroundColor = [UIColor lightGrayColor].CGColor;
        [self.contentView addSubview:_lineView];
        
        // 下面的简介
        _lblSummary = [[MyLabelWithVerticalAlignment alloc] init];
        [self.contentView addSubview:_lblSummary];
        _lblSummary.backgroundColor = [UIColor cyanColor];
        _lblSummary.textColor = [UIColor grayColor];
        _lblSummary.numberOfLines = 0;
        _lblSummary.textAlignment = NSTextAlignmentLeft;
        _lblSummary.lineBreakMode = NSLineBreakByWordWrapping;
        [_lblSummary setVerticalAlignment:VerticalAlignmentTop];
        _lblSummary.font = [UIFont systemFontOfSize:11];
    }
    return self;
}

#pragma mark 控件布局设置
- (void)layoutSubviews
{
    [super layoutSubviews];
    
    // 商品图标
    [_imgIcon mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.contentView.mas_top).offset(10);
        make.left.equalTo(self.contentView.mas_left).offset(15);
        make.width.mas_equalTo(@66);
        make.height.mas_equalTo(@66);
    }];
    
    // 商品名称
    [_lblTitle mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_imgIcon.mas_top);
        make.left.equalTo(_imgIcon.mas_right).offset(10);
        make.right.equalTo(self.contentView.mas_right).offset(-10);
        make.height.mas_equalTo(@23);
    }];
    
    // 商品单价
    // 设置Label的字体  HelveticaNeuce Courier
    UIFont * fontSize = [UIFont fontWithName:@"HelveticaNeue" size:10.0f];
    _lblUnitPrice.font = fontSize;
    // 设置字体得到NSString的尺寸
    CGSize size = [_lblUnitPrice.text sizeWithAttributes:[NSDictionary dictionaryWithObjectsAndKeys:fontSize, NSFontAttributeName, nil]];
    // title的高度H
    CGFloat titleHeight = size.height + 5;
    // title的宽度W
    CGFloat titleWidth = size.width + 8;
    [_lblUnitPrice mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(_imgIcon.mas_centerY);
        make.left.equalTo(_lblTitle.mas_left);
        make.size.mas_equalTo(CGSizeMake(titleWidth, titleHeight));
    }];
    // 设置label的边角成圆角
    _lblUnitPrice.layer.cornerRadius = titleHeight / 2;
    _lblUnitPrice.layer.masksToBounds = YES;
    
    // 商品规格
    [_lblSpecification mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(_imgIcon.mas_bottom);
        make.left.equalTo(_lblUnitPrice.mas_left);
        make.right.equalTo(self.contentView.mas_right).offset(-100);
        make.height.mas_equalTo(@20);
    }];
    
    // 1, 2, 3
    [_lblShow1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_lblSpecification.mas_bottom).offset(2);
        make.left.equalTo(_lblSpecification.mas_left);
        make.right.equalTo(self.contentView.mas_right).offset(-100);
        make.height.mas_equalTo(@20);
    }];
    
    [_lblShow2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_lblShow1.mas_bottom).offset(2);
        make.left.equalTo(_lblSpecification.mas_left);
        make.right.equalTo(self.contentView.mas_right).offset(-100);
        make.height.mas_equalTo(@20);
    }];
    
    [_lblShow3 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_lblShow2.mas_bottom).offset(2);
        make.left.equalTo(_lblSpecification.mas_left);
        make.right.equalTo(self.contentView.mas_right).offset(-100);
        make.height.mas_equalTo(@20);
    }];
    
    // 商品增加按钮
    [_plusBtnView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(_lblShow3.mas_bottom);
        make.right.equalTo(self.contentView.mas_right).offset(-10);
        make.width.mas_equalTo(@90);
        make.height.mas_equalTo(@30);
    }];
    
    // 分割线
    [_lineView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_plusBtnView.mas_bottom).offset(5);
        make.left.equalTo(_lblTitle.mas_left);
        make.right.equalTo(self.contentView.mas_right).offset(-15);
        make.height.mas_equalTo(@0.3);
    }];
    
    // 商品简介
    [_lblSummary mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_lineView.mas_bottom).offset(5);
        make.left.equalTo(_lineView.mas_left);
        make.right.equalTo(self.contentView.mas_right).offset(-10);
        make.bottom.equalTo(self.contentView.mas_bottom).offset(-10);
    }];
}

#pragma mark 增加按钮的block回调
- (void)plusBtnClicked:(UIButton *)btn
{
    self.block(_plusBtnView.number, YES);
    // 计数增加
    _plusBtnView.number++;
}

#pragma mark 减少按钮的block回调
- (void)lessBtnClicked:(UIButton *)btn
{
    // 计数减少
    _plusBtnView.number--;
    self.block(_plusBtnView.number, NO);
}
复制代码

不要在 - (void)layoutSubviews 这个方法里面, 对控件进行masonry设置

- (void)layoutSubviews
{
    [super layoutSubviews];
    // 商品图标
    [_imgIcon mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.contentView.mas_top).offset(10);
        make.left.equalTo(self.contentView.mas_left).offset(15);
        make.width.mas_equalTo(@66);
        make.height.mas_equalTo(@66);
    }];
}
复制代码

以下是优雅的示范: .m 文件里面, 自定义一个方法 - (void)configCell:(模型*)model

#import <UIKit/UIKit.h>

@class ProductItemModel;

@interface ProductTableViewCell : UITableViewCell

- (void)configCell:(ProductItemModel *)model;

@end
复制代码

.h 文件里面

#import "ProductTableViewCell.h"
#import "ProductItemModel.h"
#import "Masonry.h"

@interface ProductTableViewCell ()

@property (nonatomic, strong) UIImageView *img;
@property (nonatomic, strong) UILabel *productName;
@property (nonatomic, strong) UILabel *unitPrice;
@property (nonatomic, strong) UILabel *specification;
@property (nonatomic, strong) UILabel *show1;
@property (nonatomic, strong) UILabel *show2;
@property (nonatomic, strong) UILabel *show3;
@property (nonatomic, strong) UIView  *line;
@property (nonatomic, strong) UIButton *btn;

@end

@implementation ProductTableViewCell

#pragma makr cell的初始化方法
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // 设置控件
        [self p_setupImg];
        [self p_setupProductName];
        [self p_setupUnitPrice];
        [self p_setupSpecification];
        [self p_setupShows];
        [self p_setupBtn];
    }
    return self;
}

//图标
- (void)p_setupImg
{
    self.img = [UIImageView new];
    self.img.backgroundColor = [UIColor grayColor];
    [self.contentView addSubview:self.img];
    [self.img mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.equalTo(@15);
        make.width.height.equalTo(@66);
    }];
}

//名称
- (void)p_setupProductName
{
    self.productName = [UILabel new];
    self.productName.backgroundColor = [UIColor grayColor];
    [self.contentView addSubview:self.productName];
    [self.productName mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.img);
        make.left.equalTo(self.img.mas_right).offset(10);
        make.right.equalTo(self.contentView).offset(-15);
    }];
}

//单价
- (void)p_setupUnitPrice
{
    self.unitPrice = [UILabel new];
    self.unitPrice.backgroundColor = [UIColor grayColor];
    [self.contentView addSubview:self.unitPrice];
    [self.unitPrice mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.productName);
        make.top.equalTo(self.productName.mas_bottom).offset(5);
    }];
}

//规格
- (void)p_setupSpecification
{
    self.specification = [UILabel new];
    self.specification.backgroundColor = [UIColor grayColor];
    [self.contentView addSubview:self.specification];
    [self.specification mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.unitPrice);
        make.top.equalTo(self.unitPrice.mas_bottom).offset(5);
    }];
}

//可变的三个控件
- (void)p_setupShows
{
    self.show1 = [UILabel new];
    self.show1.backgroundColor = [UIColor grayColor];
    [self.contentView addSubview:self.show1];
    [self.show1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.specification);
        make.top.equalTo(self.specification.mas_bottom).offset(5);
        make.right.equalTo(self.contentView).offset(-85);
    }];
    
    self.show2 = [UILabel new];
    self.show2.backgroundColor = [UIColor grayColor];
    [self.contentView addSubview:self.show2];
    [self.show2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.specification);
        make.top.equalTo(self.show1.mas_bottom).offset(5);
        make.right.equalTo(self.contentView).offset(-85);
    }];
    
    self.show3 = [UILabel new];
    self.show3.backgroundColor = [UIColor grayColor];
    [self.contentView addSubview:self.show3];
    [self.show3 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.specification);
        make.top.equalTo(self.show2.mas_bottom).offset(5);
        make.right.equalTo(self.contentView).offset(-85);
    }];
}

// 加减按钮
- (void)p_setupBtn
{
    self.btn = [UIButton buttonWithType:UIButtonTypeCustom];
    self.btn.backgroundColor = [UIColor grayColor];
    [self.contentView addSubview:self.btn];
    [self.btn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.specification.mas_bottom).offset(75);
        make.right.equalTo(self.contentView).offset(-15);
        make.width.equalTo(@60);
    }];
    
    self.line = [UIView new];
    self.line.backgroundColor = [UIColor blackColor];
    [self.contentView addSubview:self.line];
    [self.line mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.btn.mas_bottom).offset(5);
        make.left.right.equalTo(self.productName);
        make.height.equalTo(@1);
    }];
}

#pragma mark 配置cell显示
- (void)configCell:(ProductItemModel *)model {
    self.productName.text = model.productName;
    self.unitPrice.text = model.unit;
    self.specification.text = model.specification;
    
    NSMutableArray *array = [NSMutableArray array];
    if (model.property1.length != 0) {
        [array addObject:model.property1];
    }
    if (model.property2.length != 0) {
        [array addObject:model.property2];
    }
    if (model.property3.length != 0) {
        [array addObject:model.property3];
    }
    NSLog(@"%@|%@|%@|%ld", model.property1, model.property2, model.property3, array.count);
    if (array.count == 0) {
        self.show1.hidden = YES;
        self.show2.hidden = YES;
        self.show3.hidden = YES;
        [self.btn mas_updateConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(self.specification.mas_bottom).offset(5);
        }];
    } else if (array.count == 1) {
        self.show1.text = array.firstObject;
        self.show2.hidden = YES;
        self.show3.hidden = YES;
        [self.btn mas_updateConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(self.specification.mas_bottom).offset(25);
        }];
    } else if (array.count == 2) {
        self.show1.text = array.firstObject;
        self.show2.text = array.lastObject;
        [self.btn mas_updateConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(self.specification.mas_bottom).offset(45);
        }];;
    } else {
        self.show1.text = array.firstObject;
        self.show2.text = array[1];
        self.show3.text = array.lastObject;
    }
}

复制代码

转载于:https://juejin.im/post/5a3238876fb9a0451c3a6af7

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值