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

Posted 2020-08-21 逆袭的菜鸟

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了QQ空间／朋友圈类界面的搭建相关的知识，希望对你有一定的参考价值。

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

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

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

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

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

 1 #import "BasicModel.h"
 2 
 3 @interface RadioModel : BasicModel<NSCopying>
 4 /**
 5  *  内容
 6  */
 7 @property(nonatomic, copy)NSString *msgContent;
 8 /**
 9  *  昵称
10  */
11 @property(nonatomic, copy)NSString *publisherNickName;
12 /**
13  *  头像
14  */
15 @property(nonatomic, copy)NSString *publisherImg;
16 /**
17  *  时间
18  */
19 @property(nonatomic, copy)NSString *publishTime;
20 /**
21  *  评论数组 
22  */
23 @property(nonatomic, copy)NSMutableArray *commentsArray;
24 /**
25  *  点赞数组   （点赞者昵称）
26  */
27 @property(nonatomic, copy)NSMutableArray *thumbArray;
28 
29 
30 @end

View Code

 1 #import "RadioModel.h"
 2 #import <objc/runtime.h>
 3 
 4 @implementation RadioModel
 5 
 6 -(id)copyWithZone:(NSZone *)zone{
 7     RadioModel *model = [[RadioModel alloc] init];
 8     
 9     u_int count;
10     objc_property_t *propertyList = class_copyPropertyList([self class], &count);
11     
12     for (int index = 0; index < count; index++) {
13         objc_property_t property = propertyList[index];
14         NSString *str = [NSString stringWithUTF8String:property_getName(property)];
15         
16         id value = [self valueForKey:str];
17         [model setValue:value forKey:str];
18     }
19     
20     free(propertyList);
21     
22     return model;
23 }
24 
25 @end

View Code

如下是frameModel的实现：

 1 #import "BasicModel.h"
 2 //#import <Foundation/Foundation.h>
 3 //#import <UIKit/UIKit.h>
 4 #import "RadioModel.h"
 5 
 6 @interface RadioModelFrame : BasicModel
 7 /**
 8  *  头像尺寸
 9  */
10 @property(nonatomic, copy)NSValue *iconFrameValue;
11 /**
12  *  昵称尺寸
13  */
14 @property(nonatomic, copy)NSValue *nickNameFrameValue;
15 /**
16  *  内容尺寸
17  */
18 @property(nonatomic, copy)NSValue *contentFrameValue;
19 /**
20  *  时间尺寸
21  */
22 @property(nonatomic, copy)NSValue *timeFrameValue;
23 /**
24  *  点赞按钮的尺寸
25  */
26 @property(nonatomic, copy)NSValue *thumbBtnFrameValue;
27 /**
28  *  评论按钮的尺寸
29  */
30 @property(nonatomic, copy)NSValue *commentBtnFrameValue;
31 /**
32  *  不包含赞、评论内容的高度
33  */
34 @property(nonatomic, copy)NSString *cellHeight;
35 /**
36  *  点赞人尺寸
37  */
38 @property(nonatomic, copy)NSValue *thumbPersonFrameValue;
39 /**
40  *  评论内容尺寸
41  */
42 //@property(nonatomic, assign)NSValue *commentsFrameValue;
43 /**
44  *  评论内容数据源
45  */
46 @property(nonatomic, strong)NSMutableArray *commentsArray;
47 /**
48  *  评论内容背景
49  */
50 @property(nonatomic, copy)NSValue *commentsBackGroundFrameValue;
51 /**
52  *  评论数据
53  */
54 @property(nonatomic, strong)RadioModel *radioModel;
55 
56 @end

