你的位置:首页 > 操作系统

[操作系统]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;