MVVM设计模式及思想
在 iOS 应用中日益增长的重量级视图控制器的问题。在典型的 MVC 应用里, 许多逻辑被放在 View Controller 里。
它们中的一些确实属于 View Controller,但更多的是所谓的“表示逻辑(presentation logic);
为了不让控制器日益增大,便于测试管理,便出现了MVVM.
MVVM:它其实是一个 MVC 的增强版,并将表示逻辑从 Controller 移出放到一个新的对象里,即 View Model
在 iOS 上使用 MVVM 的动机,就是让它能减少 View Controller 的复杂性并使得表示逻辑更易于测试.下面就通过一个小Demo来展示MVVM设计模式.
有关MVVM 设计模式的Demo
项目需求:
通过纯代码实现自定义不等高cell。
设计思路:
(1)创建项目,导入素材。
(2)创建数据模型
(3)创建视图模型
(4)在控制器中完成数据源及数据源方法
代码实现步骤
(1)创建项目,导入素材
(2)创建数据模型ZJStatus
在ZJSTatus.h中
<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@interface</span> ZJStatus : NSObject <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*********显示数据模型********/</span> <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** 头像 */</span> <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@property</span> (nonatomic ,copy)NSString *icon; <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** 昵称 */</span> <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@property</span> (nonatomic ,copy)NSString *name; <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** vip */</span> <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@property</span> (nonatomic ,assign)BOOL vip; <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** 文字 */</span> <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@property</span> (nonatomic ,copy)NSString *text; <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** 配图 */</span> <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@property</span> (nonatomic ,copy)NSString *picture;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>
<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*********显示frame模型********/</span> <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** 头像 */</span> <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@property</span> (nonatomic ,assign)CGRect iconFrame; <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** 昵称 */</span> <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@property</span> (nonatomic ,assign)CGRect nameFrame; <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** vip */</span> <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@property</span> (nonatomic ,assign)CGRect vipFrame; <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** 文字 */</span> <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@property</span> (nonatomic ,assign)CGRect textframe; <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** 配图 */</span> <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@property</span> (nonatomic ,assign)CGRect pictureFrame; <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** cell 的高度*/</span> <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@property</span> (nonatomic,assign)CGFloat cellHeight;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul>
在ZJSTatus.m中
<code class="hljs handlebars has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="xml" style="box-sizing: border-box;">#define KNameFont [UIFont systemFontOfSize:17] #define KTextFont [UIFont systemFontOfSize:14] @implementation ZJStatus // 重写cellHeight的get方法 - (CGFloat)cellHeight{ if (_cellHeight == 0) { // 设置边距为10 CGFloat margin = 10; // 设置cellHeight默认为0 CGFloat cellHeight = 0; // 1.头像 CGFloat iconX = margin; CGFloat iconY = margin; CGFloat iconW = 40; CGFloat iconH = iconW; self.iconFrame = CGRectMake(iconX, iconY, iconW, iconH); // 2.昵称 CGFloat nameX = CGRectGetMaxX(self.iconFrame) + margin; CGFloat nameY = iconY; // 昵称占据的宽度 NSDictionary *nameAttres = @{NSFontAttributeName :KNameFont}; CGSize nameSize = [self.name sizeWithAttributes:nameAttres]; // 通过结构体来存name的frame self.nameFrame = (CGRect)</span><span class="hljs-expression" style="box-sizing: border-box;">{{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">nameX</span>,<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">nameY</span>},<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">nameSize</span>}; /<span class="hljs-end-block" style="box-sizing: border-box;">/ </span>3<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.vip</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span></span> (<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">self.vip</span>) { <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">vipX</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGRectGetMaxX</span>(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">self.nameFrame</span>)+<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">margin</span>; <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">vipY</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">nameY</span>; <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">vipW</span> = 14; <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">vipH</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">nameSize.height</span>; <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">self.vipFrame</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGRectMake</span>(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">vipX</span>, <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">vipY</span>, <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">vipW</span>, <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">vipH</span>); } /<span class="hljs-end-block" style="box-sizing: border-box;">/ </span>4<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>文字 <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">TEXT</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">textY</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGRectGetMaxY</span>(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">self.iconFrame</span>) + <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">margin</span> ; <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">textX</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">iconX</span>; <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">textW</span> = [<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIScreen</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">mainScreen</span>]<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.bounds.size.width</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">-</span> 2*<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">textX</span>; /<span class="hljs-end-block" style="box-sizing: border-box;">/ </span>4<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>1定义文字最大的显示尺寸 <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGSize</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">textMaxSize</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGSizeMake</span>(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">textW</span>, <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">MAXFLOAT</span>); /<span class="hljs-end-block" style="box-sizing: border-box;">/ </span>4<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>2设置文字大小 <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSDictionary</span> *<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">textAttr</span> = @{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSFontAttributeName</span> : <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">KTextFont</span> }; /<span class="hljs-end-block" style="box-sizing: border-box;">/ </span>4<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>3设置文字的高度 <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">textH</span> = [<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">self.text</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">boundingRectWithSize</span>:<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">textMaxSize</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">options</span>:<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSStringDrawingUsesLineFragmentOrigin</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">attributes</span>:<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">textAttr</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">context</span>:<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">nil</span>]<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.size.height</span>; <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">self.textframe</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGRectMake</span>(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">textX</span>, <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">textY</span>, <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">textW</span>, <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">textH</span>); /<span class="hljs-end-block" style="box-sizing: border-box;">/ </span>5<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>配图 <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span></span> (<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">self.picture</span>) { <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">pictureW</span> = 100; <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">pictureH</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">pictureW</span>; <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">pictureX</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">textX</span>; <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">pictureY</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGRectGetMaxY</span>(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">self.textframe</span>) + <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">margin</span>; <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">self.pictureFrame</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGRectMake</span>(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">pictureX</span>, <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">pictureY</span>, <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">pictureW</span>, <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">pictureH</span> ); /<span class="hljs-end-block" style="box-sizing: border-box;">/ </span>如果有图 <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">cell</span>的高度为 _<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">cellHeight</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGRectGetMaxY</span>(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">self.pictureFrame</span>); } <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span></span>{ /<span class="hljs-end-block" style="box-sizing: border-box;">/ </span>如果没有图 _<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">cellHeight</span> = <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGRectGetMaxY</span>(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">self.textframe</span>); } /<span class="hljs-end-block" style="box-sizing: border-box;">/ </span>让<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">cellHeight</span> 增加一个<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">margin</span>的高度 _<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">cellHeight</span> += <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">margin</span>; } <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">return</span> _<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">cellHeight</span>; }</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li></ul>
(3)创建一个继承自UITableViewCell的视图模型ZJStatusCell
在ZJStatusCell.h中
<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@class</span> ZJStatus; <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@interface</span> ZJStatusCell : UITableViewCell <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** status的数据 */</span> <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@property</span> (nonatomic,strong) ZJStatus *status; </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>
在ZJStatusCell.m中
<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#import <span class="hljs-title" style="box-sizing: border-box;">"ZJStatus.h"</span></span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#define KNameFont [UIFont systemFontOfSize:17]</span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#define KTextFont [UIFont systemFontOfSize:14]</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@interface</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">ZJStatusCell</span> ()</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** 头像 */</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">nonatomic</span> ,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">weak</span>)<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImageView</span> *iconImageView; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** 昵称 */</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">nonatomic</span> ,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">weak</span>)<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> *nameLabel; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** vip */</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">nonatomic</span> ,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">weak</span>)<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImageView</span> * vipImageView; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** 文字 */</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">nonatomic</span> ,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">weak</span>)<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> *TEXTLabel; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** 图片 */</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">nonatomic</span> ,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">weak</span>)<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImageView</span> *pictureImageView; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@end</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@implementation</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">ZJStatusCell</span></span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** * 添加子控件(把有可能显示的子控件都加进去) */</span> - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSString</span> *)reuseIdentifier{ <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> = [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span> initWithStyle:style reuseIdentifier:reuseIdentifier]) { <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 1.昵称</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImageView</span> *iconImageView = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImageView</span> alloc]init]; [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.contentView</span> addSubview:iconImageView]; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 连线 建立关系</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.iconImageView</span> = iconImageView; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 2.标题</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> *nameLabel = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> alloc]init]; [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.contentView</span> addSubview:nameLabel]; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.nameLabel</span> = nameLabel; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置文字大小</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.nameLabel</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.font</span> = KNameFont; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 连线 建立关系</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.nameLabel</span> = nameLabel; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 3.vip</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImageView</span> *vipImageView = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImageView</span> alloc]init]; vipImageView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.image</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImage</span> imageNamed:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"vip"</span>]; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 图片显示格式</span> vipImageView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.contentMode</span> = UIViewContentModeCenter; [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.contentView</span> addSubview:vipImageView]; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 连线 建立关系</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.vipImageView</span> = vipImageView; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 4.文字</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> *TEXTlabel = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> alloc]init]; [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.contentView</span> addSubview:TEXTlabel]; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.TEXTLabel</span> = TEXTlabel; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置文字大小</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.TEXTLabel</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.font</span> = KTextFont; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 连线 建立关系</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.TEXTLabel</span> = TEXTlabel; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 换行</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.TEXTLabel</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.numberOfLines</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置一个背景颜色</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// self.TEXTLabel.backgroundColor = [UIColor redColor];</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 5.配图</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImageView</span> *pictureImageView = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImageView</span> alloc]init]; [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.contentView</span> addSubview:pictureImageView]; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.pictureImageView</span> = pictureImageView; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 连线 建立关系</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.pictureImageView</span> = pictureImageView; } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span>; } <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 布局自控件</span> - (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)layoutSubviews{ <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#warning 一定要调用 [super layoutSubviews];</span> [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span> layoutSubviews]; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 直接从模型中调用相应的frame</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 头像</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.iconImageView</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.frame</span> = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.status</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.iconFrame</span>; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 昵称</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.nameLabel</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.frame</span> = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.status</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.nameFrame</span>; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// vip</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.vipImageView</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.frame</span> = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.status</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.vipFrame</span>; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 文字</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.TEXTLabel</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.frame</span> = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.status</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.textframe</span>; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 图片</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.pictureImageView</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.frame</span> = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.status</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.pictureFrame</span>; } <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置数据</span> - (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)setStatus:(ZJStatus *)status{ _status = status; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.iconImageView</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.image</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImage</span> imageNamed:status<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.icon</span>]; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.nameLabel</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.text</span> = status<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.name</span>; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.TEXTLabel</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.text</span> = status<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.text</span>; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 图片</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (status<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.picture</span>) { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.pictureImageView</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.hidden</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NO</span>; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.pictureImageView</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.image</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImage</span> imageNamed:status<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.picture</span>]; } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.pictureImageView</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.hidden</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>; } <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// vip 图标</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (status<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.vip</span>) { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.vipImageView</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.hidden</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NO</span>; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.nameLabel</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.textColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> orangeColor]; }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span>{ <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.vipImageView</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.hidden</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.nameLabel</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.textColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> blackColor]; } }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li><li style="box-sizing: border-box; padding: 0px 5px;">105</li><li style="box-sizing: border-box; padding: 0px 5px;">106</li><li style="box-sizing: border-box; padding: 0px 5px;">107</li><li style="box-sizing: border-box; padding: 0px 5px;">108</li><li style="box-sizing: border-box; padding: 0px 5px;">109</li><li style="box-sizing: border-box; padding: 0px 5px;">110</li><li style="box-sizing: border-box; padding: 0px 5px;">111</li><li style="box-sizing: border-box; padding: 0px 5px;">112</li><li style="box-sizing: border-box; padding: 0px 5px;">113</li><li style="box-sizing: border-box; padding: 0px 5px;">114</li><li style="box-sizing: border-box; padding: 0px 5px;">115</li><li style="box-sizing: border-box; padding: 0px 5px;">116</li></ul>
(5)在控制器中
<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#import <span class="hljs-title" style="box-sizing: border-box;">"ZJStatus.h"</span></span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#import <span class="hljs-title" style="box-sizing: border-box;">"ZJStatusCell.h"</span></span> <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#import <span class="hljs-title" style="box-sizing: border-box;">"MJExtension.h"</span></span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@interface</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">ViewController</span> ()</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** status的数组 */</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">nonatomic</span>,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">strong</span>) <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span> *statuses; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@end</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@implementation</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">ViewController</span></span> - (<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span> *)statuses{ <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (!_statuses) { _statuses = [ZJStatus objectArrayWithFilename:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"statuses.plist"</span>]; } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> _statuses; } <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSString</span> *ID = @<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"status"</span>; - (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)viewDidLoad { [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span> viewDidLoad]; [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.tableView</span> registerClass:[ZJStatusCell class] forCellReuseIdentifier:ID]; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 设置cell 的高度为</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//self.tableView.rowHeight = 250;</span> } <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#pragma mark - 数据源方法</span> - (<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSInteger</span>)tableView:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UITableView</span> *)tableView numberOfRowsInSection:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSInteger</span>)section{ <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.statuses</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.count</span>; } - (<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UITableViewCell</span> *)tableView:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UITableView</span> *)tableView cellForRowAtIndexPath:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSIndexPath</span> *)indexPath{ ZJStatusCell *cell = [tableView dequeueReusableCellWithIdentifier:ID]; cell<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.status</span> = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.statuses</span>[indexPath<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.row</span>]; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> cell ; } <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#pragma mark - 代理方法来算高度</span> - (<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span>)tableView:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UITableView</span> *)tableView heightForRowAtIndexPath:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSIndexPath</span> *)indexPath{ ZJStatus *statue = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.statuses</span>[indexPath<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.row</span>]; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> statue<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.cellHeight</span>; }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li></ul>
MVC与MVVM设计
上图展示了MVVM与MVC的差别。
在MVC模式的iOS开发中,Controller承担了太多的代码,包含着我们的视图处理逻辑和业务逻辑。
在MVVM中,我们将视图处理逻辑从C中剥离出来给V,剩下的业务逻辑部分被称做View-Model。
使用MVVM模式的iOS应用的可测试性要好于MVC,因为ViewModel中并不包含对View的更新,相比于MVC,减轻了Controller的负担,使功能划分更加合理。
MVVM模式的正确实践是,我们应该为app delegate的根视图创建一个ViewModel,当我们要生成或展示另一个次级ViewController时,采用当前的ViewModel为其创建一个子ViewModel。
而这些ViewModel的代码并不放在ViewController中,我们的View请求自己的ViewModel来获取所需的数据,ViewController完全归于View。