QQ空间／朋友圈类界面的搭建

类似于QQ空间的布局主要是在说说信息、点赞、回复三大部分的自适应布局上。

当我们需要搭建类似QQ空间、微信朋友圈的界面的时候，可做如下操作：

1. 创建一个对应的model类；
2. 创建一个对应model类的frameModel类，并将对应的model封装进这个frameModel类。frameModel类是将model对应显示的data的控件frame转换为一个可持久化的frame，这样一来，就可以在第3布容易很多；
3. 创建一个talbleviewcell，根据 model可能显示的对象，初始化cell，并将frameModel封装进talbleviewcell。

我在这里写了一些测试的代码，大家可以参考一下。

如下是model的实现 （BasicModel 为我定义的basic类，内有归档持久化操作）

#import "BasicModel.h"

@interface RadioModel : BasicModel<NSCopying>
/**
 *  内容
 */
@property(nonatomic, copy)NSString *msgContent;
/**
 *  昵称
 */
@property(nonatomic, copy)NSString *publisherNickName;
/**
 *  头像
 */
@property(nonatomic, copy)NSString *publisherImg;
/**
 *  时间
 */
@property(nonatomic, copy)NSString *publishTime;
/**
 *  评论数组 
 */
@property(nonatomic, copy)NSMutableArray *commentsArray;
/**
 *  点赞数组   （点赞者昵称）
 */
@property(nonatomic, copy)NSMutableArray *thumbArray;


@end

#import "RadioModel.h"
#import <objc/runtime.h>

@implementation RadioModel

-(id)copyWithZone:(NSZone *)zone{
    RadioModel *model = [[RadioModel alloc] init];
    
    u_int count;
    objc_property_t *propertyList = class_copyPropertyList([self class], &count);
    
    for (int index = 0; index < count; index++) {
        objc_property_t property = propertyList[index];
        NSString *str = [NSString stringWithUTF8String:property_getName(property)];
        
        id value = [self valueForKey:str];
        [model setValue:value forKey:str];
    }
    
    free(propertyList);
    
    return model;
}

@end

如下是frameModel的实现：

#import "BasicModel.h"
//#import <Foundation/Foundation.h>
//#import <UIKit/UIKit.h>
#import "RadioModel.h"

@interface RadioModelFrame : BasicModel
/**
 *  头像尺寸
 */
@property(nonatomic, copy)NSValue *iconFrameValue;
/**
 *  昵称尺寸
 */
@property(nonatomic, copy)NSValue *nickNameFrameValue;
/**
 *  内容尺寸
 */
@property(nonatomic, copy)NSValue *contentFrameValue;
/**
 *  时间尺寸
 */
@property(nonatomic, copy)NSValue *timeFrameValue;
/**
 *  点赞按钮的尺寸
 */
@property(nonatomic, copy)NSValue *thumbBtnFrameValue;
/**
 *  评论按钮的尺寸
 */
@property(nonatomic, copy)NSValue *commentBtnFrameValue;
/**
 *  不包含赞、评论内容的高度
 */
@property(nonatomic, copy)NSString *cellHeight;
/**
 *  点赞人尺寸
 */
@property(nonatomic, copy)NSValue *thumbPersonFrameValue;
/**
 *  评论内容尺寸
 */
//@property(nonatomic, assign)NSValue *commentsFrameValue;
/**
 *  评论内容数据源
 */
@property(nonatomic, strong)NSMutableArray *commentsArray;
/**
 *  评论内容背景
 */
@property(nonatomic, copy)NSValue *commentsBackGroundFrameValue;
/**
 *  评论数据
 */
@property(nonatomic, strong)RadioModel *radioModel;

@end

#import "RadioModelFrame.h"
#import "SCUtil.h"
@implementation RadioModelFrame

