利用MVVM设计快速开发个人中心、设置等模块

我们在做iOS开发过程中，静态页面的开发比开发动态页面更让我们开发者抓狂。因为动态页面通常是一个页面一种cell样式，作为开发者只需要专注于定制好一种样式之后，就可以使用数据填充出较好的界面。而静态cell，则可能因为一个页面有多种cell样式，而且很有可能不是标准的cell样式，需要我们自定义，因此容易写出来的代码容易臃肿和重复、可读性差。这不符合开发者的代码优化原则（不主动重复）。我时常会因为开发这种页面抓狂，因为会纠结到底怎么写会让代码可读性好点，写重复代码的机会少点。本文就是我做过的几个项目中总结的一套利用MVVM设计模式实现个人中心等静态tableview界面的方法和代码介绍，而且可以在此基础上不断丰富我们的模块。干货在我的demo里，你可以直接拿去用。为了你以后添加属于自己的自定义cell，建议认真看看这篇文章。

效果展示

 

　　本文Demo下载地址：http://pan.baidu.com/s/1kTPucgn
　　再顺便广告一下：欢迎大家关注我的微信公众号：丁丁的coding日记

实现思路
1.由于个人中心或者设置模块，使用了大量的通用Cell样式。通常cell左边现实图片加文字（或者只有文字），右侧则有可能有多种现实样式（如switch开怪，箭头，按钮，或者文字等）。因此我们可以把这些通用的特性封装成ViewModel。
2.利用ViewModel填充我们的Cell（View）。
3.给ViewModel填充数据(Model)，然后实现我们的Cell数据和样式展示。
实现步骤
1.ViewModel实现代码：
HooUserCenterItemModel.h

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

typedef NS_ENUM(NSInteger, HooUserCenterAccessoryType) {
    HooUserCenterAccessoryTypeNone,                   // don't show any accessory view
    HooUserCenterAccessoryTypeDisclosureIndicator,    // the same with system DisclosureIndicator
    HooUserCenterAccessoryTypeSwitch,                 //  swithch
};

@interface HooUserCenterItemModel : NSObject

@property (nonatomic,copy) NSString  *funcName;     /**<      功能名称*/
@property (nonatomic,strong) UIImage *img;          /**< 功能图片  */
@property (nonatomic,copy) NSString *detailText;    /**< 更多信息-提示文字  */
@property (nonatomic,strong) UIImage *detailImage;  /**< 更多信息-提示图片  */
@property (nonatomic,assign) HooUserCenterAccessoryType  accessoryType;    /**< accessory */
@property (nonatomic,copy) void (^executeCode)(); /**<      点击item要执行的代码*/
@property (nonatomic,copy) void (^switchValueChanged)(BOOL isOn); /**<  HooUserCenterAccessoryTypeSwitch下开关变化 */

@end

HooUserCenterSectionModel.h

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface HooUserCenterSectionModel : NSObject

@property (nonatomic,copy) NSString  *sectionHeaderName; /**< 传空表示分组无名称*/

@property (nonatomic,assign) CGFloat  sectionHeaderHeight; /**<      分组header高度*/

@property (nonatomic,strong) NSArray  *itemArray; /**< item模型数组*/

@property (nonatomic,strong) UIColor  *sectionHeaderBgColor; /**< 背景色*/

@end

2.Cell(View)实现代码：

HooUserCenterCell.h

#import <UIKit/UIKit.h>
@class HooUserCenterItemModel;
@interface HooUserCenterCell : UITableViewCell
@property (nonatomic,strong) HooUserCenterItemModel  *item; /**< item data*/

@end

HooUserCenterCell.m

#import "HooUserCenterCell.h"
#import "HooUserCenterItemModel.h"
#import "UIView+XBExtension.h"
#import "HooConst.h"
@interface HooUserCenterCell()
@property (strong, nonatomic) UILabel *funcNameLabel;
@property (nonatomic,strong) UIImageView *imgView;

@property (nonatomic,strong) UIImageView *indicator;

@property (nonatomic,strong) UISwitch *aswitch;

@property (nonatomic,strong) UILabel *detailLabel;

@property (nonatomic,strong) UIImageView *detailImageView;

@end
@implementation HooUserCenterCell

- (void)setItem:(HooUserCenterItemModel *)item
{
    _item = item;
    [self updateUI];

}

