新浪微博的布局

布局这个界面,需要以下几个步骤:

1.新建MODEL(实体对象和Frame对象)

2.新建TableViewController

3.新建自定义cell(因为他的内容都是不一样的)

 

我们都知道每行的高度不一样,我们怎么确定每一行的高度呢?

那么就应该在程序初始化的时候就必须把每行表格的宽度算出来,

那么就应该在Frame这个自定义实体对象里算出每行需要占据的宽度,下面看代码:

//
//  PJViewController.m
//  微博布局
//
//  Created by pj on 14-8-4.
//  Copyright (c) 2014年 pj. All rights reserved.
//

#import "PJViewController.h"
#import "MJStatus.h"
#import "PJStatusCell.h"
#import "MJStatusFrame.h"

@interface PJViewController ()
@property (strong,nonatomic) NSArray *status;
@end

@implementation PJViewController

- (NSArray *)status
{
    if (_status == nil) {
        NSString *path = [[NSBundle mainBundle] pathForResource:@"statuses.plist" ofType:nil];
        NSArray *array = [NSArray arrayWithContentsOfFile:path];
        NSMutableArray *arrayM = [[NSMutableArray alloc] init];
        for (NSDictionary *dict in array) {
            MJStatus *stauts = [MJStatus statusWithDict:dict];
            MJStatusFrame *sFrame = [[MJStatusFrame alloc] init];
            sFrame.status = stauts;
            [arrayM addObject:sFrame];
        }
        _status = arrayM;
    }
    return _status;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.status.count;
}





- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CELLID = @"PJCELL";
    PJStatusCell *cell = [tableView dequeueReusableCellWithIdentifier:CELLID];
    if (!cell) {
        cell = [[PJStatusCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CELLID];
    }
    cell.statusFrame = self.status[indexPath.row];
    return cell;
}

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







@end

//
//  PJStatusCell.h
//  微博布局
//
//  Created by pj on 14-8-4.
//  Copyright (c) 2014年 pj. All rights reserved.
//

#import <UIKit/UIKit.h>
@class MJStatusFrame;
@interface PJStatusCell : UITableViewCell

@property (nonatomic, strong) MJStatusFrame *statusFrame;

@end

//
//  PJStatusCell.m
//  微博布局
//
//  Created by pj on 14-8-4.
//  Copyright (c) 2014年 pj. All rights reserved.
//

#import "PJStatusCell.h"
#import "MJStatus.h"
#import "MJStatusFrame.h"

// 昵称的字体
#define MJNameFont [UIFont systemFontOfSize:14]
// 正文的字体
#define MJTextFont [UIFont systemFontOfSize:15]
@interface PJStatusCell()
@property (weak,nonatomic) UIImageView *uiIconView;
@property (weak,nonatomic) UILabel *uiNick;
@property (weak,nonatomic) UIImageView *uiVipIcon;
@property (weak,nonatomic) UILabel *uiText;
@property (weak,nonatomic) UIImageView *uiPicture;
@end


@implementation PJStatusCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // 1.头像
        [self.contentView addSubview:_uiIconView = [[UIImageView alloc] init]];
        // 2.昵称
        [self.contentView addSubview:_uiNick = [[UILabel alloc] init]];
        _uiNick.font = MJNameFont;
        // 3.会员图标
        [self.contentView addSubview:_uiVipIcon = [[UIImageView alloc] init]];
        // 4.正文
        [self.contentView addSubview:_uiText = [[UILabel alloc] init]];
        _uiText.font = MJTextFont;
        // 5.配图
        [self.contentView addSubview:_uiPicture = [[UIImageView alloc] init]];
    }
    return self;
}



- (void)setStatusFrame:(MJStatusFrame *)statusFrame
{
    _statusFrame = statusFrame;
    // 1.设置数据
    [self settingData];
    // 2.设置frame
    [self settingFrame];
}

- (void)settingData
{
    // 1.头像
    UIImage *image = [UIImage imageNamed:self.statusFrame.status.icon];
    NSLog(@"%f",image.size.height);
    self.uiIconView.image = image;
    // 2.昵称
    self.uiNick.text = self.statusFrame.status.name;
//    // 3.会员图标
    
    self.uiVipIcon.image = [UIImage imageNamed:@"vip"];
//    // 4.正文
    self.uiText.text = self.statusFrame.status.text;
    self.uiText.numberOfLines = 0;
//    // 5.配图
    if (self.uiPicture != nil) {
        self.uiPicture.image = [UIImage imageNamed:self.statusFrame.status.picture];
    }
    
}

- (void)settingFrame
{
    // 1.头像
    self.uiIconView.frame = self.statusFrame.iconF;
    
    // 2.昵称
    self.uiNick.frame = self.statusFrame.nameF;
    
    // 3.会员图标
    self.uiVipIcon.frame = self.statusFrame.vipF;
    
    // 4.正文
    self.uiText.frame = self.statusFrame.textF;
    
    // 5.配图
    if (self.statusFrame.status.picture) {// 有配图
        self.uiPicture.frame = self.statusFrame.pictureF;
    }
}






@end

//
//  MJStatus
//  04-UITableView03-通过代码定义cell
//
//  Created by apple on 13-12-1.
//  Copyright (c) 2013年 itcast. All rights reserved.
//

#import <Foundation/Foundation.h>

@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;
@property (nonatomic,assign) NSUInteger cellHeigth; // 高度

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


//
//  Weibo.m
//  04-UITableView03-通过代码定义cell
//
//  Created by apple on 13-12-1.
//  Copyright (c) 2013年 itcast. All rights reserved.
//

#import "MJStatus.h"

@implementation MJStatus

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

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

@end

//
//  MJStatusFrame.h
//  微博布局
//
//  Created by pj on 14-8-4.
//  Copyright (c) 2014年 pj. All rights reserved.
//

#import <Foundation/Foundation.h>
@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 (strong,nonatomic) MJStatus *status;
@end


//
//  MJStatusFrame.m
//  微博布局
//
//  Created by pj on 14-8-4.
//  Copyright (c) 2014年 pj. All rights reserved.
//

#import "MJStatusFrame.h"
#import "MJStatus.h"
// 昵称的字体
#define MJNameFont [UIFont systemFontOfSize:14]
// 正文的字体
#define MJTextFont [UIFont systemFontOfSize:15]
@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;
    }
}



@end