-(void)setRadioModel:(RadioModel *)radioModel{
    _radioModel = radioModel;
    
    float cellH;
    
    //头像
    CGFloat iconX = WIDTHINIPHONE6(10);
    CGFloat iconY = HEIGTHINIPHONE6(5);
    CGFloat iconH = WIDTHINIPHONE6(60);
    CGFloat iconW = WIDTHINIPHONE6(60);
    self.iconFrameValue = [NSValue valueWithCGRect:CGRectMake(iconX, iconY, iconW, iconH)];
    
    //昵称
    CGFloat nickNameX = CGRectGetMaxX(CGRectMake(iconX, iconY, iconW, iconH)) + WIDTHINIPHONE6(5);
    CGSize nickNameSize = [SCUtil sizeWithString:self.radioModel.publisherNickName font:HEADFONT size:CGSizeMake(SCREENWIDTH - WIDTHINIPHONE6(90), HEIGTHINIPHONE6(30))];
    CGFloat nickNameY = iconY + HEIGTHINIPHONE6(20);
    CGFloat nickNameW = nickNameSize.width;
    CGFloat nickNameH = nickNameSize.height;
    self.nickNameFrameValue = [NSValue valueWithCGRect:CGRectMake(nickNameX, nickNameY, nickNameW, nickNameH)];
    
    //内容内容
    CGFloat contentX = nickNameX;
    CGFloat contentY = CGRectGetMaxY(CGRectMake(nickNameX, nickNameY, nickNameW, nickNameH)) + HEIGTHINIPHONE6(10);
    CGSize contentSize = [SCUtil sizeWithString:self.radioModel.msgContent font:HEADFONT size:CGSizeMake(SCREENWIDTH- WIDTHINIPHONE6(80), 10000000)];
    CGFloat contentW = contentSize.width;
    CGFloat contentH = contentSize.height;
    self.contentFrameValue = [NSValue valueWithCGRect:CGRectMake(contentX, contentY, contentW, contentH)];
    cellH = contentH + HEIGTHINIPHONE6(60);
    
    //时间显示
    CGFloat timeX = nickNameX;
    CGFloat timeY = cellH;
    CGFloat timeW = WIDTHINIPHONE6(100);
    CGFloat timeH = HEIGTHINIPHONE6(20);
    self.timeFrameValue = [NSValue valueWithCGRect:CGRectMake(timeX, timeY, timeW, timeH)];
    
    //评论、点赞按钮 
    CGFloat segY = cellH;
    CGFloat segW = WIDTHINIPHONE6(30);
    CGFloat segH = WIDTHINIPHONE6(30);
    self.thumbBtnFrameValue = [NSValue valueWithCGRect:CGRectMake(SCREENWIDTH - WIDTHINIPHONE6(75), segY, segW, segH)];
    self.commentBtnFrameValue = [NSValue valueWithCGRect:CGRectMake(SCREENWIDTH - WIDTHINIPHONE6(40), segY, segW, segH)];
    
    cellH = CGRectGetMaxY(CGRectMake(SCREENWIDTH - WIDTHINIPHONE6(100), segY, segW, segH));
    
    //点赞人显示
    CGFloat thumX = nickNameX;
    CGFloat thumY = cellH + HEIGTHINIPHONE6(0);
    CGSize thumSize = [SCUtil sizeWithString:[_radioModel.thumbArray firstObject] font:FONT15TXT size:CGSizeMake((SCREENWIDTH - CGRectGetMinX([self.nickNameFrameValue CGRectValue]) - WIDTHINIPHONE6(30)), 10000000)];
    CGFloat thumW = thumSize.width;
    CGFloat thumH = thumSize.height;
    if (thumSize.width > 1) {
        thumW = thumSize.width + WIDTHINIPHONE6(20);
    }else
        thumH = 0.00f;
    
    _thumbPersonFrameValue = [NSValue valueWithCGRect:CGRectMake(thumX, thumY, thumW, thumH)];
    if (thumH != 0.0f) {
        cellH += CGRectGetMaxY(CGRectMake(thumX, thumY, thumW, thumH));
    }
    //评论内容显示
    CGFloat commentHeight = CGRectGetMaxY(CGRectMake(thumX, thumY, thumW, thumH)) + HEIGTHINIPHONE6(10);
    if ([_radioModel.commentsArray count]) {
        CGFloat commentX = nickNameX;
        for (int i = 0; i < [self.radioModel.commentsArray count]; i++) {
            NSDictionary *dictionry = [self.radioModel.commentsArray objectAtIndex:i];
            NSString *commentName = [[dictionry objectForKey:@"CommentatorName"] stringByAppendingString:@"："];
            NSString *commentContent = [dictionry objectForKey:@"CommentContent"];
            
            CGSize commentSize = [SCUtil sizeWithString:[commentName stringByAppendingString:commentContent] font:FONT15TXT size:CGSizeMake(SCREENWIDTH - WIDTHINIPHONE6(100), 100000000)];
            CGFloat commentY = commentHeight;
            CGFloat commentW = commentSize.width + WIDTHINIPHONE6(10);
            CGFloat commentH = commentSize.height;
            
            cellH += commentH + HEIGTHINIPHONE6(2);
            commentHeight += commentH + HEIGTHINIPHONE6(2);
            CGRect segframe = CGRectMake(commentX, commentY, commentW, commentH);
            [self.commentsArray addObject:[NSValue valueWithCGRect:segframe]];
        }
        cellH = CGRectGetMaxY([(NSValue *)[self.commentsArray lastObject] CGRectValue]) + HEIGTHINIPHONE6(10);
        self.cellHeight = [NSString stringWithFormat:@"%.f",cellH];
        CGFloat backGroundW = SCREENWIDTH - WIDTHINIPHONE6(90);
        self.commentsBackGroundFrameValue = [NSValue valueWithCGRect:CGRectMake(nickNameX - WIDTHINIPHONE6(5), CGRectGetMaxY(CGRectMake(thumX, thumY, thumW, thumH)) + HEIGTHINIPHONE6(5), backGroundW + WIDTHINIPHONE6(10), commentHeight - CGRectGetMaxY(CGRectMake(thumX, thumY, thumW, thumH)))];
    }else{
        self.commentsBackGroundFrameValue = [NSValue valueWithCGRect:CGRectMake(nickNameX - WIDTHINIPHONE6(5), CGRectGetMaxY(CGRectMake(thumX, thumY, thumW, thumH)), 0, 0)];
        self.cellHeight = [NSString stringWithFormat:@"%.f",CGRectGetMaxY(CGRectMake(thumX, thumY, thumW, thumH))];
    }
}