- (void)updateUI
{
    [self.contentView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];

    //如果有图片
    if (self.item.img) {
        [self setupImgView];
    }
    //功能名称
    if (self.item.funcName) {
        [self setupFuncLabel];
    }

    //accessoryType
    if (self.item.accessoryType) {
        [self setupAccessoryType];
    }
    //detailView
    if (self.item.detailText) {
        [self setupDetailText];
    }
    if (self.item.detailImage) {
        [self setupDetailImage];
    }

    //bottomLine
    UIView *line = [[UIView alloc]initWithFrame:CGRectMake(0, self.height - 1, XBScreenWidth, 1)];
    line.backgroundColor = XBMakeColorWithRGB(234, 234, 234, 1);
    [self.contentView addSubview:line];

}

-(void)setupDetailImage
{
    self.detailImageView = [[UIImageView alloc]initWithImage:self.item.detailImage];
    self.detailImageView.centerY = self.contentView.centerY;
    switch (self.item.accessoryType) {
        case HooUserCenterAccessoryTypeNone:
            self.detailImageView.x = XBScreenWidth - self.detailImageView.width - XBDetailViewToIndicatorGap - 2;
            break;
        case HooUserCenterAccessoryTypeDisclosureIndicator:
            self.detailImageView.x = self.indicator.x - self.detailImageView.width - XBDetailViewToIndicatorGap;
            break;
        case HooUserCenterAccessoryTypeSwitch:
            self.detailImageView.x = self.aswitch.x - self.detailImageView.width - XBDetailViewToIndicatorGap;
            break;
        default:
            break;
    }
    [self.contentView addSubview:self.detailImageView];
}

- (void)setupDetailText
{
    self.detailLabel = [[UILabel alloc]init];
    self.detailLabel.text = self.item.detailText;
    self.detailLabel.textColor = XBMakeColorWithRGB(142, 142, 142, 1);
    self.detailLabel.font = [UIFont systemFontOfSize:XBDetailLabelFont];
    self.detailLabel.size = [self sizeForTitle:self.item.detailText withFont:self.detailLabel.font];
    self.detailLabel.centerY = self.contentView.centerY;

    switch (self.item.accessoryType) {
        case HooUserCenterAccessoryTypeNone:
            self.detailLabel.x = XBScreenWidth - self.detailLabel.width - XBDetailViewToIndicatorGap - 2;
            break;
        case HooUserCenterAccessoryTypeDisclosureIndicator:
            self.detailLabel.x = self.indicator.x - self.detailLabel.width - XBDetailViewToIndicatorGap;
            break;
        case HooUserCenterAccessoryTypeSwitch:
            self.detailLabel.x = self.aswitch.x - self.detailLabel.width - XBDetailViewToIndicatorGap;
            break;
        default:
            break;
    }

    [self.contentView addSubview:self.detailLabel];
}

- (void)setupAccessoryType
{
    switch (self.item.accessoryType) {
        case HooUserCenterAccessoryTypeNone:
            break;
        case HooUserCenterAccessoryTypeDisclosureIndicator:
            [self setupIndicator];
            break;
        case HooUserCenterAccessoryTypeSwitch:
            [self setupSwitch];
            break;
        default:
            break;
    }
}

- (void)setupSwitch
{
    [self.contentView addSubview:self.aswitch];
}

- (void)setupIndicator
{
    [self.contentView addSubview:self.indicator];

}

- (void)setupImgView
{
    self.imgView = [[UIImageView alloc]initWithImage:self.item.img];
    self.imgView.x = XBFuncImgToLeftGap;
    self.imgView.centerY = self.contentView.centerY;
    self.imgView.centerY = self.contentView.centerY;
    [self.contentView addSubview:self.imgView];
}

- (void)setupFuncLabel
{
    self.funcNameLabel = [[UILabel alloc]init];
    self.funcNameLabel.text = self.item.funcName;
    self.funcNameLabel.textColor = XBMakeColorWithRGB(51, 51, 51, 1);
    self.funcNameLabel.font = [UIFont systemFontOfSize:XBFuncLabelFont];
    self.funcNameLabel.size = [self sizeForTitle:self.item.funcName withFont:self.funcNameLabel.font];
    self.funcNameLabel.centerY = self.contentView.centerY;
    self.funcNameLabel.x = CGRectGetMaxX(self.imgView.frame) + XBFuncLabelToFuncImgGap;
    [self.contentView addSubview:self.funcNameLabel];
}

- (CGSize)sizeForTitle:(NSString *)title withFont:(UIFont *)font
{
    CGRect titleRect = [title boundingRectWithSize:CGSizeMake(FLT_MAX, FLT_MAX)
                                           options:NSStringDrawingUsesLineFragmentOrigin
                                        attributes:@{NSFontAttributeName : font}
                                           context:nil];

    return CGSizeMake(titleRect.size.width,
                      titleRect.size.height);
}

