类似于QQ空间的布局主要是在说说信息、点赞、回复三大部分的自适应布局上。
当我们需要搭建类似QQ空间、微信朋友圈的界面的时候，可做如下操作：
- 创建一个对应的model类；
- 创建一个对应model类的frameModel类，并将对应的model封装进这个frameModel类。frameModel类是将model对应显示的data的控件frame转换为一个可持久化的frame，这样一来，就可以在第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
一般按照上边的方法基本能够实现了要求，当然，我这里为方便并没有加入图片显示，方正步骤都类似，只是多加个参数而已。