-(NSMutableArray *)commentsArray{
    if (!_commentsArray) {
        _commentsArray = [[NSMutableArray alloc] init];
    }
    return _commentsArray;
}

 tableviewcell的实现：

#import <UIKit/UIKit.h>
#import "RadioModelFrame.h"

@protocol addBtnActionDelegate <NSObject>


-(void)supportAction:(RadioModelFrame *)frameModel;

-(void)sendMessage:(NSString *)message withModel:(RadioModelFrame *)frameModel;

@end

@interface SquareTableViewCell : UITableViewCell
/**
 *  cell的视图尺寸类
 */
@property(nonatomic, strong) RadioModelFrame *radioModelFrame;

+(instancetype)cellWithTableView:(UITableView *)tableView andRadioModel:(RadioModel *)model;

@property(nonatomic, weak)id<addBtnActionDelegate>delegate;

-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier andRadioModel:(RadioModel *)model;

@end

#import "SquareTableViewCell.h"
#import "RadioModel.h"
#import "Masonry.h"
#import "SCUtil.h"

@interface SquareTableViewCell ()<UITextFieldDelegate>

//@property(nonatomic, copy)RadioModel *radioModel;

@property(nonatomic, strong)NSMutableArray *thumbArray;

@property(nonatomic, strong)NSMutableArray *commentsViewArray;

@property(nonatomic, weak) UIImageView *iconImgView;

@property(nonatomic, weak) UILabel *nameLb;

@property(nonatomic, weak) UILabel *contentLb;

@property(nonatomic, weak) UILabel *timeLb;
/**
 *  选择操作按钮（暂定“赞”、“评论”、“转发”三个选择）
 */
@property(nonatomic, weak)UIButton *supportBtn;

@property(nonatomic, weak)UIButton *commentsBtn;

//@property(nonatomic, copy)UIButton *shareBtn;
/**
 *  点赞人展示
 */
@property(nonatomic, weak) UILabel *thumbPersonLb;

