Cell定製和Frame模型引入

weixin_33872660發表於2017-05-10

一、xib定製cell

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 1.建立cell
    MJStatusCell *cell = [MJStatusCell cellWithTableView:tableView];
    
    // 2.在這個方法算好了cell的高度
    cell.statusFrame = self.statusFrames[indexPath.row];
    
    // 3.返回cell
    return cell;
}
#import "MJTgCell.h"
+ (instancetype)cellWithTableView:(UITableView *)tableView
{
    static NSString *ID = @"tg";
    MJTgCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    if (cell == nil) {
        // 從xib中載入cell
        cell = [[[NSBundle mainBundle] loadNibNamed:@"MJTgCell" owner:nil options:nil] lastObject];
    }
    return cell;
}

二、程式碼定製cell

+ (instancetype)cellWithTableView:(UITableView *)tableView
{
    static NSString *ID = @"status";
    MJStatusCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    if (cell == nil) {
        cell = [[MJStatusCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
    }
    return cell;
}
#import "MJStatusCell.h"
/**
 *  構造方法(在初始化物件的時候會呼叫)
 *  一般在這個方法中新增需要顯示的子控制元件
 */
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
      // 1.頭像
        UIImageView *iconView = [[UIImageView alloc] init];
        [self.contentView addSubview:iconView];
        self.iconView = iconView;
        
        // 2.暱稱
        UILabel *nameView = [[UILabel alloc] init];
        nameView.font = MJNameFont;
        [self.contentView addSubview:nameView];
        self.nameView = nameView;
         、、、
    }
    return self;
}

三、frame模型引入(自定義高度)

@interface MJStatus : NSObject
@property (nonatomic, copy) NSString *text; // 內容
@property (nonatomic, copy) NSString *icon; // 頭像
@property (nonatomic, copy) NSString *name; // 暱稱
@property (nonatomic, copy) NSString *picture; // 配圖
@property (nonatomic, assign) BOOL vip;

- (instancetype)initWithDict:(NSDictionary *)dict;
+ (instancetype)statusWithDict:(NSDictionary *)dict;

@implementation MJStatus

- (instancetype)initWithDict:(NSDictionary *)dict
{
    if (self = [super init]) {
        [self setValuesForKeysWithDictionary:dict];
    }
    return self;
}

+ (instancetype)statusWithDict:(NSDictionary *)dict
{
    return [[self alloc] initWithDict:dict];
}
@class MJStatus;

@interface MJStatusFrame : NSObject
// 頭像的frame
@property (nonatomic, assign, readonly) CGRect iconF;
// 暱稱的frame
@property (nonatomic, assign, readonly) CGRect nameF;
//  會員圖示的frame
@property (nonatomic, assign, readonly) CGRect vipF;
//  正文的frame
@property (nonatomic, assign, readonly) CGRect textF;
// 配圖的frame
@property (nonatomic, assign, readonly) CGRect pictureF;

//  cell的高度
@property (nonatomic, assign, readonly) CGFloat cellHeight;

@property (nonatomic, strong) MJStatus *status;
@end
@implementation MJStatusFrame

/**
 *  計算文字尺寸
 *
 *  @param text    需要計算尺寸的文字
 *  @param font    文字的字型
 *  @param maxSize 文字的最大尺寸
 */
- (CGSize)sizeWithText:(NSString *)text font:(UIFont *)font maxSize:(CGSize)maxSize
{
    NSDictionary *attrs = @{NSFontAttributeName : font};
    return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;
}

- (void)setStatus:(MJStatus *)status
{
    _status = status;
    // 子控制元件之間的間距
    CGFloat padding = 10;
    
    // 1.頭像
    CGFloat iconX = padding;
    CGFloat iconY = padding;
    CGFloat iconW = 30;
    CGFloat iconH = 30;
    _iconF = CGRectMake(iconX, iconY, iconW, iconH);
    
    // 2.暱稱
    // 文字的字型
    CGSize nameSize = [self sizeWithText:self.status.name font:MJNameFont maxSize:CGSizeMake(MAXFLOAT, MAXFLOAT)];
    CGFloat nameX = CGRectGetMaxX(_iconF) + padding;
    CGFloat nameY = iconY + (iconH - nameSize.height) * 0.5;
    _nameF = CGRectMake(nameX, nameY, nameSize.width, nameSize.height);
    
    // 3.會員圖示
    CGFloat vipX = CGRectGetMaxX(_nameF) + padding;
    CGFloat vipY = nameY;
    CGFloat vipW = 14;
    CGFloat vipH = 14;
    _vipF = CGRectMake(vipX, vipY, vipW, vipH);
    
    // 4.正文
    CGFloat textX = iconX;
    CGFloat textY = CGRectGetMaxY(_iconF) + padding;
    CGSize textSize = [self sizeWithText:self.status.text font:MJTextFont maxSize:CGSizeMake(300, MAXFLOAT)];
    _textF = CGRectMake(textX, textY, textSize.width, textSize.height);
    
    // 5.配圖
    if (self.status.picture) {// 有配圖
        CGFloat pictureX = textX;
        CGFloat pictureY = CGRectGetMaxY(_textF) + padding;
        CGFloat pictureW = 100;
        CGFloat pictureH = 100;
        _pictureF = CGRectMake(pictureX, pictureY, pictureW, pictureH);
        
        _cellHeight = CGRectGetMaxY(_pictureF) + padding;
    } else {
        _cellHeight = CGRectGetMaxY(_textF) + padding;
    }
}

#import "MJViewController.h"

for (NSDictionary *dict in dictArray) {
      // 3.1.建立MJStatus模型物件
      MJStatus *status = [MJStatus statusWithDict:dict];
            
      // 3.2.建立MJStatusFrame模型物件
      MJStatusFrame *statusFrame = [[MJStatusFrame alloc] init];
      statusFrame.status = status;
}
#pragma mark - 實現資料來源方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.statusFrames.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 1.建立cell
    MJStatusCell *cell = [MJStatusCell cellWithTableView:tableView];
    
    // 2.在這個方法算好了cell的高度
    cell.statusFrame = self.statusFrames[indexPath.row];
    
    // 3.返回cell
    return cell;
}

#pragma mark - 實現代理方法
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 取出這行對應的frame模型
    MJStatusFrame *statusFrame = self.statusFrames[indexPath.row];
    return statusFrame.cellHeight;
}

相關文章