View Code

 1 #import "RadioModelFrame.h"
 2 #import "SCUtil.h"
 3 @implementation RadioModelFrame
 4 
 5 -(void)setRadioModel:(RadioModel *)radioModel{
 6     _radioModel = radioModel;
 7     
 8     float cellH;
 9     
10     //头像
11     CGFloat iconX = WIDTHINIPHONE6(10);
12     CGFloat iconY = HEIGTHINIPHONE6(5);
13     CGFloat iconH = WIDTHINIPHONE6(60);
14     CGFloat iconW = WIDTHINIPHONE6(60);
15     self.iconFrameValue = [NSValue valueWithCGRect:CGRectMake(iconX, iconY, iconW, iconH)];
16     
17     //昵称
18     CGFloat nickNameX = CGRectGetMaxX(CGRectMake(iconX, iconY, iconW, iconH)) + WIDTHINIPHONE6(5);
19     CGSize nickNameSize = [SCUtil sizeWithString:self.radioModel.publisherNickName font:HEADFONT size:CGSizeMake(SCREENWIDTH - WIDTHINIPHONE6(90), HEIGTHINIPHONE6(30))];
20     CGFloat nickNameY = iconY + HEIGTHINIPHONE6(20);
21     CGFloat nickNameW = nickNameSize.width;
22     CGFloat nickNameH = nickNameSize.height;
23     self.nickNameFrameValue = [NSValue valueWithCGRect:CGRectMake(nickNameX, nickNameY, nickNameW, nickNameH)];
24     
25     //内容内容
26     CGFloat contentX = nickNameX;
27     CGFloat contentY = CGRectGetMaxY(CGRectMake(nickNameX, nickNameY, nickNameW, nickNameH)) + HEIGTHINIPHONE6(10);
28     CGSize contentSize = [SCUtil sizeWithString:self.radioModel.msgContent font:HEADFONT size:CGSizeMake(SCREENWIDTH- WIDTHINIPHONE6(80), 10000000)];
29     CGFloat contentW = contentSize.width;
30     CGFloat contentH = contentSize.height;
31     self.contentFrameValue = [NSValue valueWithCGRect:CGRectMake(contentX, contentY, contentW, contentH)];
32     cellH = contentH + HEIGTHINIPHONE6(60);
33     
34     //时间显示
35     CGFloat timeX = nickNameX;
36     CGFloat timeY = cellH;
37     CGFloat timeW = WIDTHINIPHONE6(100);
38     CGFloat timeH = HEIGTHINIPHONE6(20);
39     self.timeFrameValue = [NSValue valueWithCGRect:CGRectMake(timeX, timeY, timeW, timeH)];
40     
41     //评论、点赞按钮 
42     CGFloat segY = cellH;
43     CGFloat segW = WIDTHINIPHONE6(30);
44     CGFloat segH = WIDTHINIPHONE6(30);
45     self.thumbBtnFrameValue = [NSValue valueWithCGRect:CGRectMake(SCREENWIDTH - WIDTHINIPHONE6(75), segY, segW, segH)];
46     self.commentBtnFrameValue = [NSValue valueWithCGRect:CGRectMake(SCREENWIDTH - WIDTHINIPHONE6(40), segY, segW, segH)];
47     
48     cellH = CGRectGetMaxY(CGRectMake(SCREENWIDTH - WIDTHINIPHONE6(100), segY, segW, segH));
49     
50     //点赞人显示
51     CGFloat thumX = nickNameX;
52     CGFloat thumY = cellH + HEIGTHINIPHONE6(0);
53     CGSize thumSize = [SCUtil sizeWithString:[_radioModel.thumbArray firstObject] font:FONT15TXT size:CGSizeMake((SCREENWIDTH - CGRectGetMinX([self.nickNameFrameValue CGRectValue]) - WIDTHINIPHONE6(30)), 10000000)];
54     CGFloat thumW = thumSize.width;
55     CGFloat thumH = thumSize.height;
56     if (thumSize.width > 1) {
57         thumW = thumSize.width + WIDTHINIPHONE6(20);
58     }else
59         thumH = 0.00f;
60     
61     _thumbPersonFrameValue = [NSValue valueWithCGRect:CGRectMake(thumX, thumY, thumW, thumH)];
62     if (thumH != 0.0f) {
63         cellH += CGRectGetMaxY(CGRectMake(thumX, thumY, thumW, thumH));
64     }
65     //评论内容显示
66     CGFloat commentHeight = CGRectGetMaxY(CGRectMake(thumX, thumY, thumW, thumH)) + HEIGTHINIPHONE6(10);
67     if ([_radioModel.commentsArray count]) {
68         CGFloat commentX = nickNameX;
69         for (int i = 0; i < [self.radioModel.commentsArray count]; i++) {
70             NSDictionary *dictionry = [self.radioModel.commentsArray objectAtIndex:i];
71             NSString *commentName = [[dictionry objectForKey:@"CommentatorName"] stringByAppendingString:@"："];
72             NSString *commentContent = [dictionry objectForKey:@"CommentContent"];
73             
74             CGSize commentSize = [SCUtil sizeWithString:[commentName stringByAppendingString:commentContent] font:FONT15TXT size:CGSizeMake(SCREENWIDTH - WIDTHINIPHONE6(100), 100000000)];
75             CGFloat commentY = commentHeight;
76             CGFloat commentW = commentSize.width + WIDTHINIPHONE6(10);
77             CGFloat commentH = commentSize.height;
78             
79             cellH += commentH + HEIGTHINIPHONE6(2);
80             commentHeight += commentH + HEIGTHINIPHONE6(2);
81             CGRect segframe = CGRectMake(commentX, commentY, commentW, commentH);
82             [self.commentsArray addObject:[NSValue valueWithCGRect:segframe]];
83         }
84         cellH = CGRectGetMaxY([(NSValue *)[self.commentsArray lastObject] CGRectValue]) + HEIGTHINIPHONE6(10);
85         self.cellHeight = [NSString stringWithFormat:@"%.f",cellH];
86         CGFloat backGroundW = SCREENWIDTH - WIDTHINIPHONE6(90);
87         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)))];
88     }else{
89         self.commentsBackGroundFrameValue = [NSValue valueWithCGRect:CGRectMake(nickNameX - WIDTHINIPHONE6(5), CGRectGetMaxY(CGRectMake(thumX, thumY, thumW, thumH)), 0, 0)];
90         self.cellHeight = [NSString stringWithFormat:@"%.f",CGRectGetMaxY(CGRectMake(thumX, thumY, thumW, thumH))];
91     }
92 }
93 
94 -(NSMutableArray *)commentsArray{
95     if (!_commentsArray) {
96         _commentsArray = [[NSMutableArray alloc] init];
97     }
98     return _commentsArray;
99 }