@property(nonatomic, weak) UIImageView *commentsBackGroundView;
/**
 *  文本输入框
 */
@property(nonatomic, weak) UITextField *textField;

@end

@implementation SquareTableViewCell

+(instancetype)cellWithTableView:(UITableView *)tableView andRadioModel:(RadioModel *)model
{
    static NSString *identifier = @"RadioModelCell";
    
    SquareTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    
    if (!cell) {
        cell = [[SquareTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier andRadioModel:model];
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
    }
    return cell;
}

-(id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier andRadioModel:(RadioModel *)model
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        self.selectionStyle = UITableViewCellSelectionStyleNone;
        //头像
        UIImageView *imgView = [[UIImageView alloc] init];
        [imgView.layer setMasksToBounds:YES];
        [imgView.layer setCornerRadius:WIDTHINIPHONE6(30)];
        [self.contentView addSubview:imgView];
        self.iconImgView = imgView;
        
        //昵称
        UILabel *nameLb = [[UILabel alloc] init];
        nameLb.font = HEADFONT;
        //nameLb.textColor = REDCOLOR;
        [self.contentView addSubview:nameLb];
        self.nameLb = nameLb;
        
        //广播内容
        UILabel *radioLb = [[UILabel alloc] init];
        radioLb.font = HEADFONT;
        radioLb.numberOfLines = 0;
        [self.contentView addSubview:radioLb];
        self.contentLb = radioLb;
        
        //时间显示
        UILabel *timeLb = [[UILabel alloc] init];
        timeLb.font = FONT12TXT;
        timeLb.textColor = GRAYBACK;
        [self.contentView addSubview:timeLb];
        self.timeLb = timeLb;
        
        //点赞按钮
        UIButton *thumBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [thumBtn setImage:[UIImage imageNamed:@"thumb"] forState:UIControlStateNormal];
//        [thumBtn setBackgroundColor:REDCOLOR];
        [thumBtn addTarget:self action:@selector(supportAction) forControlEvents:UIControlEventTouchUpInside];
        [self.contentView addSubview:thumBtn];
        _supportBtn = thumBtn;
        
        //评论按钮
        UIButton *commentBtn = [UIButton buttonWithType:0];
        [commentBtn setImage:[UIImage imageNamed:@"comment"] forState:0];
//        [commentBtn setBackgroundColor:[UIColor blueColor]];
        [commentBtn addTarget:self action:@selector(commentToPerson) forControlEvents:UIControlEventTouchUpInside];
        [self.contentView addSubview:commentBtn];
        self.commentsBtn = commentBtn;
        
        //点赞的所有人
        UILabel *supportLb = [[UILabel alloc] init];
        supportLb.textColor = [UIColor colorWithRed:251/255.f green:25/255.f blue:255/255.f alpha:1];
        supportLb.font = FONT15TXT;
        [self.contentView addSubview:supportLb];
        self.thumbPersonLb = supportLb;
        
        //评论的背景图
        UIImageView *commentsBackImgView = [[UIImageView alloc] init];
        commentsBackImgView.backgroundColor =  [UIColor colorWithRed:242/255.0 green:242/255.0 blue:242/255.0 alpha:1.0];
        [self.contentView addSubview:commentsBackImgView];
        self.commentsBackGroundView = commentsBackImgView;
        
        //输入框
        UITextField *textfield = [[UITextField alloc] init];
        textfield.delegate = self;
        textfield.placeholder = @"评论";
        textfield.borderStyle = UITextBorderStyleRoundedRect;
        textfield.returnKeyType = UIReturnKeySend;
        UIButton *clickBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        clickBtn.frame = CGRectMake(0, 0, WIDTHINIPHONE6(50), TABBARHEIGHT);
        [clickBtn setBackgroundColor:DOMINANTCOLOR];
        [clickBtn setTitle:@"发送" forState:UIControlStateNormal];
        clickBtn.frame = CGRectMake(20, 20, WIDTHINIPHONE6(50), HEIGTHINIPHONE6(30));
        [clickBtn addTarget:self action:@selector(sendComment) forControlEvents:UIControlEventTouchUpInside];
        textfield.rightView = clickBtn;
        textfield.rightViewMode = UITextFieldViewModeAlways;
        [self.contentView addSubview:textfield];
        self.textField = textfield;
    }
    return self;
}

