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 = ; 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();
     CGFloat iconY = HEIGTHINIPHONE6();
     CGFloat iconH = WIDTHINIPHONE6();
     CGFloat iconW = WIDTHINIPHONE6();
     self.iconFrameValue = [NSValue valueWithCGRect:CGRectMake(iconX, iconY, iconW, iconH)];

     //昵称
     CGFloat nickNameX = CGRectGetMaxX(CGRectMake(iconX, iconY, iconW, iconH)) + WIDTHINIPHONE6();
     CGSize nickNameSize = [SCUtil sizeWithString:self.radioModel.publisherNickName font:HEADFONT size:CGSizeMake(SCREENWIDTH - WIDTHINIPHONE6(), HEIGTHINIPHONE6())];
     CGFloat nickNameY = iconY + HEIGTHINIPHONE6();
     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();
     CGSize contentSize = [SCUtil sizeWithString:self.radioModel.msgContent font:HEADFONT size:CGSizeMake(SCREENWIDTH- WIDTHINIPHONE6(), )];
     CGFloat contentW = contentSize.width;
     CGFloat contentH = contentSize.height;
     self.contentFrameValue = [NSValue valueWithCGRect:CGRectMake(contentX, contentY, contentW, contentH)];
     cellH = contentH + HEIGTHINIPHONE6();

     //时间显示
     CGFloat timeX = nickNameX;
     CGFloat timeY = cellH;
     CGFloat timeW = WIDTHINIPHONE6();
     CGFloat timeH = HEIGTHINIPHONE6();
     self.timeFrameValue = [NSValue valueWithCGRect:CGRectMake(timeX, timeY, timeW, timeH)];

     //评论、点赞按钮
     CGFloat segY = cellH;
     CGFloat segW = WIDTHINIPHONE6();
     CGFloat segH = WIDTHINIPHONE6();
     self.thumbBtnFrameValue = [NSValue valueWithCGRect:CGRectMake(SCREENWIDTH - WIDTHINIPHONE6(), segY, segW, segH)];
     self.commentBtnFrameValue = [NSValue valueWithCGRect:CGRectMake(SCREENWIDTH - WIDTHINIPHONE6(), segY, segW, segH)];

     cellH = CGRectGetMaxY(CGRectMake(SCREENWIDTH - WIDTHINIPHONE6(), segY, segW, segH));

     //点赞人显示
     CGFloat thumX = nickNameX;
     CGFloat thumY = cellH + HEIGTHINIPHONE6();
     CGSize thumSize = [SCUtil sizeWithString:[_radioModel.thumbArray firstObject] font:FONT15TXT size:CGSizeMake((SCREENWIDTH - CGRectGetMinX([self.nickNameFrameValue CGRectValue]) - WIDTHINIPHONE6()), )];
     CGFloat thumW = thumSize.width;
     CGFloat thumH = thumSize.height;
     if (thumSize.width > ) {
         thumW = thumSize.width + WIDTHINIPHONE6();
     }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();
     if ([_radioModel.commentsArray count]) {
         CGFloat commentX = nickNameX;
         for (int i = ; 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(), )];
             CGFloat commentY = commentHeight;
             CGFloat commentW = commentSize.width + WIDTHINIPHONE6();
             CGFloat commentH = commentSize.height;

             cellH += commentH + HEIGTHINIPHONE6();
             commentHeight += commentH + HEIGTHINIPHONE6();
             CGRect segframe = CGRectMake(commentX, commentY, commentW, commentH);
             [self.commentsArray addObject:[NSValue valueWithCGRect:segframe]];
         }
         cellH = CGRectGetMaxY([(NSValue *)[self.commentsArray lastObject] CGRectValue]) + HEIGTHINIPHONE6();
         self.cellHeight = [NSString stringWithFormat:@"%.f",cellH];
         CGFloat backGroundW = SCREENWIDTH - WIDTHINIPHONE6();
         self.commentsBackGroundFrameValue = [NSValue valueWithCGRect:CGRectMake(nickNameX - WIDTHINIPHONE6(), CGRectGetMaxY(CGRectMake(thumX, thumY, thumW, thumH)) + HEIGTHINIPHONE6(), backGroundW + WIDTHINIPHONE6(), commentHeight - CGRectGetMaxY(CGRectMake(thumX, thumY, thumW, thumH)))];
     }else{
         self.commentsBackGroundFrameValue = [NSValue valueWithCGRect:CGRectMake(nickNameX - WIDTHINIPHONE6(), CGRectGetMaxY(CGRectMake(thumX, thumY, thumW, thumH)), , )];
         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()];
         [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 = ;
         [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:];
         [commentBtn setImage:[UIImage imageNamed:@"comment"] forState:];
 //        [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:/.f green:/.f blue:/.f alpha:];
         supportLb.font = FONT15TXT;
         [self.contentView addSubview:supportLb];
         self.thumbPersonLb = supportLb;

         //评论的背景图
         UIImageView *commentsBackImgView = [[UIImageView alloc] init];
         commentsBackImgView.backgroundColor =  [UIColor colorWithRed:/255.0 green:/255.0 blue:/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(, , WIDTHINIPHONE6(), TABBARHEIGHT);
         [clickBtn setBackgroundColor:DOMINANTCOLOR];
         [clickBtn setTitle:@"发送" forState:UIControlStateNormal];
         clickBtn.frame = CGRectMake(, , WIDTHINIPHONE6(), HEIGTHINIPHONE6());
         [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 = ; 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(, );
         NSRange range2 = NSMakeRange(, );
         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 = ;
     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 = ; i < [radio.commentsArray count]; i++) {
         UILabel *commentLb = [[UILabel alloc] init];
         commentLb.font = FONT15TXT;
         commentLb.numberOfLines = ;

         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:/.f green:/.f blue:/.f alpha:] range:NSMakeRange(, 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 = ; i < [self.radioModelFrame.commentsArray count]; i++) {
         if ([_commentsViewArray count] == ) {
             ((UILabel *)[_commentsViewArray objectAtIndex:]).frame = [(NSValue *)[_radioModelFrame.commentsArray objectAtIndex:] 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) > ) {
         self.textField.frame = CGRectMake(self.commentsBackGroundView.frame.origin.x, CGRectGetMaxY(self.commentsBackGroundView.frame) + HEIGTHINIPHONE6(), self.commentsBackGroundView.frame.size.width, HEIGTHINIPHONE6());
     }else if (CGRectGetHeight(self.thumbPersonLb.frame) >  ) {
         self.textField.frame = CGRectMake(self.contentLb.frame.origin.x, CGRectGetMaxY(self.thumbPersonLb.frame) + HEIGTHINIPHONE6(), SCREENWIDTH - WIDTHINIPHONE6(), HEIGTHINIPHONE6());
     }else{
         self.textField.frame = CGRectMake(self.contentLb.frame.origin.x, CGRectGetMaxY(self.supportBtn.frame) + HEIGTHINIPHONE6(), SCREENWIDTH - WIDTHINIPHONE6(), HEIGTHINIPHONE6());
     }

 }

 -(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:@"\n"]) {
         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

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