iOS UI基础08

• 自定义等高cell

    // 创建自定义cell添加子控件的方法initWithStyle(note:子控件要添加到contentView上)
    - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier NS_AVAILABLE_IOS(3_0);
    // 传统创建自定义view添加子空间的方法
    //- (instancetype)initWithFrame:(CGRect)frame
    // 自定义xib时调用的方法
    //- (void)awakeFromNib;
    //- (instancetype)initWithCoder:(NSCoder *)coder
    // 布局子控件
    - (void)layoutSubviews
   {
      [super layoutSubviews];
   }
   //设置数据
   - (void)setXX:(模型数据类型 *)XX

• Masonry

  • 用Masonry布局子控件frame更简洁易懂，可读性更好。
  • 使用Masonry之前需要导入2个宏和Masonry头文件

   //除掉前缀
    #define MAS_SHORTHAND
   //可接收数据类型参数
    #define MAS_SHORTHAND_GLOBALS
    #import "Masonry.h"
    - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
  {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
  
        // 常用的间距
        CGFloat margin = 10;
  
        CGFloat contentViewW = CGRectGetWidth(self.contentView.frame);
        CGFloat contentViewH = CGRectGetHeight(self.contentView.frame);
  
        // 1.图片
        UIImageView *icon_ImageView = [[UIImageView alloc] init];
        [self.contentView addSubview:icon_ImageView];
        //icon_ImageView.backgroundColor = [UIColor blueColor];
        self.icon_ImageView = icon_ImageView;
  
        [icon_ImageView makeConstraints:^(MASConstraintMaker *make) {
  //            make.left.equalTo(self.contentView.left).offset(margin);
  //            make.top.equalTo(self.contentView.top).offset(margin);
  
            make.top.left.equalTo(self.contentView).offset(margin);
            make.bottom.equalTo(self.contentView.bottom).offset(-margin);
            make.width.equalTo(80);
        }];
  ｝
  

• 自定义不等高cell

     // 添加子控件（把有可能显示的子控件都加进去）
     - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
     //布局子空间Frame
     - (void)layoutSubviews
    {
        [super layoutSubviews];
    }
    // 设置子控件显示的数据
    - (void)setXX:(模型数据类型 *)XX

    //方案1：在heightForRowAtIndexPath:方法调用之前将所有cell的高度计算清楚
    /**
 *  返回每一行cell的具体高度
 */
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    JXStatus *status = self.statuses[indexPath.row];

    CGFloat margin = 10;
    CGFloat cellHeight = 0;

    // 头像
    CGFloat iconX = margin;
    CGFloat iconY = margin;
    CGFloat iconWH = 30;
    CGRect iconImageViewFrame = CGRectMake(iconX, iconY, iconWH, iconWH);

    // 文字
    CGFloat textX = iconX;
    CGFloat textY = CGRectGetMaxY(iconImageViewFrame) + margin;
    CGFloat textW = [UIScreen mainScreen].bounds.size.width - 2 * textX;
    CGSize textMaxSize = CGSizeMake(textW, MAXFLOAT);
    NSDictionary *textAttrs = @{NSFontAttributeName : [UIFont systemFontOfSize:14]};
    CGFloat textH = [status.text boundingRectWithSize:textMaxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:textAttrs context:nil].size.height;
    CGRect text_labelFrame = CGRectMake(textX, textY, textW, textH);

    // 配图
    if (status.picture) {
        CGFloat pictureWH = 100;
        CGFloat pictureX = textX;
        CGFloat pictureY = CGRectGetMaxY(text_labelFrame) + margin;
        CGRect pictureImageViewFrame = CGRectMake(pictureX, pictureY, pictureWH, pictureWH);

        cellHeight = CGRectGetMaxY(pictureImageViewFrame);
    } else {
        cellHeight = CGRectGetMaxY(text_labelFrame);
    }

    cellHeight += margin;

    return cellHeight;
}