View Code

tableviewcell的实现：

 1 #import <UIKit/UIKit.h>
 2 #import "RadioModelFrame.h"
 3 
 4 @protocol addBtnActionDelegate <NSObject>
 5 
 6 
 7 -(void)supportAction:(RadioModelFrame *)frameModel;
 8 
 9 -(void)sendMessage:(NSString *)message withModel:(RadioModelFrame *)frameModel;
10 
11 @end
12 
13 @interface SquareTableViewCell : UITableViewCell
14 /**
15  *  cell的视图尺寸类
16  */
17 @property(nonatomic, strong) RadioModelFrame *radioModelFrame;
18 
19 +(instancetype)cellWithTableView:(UITableView *)tableView andRadioModel:(RadioModel *)model;
20 
21 @property(nonatomic, weak)id<addBtnActionDelegate>delegate;
22 
23 -(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier andRadioModel:(RadioModel *)model;
24 
25 @end

View Code

  1 #import "SquareTableViewCell.h"
  2 #import "RadioModel.h"
  3 #import "Masonry.h"
  4 #import "SCUtil.h"
  5 
  6 @interface SquareTableViewCell ()<UITextFieldDelegate>
  7 
  8 //@property(nonatomic, copy)RadioModel *radioModel;
  9 
 10 @property(nonatomic, strong)NSMutableArray *thumbArray;
 11 
 12 @property(nonatomic, strong)NSMutableArray *commentsViewArray;
 13 
 14 @property(nonatomic, weak) UIImageView *iconImgView;
 15 
 16 @property(nonatomic, weak) UILabel *nameLb;
 17 
 18 @property(nonatomic, weak) UILabel *contentLb;
 19 
 20 @property(nonatomic, weak) UILabel *timeLb;
 21 /**
 22  *  选择操作按钮（暂定“赞”、“评论”、“转发”三个选择）
 23  */
 24 @property(nonatomic, weak)UIButton *supportBtn;
 25 
 26 @property(nonatomic, weak)UIButton *commentsBtn;
 27 
 28 //@property(nonatomic, copy)UIButton *shareBtn;
 29 /**
 30  *  点赞人展示
 31  */
 32 @property(nonatomic, weak) UILabel *thumbPersonLb;
 33 
 34 @property(nonatomic, weak) UIImageView *commentsBackGroundView;
 35 /**
 36  *  文本输入框
 37  */
 38 @property(nonatomic, weak) UITextField *textField;
 39 
 40 @end
 41 
 42 @implementation SquareTableViewCell
 43 
 44 +(instancetype)cellWithTableView:(UITableView *)tableView andRadioModel:(RadioModel *)model
 45 {
 46     static NSString *identifier = @"RadioModelCell";
 47     
 48     SquareTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
 49     
 50     if (!cell) {
 51         cell = [[SquareTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier andRadioModel:model];
 52         cell.selectionStyle = UITableViewCellSelectionStyleNone;
 53     }
 54     return cell;
 55 }
 56 
 57 -(id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier andRadioModel:(RadioModel *)model
 58 {
 59     self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
 60     if (self) {
 61         self.selectionStyle = UITableViewCellSelectionStyleNone;
 62         //头像
 63         UIImageView *imgView = [[UIImageView alloc] init];
 64         [imgView.layer setMasksToBounds:YES];
 65         [imgView.layer setCornerRadius:WIDTHINIPHONE6(30)];
 66         [self.contentView addSubview:imgView];
 67         self.iconImgView = imgView;
 68         
 69         //昵称
 70         UILabel *nameLb = [[UILabel alloc] init];
 71         nameLb.font = HEADFONT;
 72         //nameLb.textColor = REDCOLOR;
 73         [self.contentView addSubview:nameLb];
 74         self.nameLb = nameLb;
 75         
 76         //广播内容
 77         UILabel *radioLb = [[UILabel alloc] init];
 78         radioLb.font = HEADFONT;
 79         radioLb.numberOfLines = 0;
 80         [self.contentView addSubview:radioLb];
 81         self.contentLb = radioLb;
 82         
 83         //时间显示
 84         UILabel *timeLb = [[UILabel alloc] init];
 85         timeLb.font = FONT12TXT;
 86         timeLb.textColor = GRAYBACK;
 87         [self.contentView addSubview:timeLb];
 88         self.timeLb = timeLb;
 89         
 90         //点赞按钮
 91         UIButton *thumBtn = [UIButton buttonWithType:UIButtonTypeCustom];
 92         [thumBtn setImage:[UIImage imageNamed:@"thumb"] forState:UIControlStateNormal];
 93 //        [thumBtn setBackgroundColor:REDCOLOR];
 94         [thumBtn addTarget:self action:@selector(supportAction) forControlEvents:UIControlEventTouchUpInside];
 95         [self.contentView addSubview:thumBtn];
 96         _supportBtn = thumBtn;
 97         
 98         //评论按钮
 99         UIButton *commentBtn = [UIButton buttonWithType:0];
100         [commentBtn setImage:[UIImage imageNamed:@"comment"] forState:0];
101 //        [commentBtn setBackgroundColor:[UIColor blueColor]];
102         [commentBtn addTarget:self action:@selector(commentToPerson) forControlEvents:UIControlEventTouchUpInside];
103         [self.contentView addSubview:commentBtn];
104         self.commentsBtn = commentBtn;
105         
106         //点赞的所有人
107         UILabel *supportLb = [[UILabel alloc] init];
108         supportLb.textColor = [UIColor colorWithRed:251/255.f green:25/255.f blue:255/255.f alpha:1];
109         supportLb.font = FONT15TXT;
110         [self.contentView addSubview:supportLb];
111         self.thumbPersonLb = supportLb;
112         
113         //评论的背景图
114         UIImageView *commentsBackImgView = [[UIImageView alloc] init];
115         commentsBackImgView.backgroundColor =  [UIColor colorWithRed:242/255.0 green:242/255.0 blue:242/255.0 alpha:1.0];
116         [self.contentView addSubview:commentsBackImgView];
117         self.commentsBackGroundView = commentsBackImgView;
118         
119         //输入框
120         UITextField *textfield = [[UITextField alloc] init];
121         textfield.delegate = self;
122         textfield.placeholder = @"评论";
123         textfield.borderStyle = UITextBorderStyleRoundedRect;
124         textfield.returnKeyType = UIReturnKeySend;
125         UIButton *clickBtn = [UIButton buttonWithType:UIButtonTypeCustom];
126         clickBtn.frame = CGRectMake(0, 0, WIDTHINIPHONE6(50), TABBARHEIGHT);
127         [clickBtn setBackgroundColor:DOMINANTCOLOR];
128         [clickBtn setTitle:@"发送" forState:UIControlStateNormal];
129         clickBtn.frame = CGRectMake(20, 20, WIDTHINIPHONE6(50), HEIGTHINIPHONE6(30));
130         [clickBtn addTarget:self action:@selector(sendComment) forControlEvents:UIControlEventTouchUpInside];
131         textfield.rightView = clickBtn;
132         textfield.rightViewMode = UITextFieldViewModeAlways;
133         [self.contentView addSubview:textfield];
134         self.textField = textfield;
135     }
136     return self;
137 }
138 
139 -(void)setRadioModelFrame:(RadioModelFrame *)radioModelFrame{
140     _radioModelFrame = radioModelFrame;
141     [self removeOldComments];
142     
143     [self settingData];
144     
145     [self settingFrame];
146 }
147 
148 //防止cell重叠
149 -(void)removeOldComments{
150     for (int i = 0; i < [self.commentsViewArray count]; i++) {
151         UILabel *commentsLb = [self.commentsViewArray objectAtIndex:i];
152         if (commentsLb.subviews) {
153             [commentsLb removeFromSuperview];
154         }
155     }
156     [self.commentsViewArray removeAllObjects];
157 }
158 
159 -(void)settingData{
160     RadioModel *radio = self.radioModelFrame.radioModel;
161     //显示头像
162     [self.iconImgView sd_setImageWithURL:[NSURL URLWithString:(NSString *)radio.publisherImg] placeholderImage:[UIImage imageNamed:@"squareCell"]];
163     //显示昵称
164     if ([SCUtil checkTelNumber:radio.publisherNickName]) {
165         NSRange range1 = NSMakeRange(0, 3以上是关于QQ空间／朋友圈类界面的搭建的主要内容，如果未能解决你的问题，请参考以下文章 
 搭建一个QQ机器人叫女朋友起床！
 EasyClick 运行代码片段出Null
 EasyClick 运行代码片段出Null
 Android 调用系统分享文字图片文件，可直达微信朋友圈QQQQ空间微博
 Android仿QQ界面
 QQ的聊天界面搭建