- (UIImageView *)indicator
{
    if (!_indicator) {
        _indicator = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"icon-arrow1"]];
        _indicator.centerY = self.contentView.centerY;
        _indicator.x = XBScreenWidth - _indicator.width - XBIndicatorToRightGap;
    }
    return _indicator;
}

- (UISwitch *)aswitch
{
    if (!_aswitch) {
        _aswitch = [[UISwitch alloc]init];
        _aswitch.centerY = self.contentView.centerY;
        _aswitch.x = XBScreenWidth - _aswitch.width - XBIndicatorToRightGap;
        [_aswitch addTarget:self action:@selector(switchTouched:) forControlEvents:UIControlEventValueChanged];
    }
    return _aswitch;
}

- (void)switchTouched:(UISwitch *)sw
{
    __weak typeof(self) weakSelf = self;
    self.item.switchValueChanged(weakSelf.aswitch.isOn);
}

@end

3.最后就可以给我们的ViewModel添加数据，实现我们的页面了。实现代码如下：
给DemoMeController.m添加一个属性

/*HooUserCenterSectionModelsection模型数组*/
@property (nonatomic,strong) NSArray  *sectionArray;

给DemoMeController.m添加一个方法，给sectionArray添加数据

- (void)setupSections
{

    //************************************section1
    HooUserCenterItemModel *item1 = [[HooUserCenterItemModel alloc]init];
    item1.funcName = @"我的任务1";
    item1.executeCode = ^{
        NSLog(@"我的任务1");
    };
    item1.img = [UIImage imageNamed:@"icon-list01"];
    item1.detailText = @"做任务赢大奖";
    item1.accessoryType = HooUserCenterAccessoryTypeDisclosureIndicator;


    HooUserCenterItemModel *item2 = [[HooUserCenterItemModel alloc]init];
    item2.funcName = @"我的任务2";
    item2.img = [UIImage imageNamed:@"icon-list01"];
    item2.accessoryType = HooUserCenterAccessoryTypeDisclosureIndicator;

    HooUserCenterItemModel *item3 = [[HooUserCenterItemModel alloc]init];
    item3.funcName = @"我的任务3";
    item3.img = [UIImage imageNamed:@"icon-list01"];
    item3.accessoryType = HooUserCenterAccessoryTypeDisclosureIndicator;

    HooUserCenterItemModel *item4 = [[HooUserCenterItemModel alloc]init];
    item4.funcName = @"我的任务4";
    item4.img = [UIImage imageNamed:@"icon-list01"];
    item4.accessoryType = HooUserCenterAccessoryTypeDisclosureIndicator;

    HooUserCenterSectionModel *section1 = [[HooUserCenterSectionModel alloc]init];
    section1.sectionHeaderHeight = 18;
    section1.itemArray = @[item1,item2,item3,item4];

    HooUserCenterItemModel *item5 = [[HooUserCenterItemModel alloc]init];
    item5.funcName = @"充值中心";
    item5.img = [UIImage imageNamed:@"icon-list01"];
    item5.executeCode = ^{
        NSLog(@"充值中心");
    };
    item5.accessoryType = HooUserCenterAccessoryTypeDisclosureIndicator;

    HooUserCenterItemModel *item6 = [[HooUserCenterItemModel alloc]init];
    item6.funcName = @"设置";
    item6.img = [UIImage imageNamed:@"icon-list01"];
    item6.executeCode = ^{

    };
    item6.accessoryType = HooUserCenterAccessoryTypeDisclosureIndicator;

    HooUserCenterSectionModel *section2 = [[HooUserCenterSectionModel alloc]init];
    section2.sectionHeaderHeight = 18;
    section2.itemArray = @[item5,item6];

    self.sectionArray = @[section1,section2];
}

使用sectionArray数据装配我们的tableView的cell。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *identifier = @"setting";
    HooUserCenterSectionModel *sectionModel = self.sectionArray[indexPath.section];
    HooUserCenterItemModel *itemModel = sectionModel.itemArray[indexPath.row];

    HooUserCenterCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    if (!cell) {
        cell = [[HooUserCenterCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
    }
    cell.item = itemModel;
    return cell;
}

总结
这是我们利用MVVM设计快速帮助我们开发个人中心、设置等模块。使用这个方式创建的好处，就是解放了Controller和View,让代码的可读性变得更好，同时也帮助我们封装了一些通用模块，将ViewModel和View与Controller解耦，方便我们将ViewModel和View的代码带到其他项目中，并且可以扩展我们的这ViewModel和View。