// 方案2：在模型中计算cell高度，返回高度直接从模型中取出

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    JXStatus *status = self.statuses[indexPath.row];
    return status.cellHeight;
}

//模型数据
#import <UIKit/UIKit.h>

@interface JXStatus : NSObject
/**** 文字图片数据 ****/
/** 姓名 */
@property (nonatomic, copy) NSString *name;
/** 文本 */
@property (nonatomic, copy) NSString *text;
/** 头像 */
@property (nonatomic, copy) NSString *icon;
/** 配图 */
@property (nonatomic, copy) NSString *picture;
/** 是否为会员 */
@property (nonatomic, assign) BOOL vip;

/**** frame数据 ****/
/** 头像的frame */
@property (nonatomic, assign) CGRect iconFrame;
/** 昵称的frame */
@property (nonatomic, assign) CGRect nameFrame;
/** 会员的frame */
@property (nonatomic, assign) CGRect vipFrame;
/** 文字的frame */
@property (nonatomic, assign) CGRect textFrame;
/** 配图的frame */
@property (nonatomic, assign) CGRect pictureFrame;
/** cell的高度 */
@property (nonatomic, assign) CGFloat cellHeight;

@end

#import "JXStatus.h"

@implementation JXStatus
- (CGFloat)cellHeight
{
    if (_cellHeight == 0) {
        CGFloat margin = 10;

        // 头像
        CGFloat iconX = margin;
        CGFloat iconY = margin;
        CGFloat iconWH = 30;
        self.iconFrame = CGRectMake(iconX, iconY, iconWH, iconWH);

        // 昵称(姓名)
        CGFloat nameY = iconY;
        CGFloat nameX = CGRectGetMaxX(self.iconFrame) + margin;
        // 计算文字所占据的尺寸
        NSDictionary *nameAttrs = @{NSFontAttributeName : [UIFont systemFontOfSize:17]};
        CGSize nameSize = [self.name sizeWithAttributes:nameAttrs];
        self.nameFrame = (CGRect){{nameX, nameY}, nameSize};

        // 会员图标
        if (self.vip) {
            CGFloat vipW = 14;
            CGFloat vipH = nameSize.height;
            CGFloat vipY = nameY;
            CGFloat vipX = CGRectGetMaxX(self.nameFrame) + margin;
            self.vipFrame = CGRectMake(vipX, vipY, vipW, vipH);
        }

        // 文字
        CGFloat textX = iconX;
        CGFloat textY = CGRectGetMaxY(self.iconFrame) + margin;
        CGFloat textW = [UIScreen mainScreen].bounds.size.width - 2 * textX;
        CGSize textMaxSize = CGSizeMake(textW, MAXFLOAT);
        NSDictionary *textAttrs = @{NSFontAttributeName : [UIFont systemFontOfSize:14]};
        CGFloat textH = [self.text boundingRectWithSize:textMaxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:textAttrs context:nil].size.height;
        self.textFrame = CGRectMake(textX, textY, textW, textH);

        // 配图
        if (self.picture) {
            CGFloat pictureWH = 100;
            CGFloat pictureX = textX;
            CGFloat pictureY = CGRectGetMaxY(self.textFrame) + margin;
            self.pictureFrame = CGRectMake(pictureX, pictureY, pictureWH, pictureWH);

            _cellHeight = CGRectGetMaxY(self.pictureFrame);
        } else {
            _cellHeight = CGRectGetMaxY(self.textFrame);
        }
        _cellHeight += margin;
    }
    return _cellHeight;
}
@end

• 自动布局
  • 在Main.storyboard添加好子控件，设置好约束
  • 设置子控件显示的数据
    • -(void)setXX:(模型数据类型 *)XX
  • 在viewDidLoad中自动计算cell高度

    // 告诉tableView所有cell的真实高度是自动计算（根据设置的约束来计算）
    self.tableView.rowHeight = UITableViewAutomaticDimension;
    // 告诉tableView所有cell的估算高度
    self.tableView.estimatedRowHeight = 44;