先来看下效果：
公司在做一个报修工单的功能，其中主要功能点在于，这个功能不完全是静态显示的，它还可以点击回复，在下面增加评论，可以点击查看评论详情，也可以收回评论详情，评论可以带图片，也可以不带图片，工单内容可以带图片，也可以不带图片。并且回复内容的条数也不确定，就是因为这样的不确定性，一定程度增加了开发的难度。
根据mvc的思想，最初cell应该自带一个数据模型datamodel，单现在我们多增加一个frame模型， frame模型里面包含了各个子控件的frame值，并且自带数据模型datamodel属性，我们就是在设置datamodel的时候 给frame计算每一个cell的高度
首先我们要准备数据模型，有了数据模型，才能计算文字的大小，才能得到frame模型
以下是数据模型的代码：
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
#import <foundation/foundation.h>
@interface repairordermodel : nsobject
@property (nonatomic,strong) nsstring * repair_id;
@property (nonatomic,strong) nsstring * faddress;
@property (nonatomic,strong) nsarray * comment_imag_list;
@property (nonatomic,strong) nsstring * fservicecontent;
@property (nonatomic,strong) nsstring * frealname;
@property (nonatomic,strong) nsstring * fordernum;
@property (nonatomic,strong) nsstring * power_do;
@property (nonatomic,strong) nsstring * fusername;
@property (nonatomic,strong) nsstring * fcreatetime;
@property (nonatomic,strong) nsstring * fstatus;
@property (nonatomic,strong) nsarray * reply_list;
@property (nonatomic,strong) nsarray * repairs_imag_list;
@property (nonatomic,strong) nsstring * comment_score;
@property (nonatomic,strong) nsstring * normal_do;
@property (nonatomic,strong) nsstring * comment_content;
@property (nonatomic,strong) nsstring * fremindercount; // 加急状态
-(instancetype)initwithdict:(nsdictionary *)dict;
+(instancetype)repairmodelwithdict:(nsdictionary *)dict;
@end
|
先来看看frame模型的代码：
在.h文件里：
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
#import <foundation/foundation.h>
#import "repairviewframe.h" // 回复评论列表的区域frame
@class repairordermodel;
@interface repairorderframe : nsobject
/** 是否展开回复 默认是no*/
@property (nonatomic,assign) bool isopenreply;
/**
* 头像的frame ,结构体用assin
*/
@property (nonatomic, assign, readonly) cgrect iconf;
/**
* 业主名的frame
*/
@property (nonatomic, assign, readonly) cgrect namef;
/**
* 订单时间的frame
*/
@property (nonatomic, assign, readonly) cgrect timef;
/**
* 订单内容的frame
*/
@property (nonatomic, assign, readonly) cgrect desf;
/**
* 业主地址的frame
*/
@property (nonatomic, assign, readonly) cgrect addf;
/**
* 订单号码的frame
*/
@property (nonatomic, assign, readonly) cgrect ordernumf;
/**
* 加急状态的frame
*/
@property (nonatomic, assign, readonly) cgrect urgentf;
/**
* 配图1的frame
*/
@property (nonatomic, assign, readonly) cgrect image1listf;
/**
* 配图2的frame
*/
@property (nonatomic, assign, readonly) cgrect image2listf;
/**
* 配图3的frame
*/
@property (nonatomic, assign, readonly) cgrect image3listf;
/**
* 派单按钮的frame
*/
@property (nonatomic, assign, readonly) cgrect sendordersbtnf;
/**
* 派单状态的frame
*/
@property (nonatomic, assign, readonly) cgrect sendstatef;
/**
* 接受按钮的frame
*/
@property (nonatomic, assign, readonly) cgrect acceptbtnf;
/**
* 评论按钮的frame
*/
@property (nonatomic, assign, readonly) cgrect commandbtnf;
/**
* 评论数量的frame
*/
@property (nonatomic, assign, readonly) cgrect countlabelf;
/**
* 详情按钮的frame
*/
@property (nonatomic, assign, readonly) cgrect detailbtnf;
/**
* 回复区域的frame
*/
@property (nonatomic, assign, readonly) cgrect commandviewf;
/**
* 回复区域内部的frame模型数组 装repairviewframe 模型
*/
@property (nonatomic,strong) nsmutablearray * repairviewframearr;
//@property (nonatomic, assign, readonly) repairviewframe * commandframemodel;
/**
* cell的高度
*/
@property (nonatomic, assign, readonly) cgfloat cellheight;
@property (nonatomic, strong) repairordermodel *model; //只有拿到模型数据才能算这些属性的frame，readonly：在这个模型里面的frame属性别人不能乱改，只能访问
@end
|
因为我这个页面比较复杂 子控件比较多 所以属性也很多
注意：我这里还有一个属性是repairviewframearr 这个是装载我回复区域的每一条回复的frame
我把回复区域的每一条回复单独做了另外一个view，所以每一个回复view就要对应一个回复frame
我就把所有回复的frame装在这个数组里。（如果你们的页面没有回复区域，此处省略）
在设置frame模型的实现文件.m里
切记，在frame模型中计算大小设置的字号应该和cell中展现一样
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
|
// 小号字体
#define smallfont [uifont systemfontofsize:12]
// 中号字体
#define middlefont [uifont systemfontofsize:14]
// 正常字体
#define largefont [uifont systemfontofsize:16]
#import "repairorderframe.h"
#import "repairordermodel.h" // 数据模型
@implementation repairorderframe
-(instancetype)init{
if (self = [super init]) {
self.isopenreply = no;
self.repairviewframearr = [nsmutablearray array]; //回复数组（里面装载回复的frame模型)
}
return self;
}
/**
* 计算文字尺寸
*
* @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)setmodel:(repairordermodel *)model //重写set方法，接收模型数据为本类的属性赋值
{
_model = model;
// 子控件之间的间距
cgfloat padding = 10;
// 1.头像
cgfloat iconx = padding;
cgfloat icony = padding;
cgfloat iconw = 40;
cgfloat iconh = 40;
_iconf = cgrectmake(iconx, icony, iconw, iconh);
// 2.业主名字
cgsize namesize = [self sizewithtext:self.model.frealname font:largefont maxsize:cgsizemake(maxfloat, maxfloat)];
cgfloat namex = cgrectgetmaxx(_iconf) + padding;
cgfloat namey = icony + 10;
_namef = cgrectmake(namex, namey, namesize.width, namesize.height);
// 3.日期
cgsize timesize = [self sizewithtext:self.model.fcreatetime font:smallfont maxsize:cgsizemake(maxfloat, maxfloat)];
cgfloat timex = cgrectgetmaxx(_iconf) + padding;
cgfloat timey = namey + namesize.height;
_timef = cgrectmake(timex, timey, timesize.width, timesize.height);
// 4.地址
cgsize addsize = [self sizewithtext:self.model.faddress font:largefont maxsize:cgsizemake(120, maxfloat)];
cgfloat addx = screenwidth - addsize.width - padding;
cgfloat addy = namey;
_addf = cgrectmake(addx, addy, addsize.width, namesize.height);
// 5.单号
cgsize ordernumsize = [self sizewithtext:[nsstring stringwithformat:@"单号:%@",self.model.fordernum] font:smallfont maxsize:cgsizemake(maxfloat, maxfloat)];
cgfloat ordernumx = screenwidth - ordernumsize.width - padding;
cgfloat ordernumy = timey;
_ordernumf = cgrectmake(ordernumx, ordernumy, ordernumsize.width, ordernumsize.height);
// 6.加急
cgsize urgentsize = [self sizewithtext:@"加急" font:middlefont maxsize:cgsizemake(maxfloat, maxfloat)];
cgfloat urgentx = timex;
cgfloat urgenty = timey + timesize.height + 2 * padding;
_urgentf = cgrectmake(urgentx, urgenty, urgentsize.width, urgentsize.height);
// 7.服务内容
cgsize dessize = [self sizewithtext:self.model.fservicecontent font:middlefont maxsize:cgsizemake(maxfloat, maxfloat)];
cgfloat desx = urgentx + urgentsize.width + 2;
cgfloat desy = timey + timesize.height + 2 * padding;
_desf = cgrectmake(desx, desy, dessize.width, dessize.height);
// 8.图片列表 （最多三张）
if (self.model.repairs_imag_list.count != 0) {// 有配图
cgfloat width = 70;
switch (self.model.repairs_imag_list.count) {
case 3:
{
cgfloat picturex = namex + 2 * padding + 2 * width ;
cgfloat picturey = cgrectgetmaxy(_desf) + 1.5 * padding;
_image3listf = cgrectmake(picturex, picturey, width, width);
}
case 2:
{
cgfloat picturex = namex + padding + width;
cgfloat picturey = cgrectgetmaxy(_desf) + 1.5 * padding;
_image2listf = cgrectmake(picturex, picturey, width, width);
}
case 1:
{
cgfloat picturex = namex;
cgfloat picturey = cgrectgetmaxy(_desf) + 1.5 * padding;
_image1listf = cgrectmake(picturex, picturey, width, width);
}
break;
}
}
else{
_image1listf = cgrectmake(0, cgrectgetmaxy(_desf) + 1.5 * padding , 0, 0);
_image2listf = cgrectmake(0, cgrectgetmaxy(_desf) + 1.5 * padding , 0, 0);
_image3listf = cgrectmake(0, cgrectgetmaxy(_desf) + 1.5 * padding , 0, 0);
}
// 9.派单button
cgfloat sendorderx = 1.5 * padding;
cgfloat sendordery = cgrectgetmaxy(_image1listf) + padding;
cgfloat sendorderw = 30;
cgfloat sendorderh = 30;
_sendordersbtnf = cgrectmake(sendorderx, sendordery, sendorderw, sendorderh);
// 10.派单状态
cgsize sendstatesize = [self sizewithtext:@"派单" font:middlefont maxsize:cgsizemake(maxfloat, maxfloat)];
cgfloat sendstatex = cgrectgetmaxx(_sendordersbtnf) + padding;
cgfloat sendstatey = sendordery + padding;
_sendstatef = cgrectmake(sendstatex, sendstatey, sendstatesize.width, sendstatesize.height);
// 11.接受button
cgfloat acceptx = cgrectgetmaxx(_sendstatef) +padding;
cgfloat accepty = sendstatey;
cgfloat acceptw = 40;
cgfloat accepth = 25;
_acceptbtnf = cgrectmake(acceptx, accepty, acceptw, accepth);
// 12.评论button
cgfloat commandx = screenwidth - padding - 120;
cgfloat commandy = sendordery;
cgfloat commandw = 30;
cgfloat commandh = 30;
_commandbtnf = cgrectmake(commandx, commandy, commandw, commandh);
// 13.评论数量
cgfloat countx = commandx + commandw + 2;
cgfloat county = commandy + commandh - 15;
cgfloat countw = 20;
cgfloat counth = 15;
_countlabelf = cgrectmake(countx, county, countw, counth);
// 14.详情button
cgfloat detailbtnx = screenwidth - padding - 60;
cgfloat detailbtny = sendordery + 10;
cgfloat detailbtnw = 40;
cgfloat detailbtnh = 25;
_detailbtnf = cgrectmake(detailbtnx, detailbtny, detailbtnw, detailbtnh);
// 15.回复区域 (此处就是增加了每一条回复的frame模型)
cgfloat reply_listheight = 0.0;
if (model.reply_list.count != 0) {
[self.repairviewframearr removeallobjects];
// 头像 同派单一样大小和高度
for (int i = 0; i < model.reply_list.count; i ++) {
repairviewframe * repairframe = [[repairviewframe alloc]init];
repairframe.replydic = model.reply_list[i];
reply_listheight += repairframe.viewheight;
[self.repairviewframearr addobject:repairframe];
}
}
nslog(@"回复区域的高度 === %f",reply_listheight);
cgfloat commandviewx = 0;
cgfloat commandviewy = detailbtny + detailbtnh + padding * 2;
cgfloat commandvieww = screenwidth;
cgfloat commandviewh = reply_listheight;
_commandviewf = cgrectmake(commandviewx, commandviewy, commandvieww, commandviewh);
_cellheight = cgrectgetmaxy(_detailbtnf) + 2 * padding;
if (self.isopenreply) {
_cellheight += reply_listheight;
}
}
|
之后我们来看看cell的头文件.h里：
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
#import <uikit/uikit.h>
#import "repairordermodel.h" // 工单数据模型头文件
#import "repairorderframe.h" // 工单frame模型头文件
typedef void (^pushphotobigvcblock)(nsarray * imagelist); //展示大图
typedef void (^pushrealblock)(nsstring * frealname); //跳转业主页
typedef void (^lookreplyblock)(nsindexpath * myindexpath,bool isopen); //点击查看回复详情
typedef void (^pushcommandvcblock)(); //跳转评论页
@interface repairordertableviewcell : uitableviewcell
@property (nonatomic,strong) repairordermodel* model;
-(instancetype)initwithtableview:(uitableview *)tableview;
+(instancetype)cellwithtableview:(uitableview *)tableview;
@property (nonatomic, strong) repairorderframe *statusframe;
@property (nonatomic,strong) nsindexpath * currentindexpath;
@property (nonatomic,copy) pushphotobigvcblock block;
-(void)pushphotovc:(pushphotobigvcblock)block;
@property (nonatomic,copy) pushrealblock block1;
-(void)pushrealvc:(pushrealblock)block1;
@property (nonatomic,copy) lookreplyblock block2;
-(void)lookreplydetailview:(lookreplyblock)block2;
@property (nonatomic,copy) pushcommandvcblock block3;
-(void)pushcommandviewcontroller:(pushcommandvcblock)block3;
@end
|
cell实现文件.m中：
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
|