-(void)setRadioModelFrame:(RadioModelFrame *)radioModelFrame{
    _radioModelFrame = radioModelFrame;
    [self removeOldComments];
    
    [self settingData];
    
    [self settingFrame];
}

//防止cell重叠
-(void)removeOldComments{
    for (int i = 0; i < [self.commentsViewArray count]; i++) {
        UILabel *commentsLb = [self.commentsViewArray objectAtIndex:i];
        if (commentsLb.subviews) {
            [commentsLb removeFromSuperview];
        }
    }
    [self.commentsViewArray removeAllObjects];
}

-(void)settingData{
    RadioModel *radio = self.radioModelFrame.radioModel;
    //显示头像
    [self.iconImgView sd_setImageWithURL:[NSURL URLWithString:(NSString *)radio.publisherImg] placeholderImage:[UIImage imageNamed:@"squareCell"]];
    //显示昵称
    if ([SCUtil checkTelNumber:radio.publisherNickName]) {
        NSRange range1 = NSMakeRange(0, 3);
        NSRange range2 = NSMakeRange(7, 4);
        NSString *displayStr1 = [radio.publisherNickName substringWithRange:range1];
        NSString *displayStr2 = [radio.publisherNickName substringWithRange:range2];
        NSString *name = [[displayStr1 stringByAppendingString:@"***"] stringByAppendingString:displayStr2];
        self.nameLb.text = name;
    }else
        self.nameLb.text = radio.publisherNickName;
    
    //显示广播内容
    self.contentLb.text = radio.msgContent;
    //显示时间
    self.timeLb.text = radio.publishTime;
    
    User *user = [NSKeyedUnarchiver unarchiveObjectWithFile:LOGINCACHEPATH];
    //点赞人 、点赞按钮
    self.thumbPersonLb.textColor = REDCOLOR;
    self.thumbPersonLb.numberOfLines = 0;
    if ([radio.thumbArray count]) {  //显示点赞者
        if (![SCUtil isBlankString:[radio.thumbArray firstObject]]) {
            _thumbPersonLb.text = [@"♡" stringByAppendingString:[radio.thumbArray firstObject]];
        }else
            _thumbPersonLb.text = @"";
        
        if (![SCUtil isBlankString:user.nickName]) {
            if ([_thumbPersonLb.text containsString:user.nickName]) {
                [_supportBtn setImage:[UIImage imageNamed:@"thumb2"] forState:UIControlStateNormal];
            }else
                [_supportBtn setImage:[UIImage imageNamed:@"thumb"] forState:UIControlStateNormal];
        }else{
            [_supportBtn setImage:[UIImage imageNamed:@"thumb"] forState:UIControlStateNormal];
        }
    }else{
        [_supportBtn setImage:[UIImage imageNamed:@"thumb"] forState:UIControlStateNormal];
    }
    
    //评论按钮
        [self.commentsBtn setImage:[UIImage imageNamed:@"comment"] forState:UIControlStateNormal];
    
    //显示评论
    for (int i = 0; i < [radio.commentsArray count]; i++) {
        UILabel *commentLb = [[UILabel alloc] init];
        commentLb.font = FONT15TXT;
        commentLb.numberOfLines = 0;
        
        NSDictionary *dictionary = radio.commentsArray[i];
        NSString *nameStr = [[dictionary objectForKey:@"CommentatorName"] stringByAppendingString:@"："];
        NSString *contentStr = [dictionary objectForKey:@"CommentContent"];
        NSString *string = [nameStr stringByAppendingString:contentStr];
        
        NSMutableAttributedString *attriButeStr = [[NSMutableAttributedString alloc] initWithString:string];
        [attriButeStr addAttribute:NSForegroundColorAttributeName value:[UIColor colorWithRed:251/255.f green:25/255.f blue:25/255.f alpha:1] range:NSMakeRange(0, nameStr.length)];
        
        commentLb.attributedText = attriButeStr;
        [self.contentView addSubview:commentLb];
        [self.commentsViewArray addObject:commentLb];
    }
    
}

