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;

IOS UI基礎08