利用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。