利用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。
欢迎大家关注我的微信公众号：丁丁的coding日记