-(void)settingFrame{
    self.iconImgView.frame = [self.radioModelFrame.iconFrameValue CGRectValue];
    self.nameLb.frame = [self.radioModelFrame.nickNameFrameValue CGRectValue];
    self.contentLb.frame = [self.radioModelFrame.contentFrameValue CGRectValue];
    self.timeLb.frame =[self.radioModelFrame.timeFrameValue CGRectValue];
    
    //按钮
    self.commentsBtn.frame =[self.radioModelFrame.commentBtnFrameValue CGRectValue];
    self.supportBtn.frame = [self.radioModelFrame.thumbBtnFrameValue CGRectValue];
    
    //点赞人字符串
    self.thumbPersonLb.frame = [self.radioModelFrame.thumbPersonFrameValue CGRectValue];
    
    for (int i = 0; i < [self.radioModelFrame.commentsArray count]; i++) {
        if ([_commentsViewArray count] == 1) {
            ((UILabel *)[_commentsViewArray objectAtIndex:0]).frame = [(NSValue *)[_radioModelFrame.commentsArray objectAtIndex:0] CGRectValue];
        }
        else
            ((UILabel *)[_commentsViewArray objectAtIndex:i]).frame = [(NSValue *)[_radioModelFrame.commentsArray objectAtIndex:i] CGRectValue];
    }
    
    //评论的尺寸
    self.commentsBackGroundView.frame = [self.radioModelFrame.commentsBackGroundFrameValue CGRectValue];
    
    //文本
    if (CGRectGetHeight(self.commentsBackGroundView.frame) > 1) {
        self.textField.frame = CGRectMake(self.commentsBackGroundView.frame.origin.x, CGRectGetMaxY(self.commentsBackGroundView.frame) + HEIGTHINIPHONE6(5), self.commentsBackGroundView.frame.size.width, HEIGTHINIPHONE6(30));
    }else if (CGRectGetHeight(self.thumbPersonLb.frame) > 1 ) {
        self.textField.frame = CGRectMake(self.contentLb.frame.origin.x, CGRectGetMaxY(self.thumbPersonLb.frame) + HEIGTHINIPHONE6(5), SCREENWIDTH - WIDTHINIPHONE6(80), HEIGTHINIPHONE6(30));
    }else{
        self.textField.frame = CGRectMake(self.contentLb.frame.origin.x, CGRectGetMaxY(self.supportBtn.frame) + HEIGTHINIPHONE6(5), SCREENWIDTH - WIDTHINIPHONE6(80), HEIGTHINIPHONE6(30));
    }
    
}

-(void)supportAction{
    [self.delegate supportAction:_radioModelFrame];
    [self.textField resignFirstResponder];
}

-(void)commentToPerson{
    [self.textField becomeFirstResponder];
}

-(void)sendComment{
    if (![SCUtil isBlankString:self.textField.text]) {
        [self.delegate sendMessage:self.textField.text withModel:_radioModelFrame];
        if (![SCUtil isBlankString:self.textField.text]) {
            self.textField.text = @"";
        }
        [self.textField resignFirstResponder];
    }
}

-(BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string{
    if ([string isEqualToString:@"
"]) {
        if (![SCUtil isBlankString:self.textField.text]) {
            [self.delegate sendMessage:self.textField.text withModel:_radioModelFrame];
            if (![SCUtil isBlankString:self.textField.text]) {
                self.textField.text = @"";
            }
        }
        [textField resignFirstResponder];
        return NO;
    }
    return YES;
}

-(NSMutableArray *)commentsViewArray{
    if (!_commentsViewArray) {
        _commentsViewArray = [[NSMutableArray alloc] init];
    }
    return _commentsViewArray;
}

-(NSMutableArray *)thumbArray{
    if (!_thumbArray) {
        _thumbArray = [[NSMutableArray alloc] init];
    }
    return _thumbArray;
}

@end

一般按照上边的方法基本能够实现了要求，当然，我这里为方便并没有加入图片显示，方正步骤都类似，只是多加个参数而已。