iOS開發 —— MVVM設計模式

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設計模式對比

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。