Using MVVM to design the rapid development of personal center, set up modules

We are doing iOS development process, the development of static pages than the development of dynamic pages let us developers crazy. Because the dynamic page is usually a page of a cell style, as developers only need to focus on a custom style, you can use the data to fill a better interface. While the static cell, probably because of a page with a variety of cell style, and probably is not the standard cell style, we need a custom, so easy to write code that is easy to repeat, bloated and poor readability. This does not conform to the developer’s code optimization principle (not active). I often because of the development of this page crazy, because it will tangle in the end how to write will make the code readability good point, write the opportunity to repeat code less. This is the method and personal code Center static tableview interface are introduced and summarized several projects I worked in a design based on MVVM mode, and on this basis can enrich our module. Dry goods in my demo, you can use it directly. In order to add your own custom cell, it is recommended to take a serious look at this article.

Effect display

Using MVVM to design the rapid development of personal center, set up modules
Screen Jan 17, 2016, 10.31.12 PM.png, Simulator, Shot
Using MVVM to design the rapid development of personal center, set up modules
Screen Jan 17, 2016, 10.31.58 PM.png, Simulator, Shot

this article Demo download address:
and then advertising: welcome everyone to pay attention to my WeChat public number: Ding Ding’s coding diary

Implementation ideas
1 due to the personal center or set the module, the use of a large number of generic Cell style. Usually cell the left side of the real picture with text (or only text), the right side may have a variety of realistic styles (such as switch open the strange, arrow, button, or text, etc.). So we can encapsulate these generic features into ViewModel.
2 uses ViewModel to populate our Cell (View).
3 to ViewModel fill data (Model), and then achieve our Cell data and style display.
implementation steps
1.ViewModel Code:

#import < Foundation/Foundation.h> #import; < UIKit/UIKit.h> typedef NS_ENUM (NSInteger, HooUserCenterAccessoryType) {/ / don't show any accessory HooUserCenterAccessoryTypeNone, view HooUserCenterAccessoryTypeDisclosureIndicator, the same with system DisclosureIndicator / / HooUserCenterAccessoryTypeSwitch / / swithch}; @interface HooUserCenterItemModel: NSObject @property (nonatomic, copy) NSString *funcName; /**< function name / @property (nonatomic, strong) UIImage *img; /**< functional image (nonatomic, copy) / @property NSString *detailText; /**< more information - prompt text / @property (nonatomic, strong) UIImage *detailImage; /**< more information That picture / @property (nonatomic, assign) HooUserCenterAccessoryType accessoryType; /**< accessory / @property (nonatomic, copy) (^executeCode) (void); /**< click item to execute code * / @property (nonatomic, copy) void (^switchValueChanged) (BOOL isOn); /**< HooUserCenterAccessoryTypeSwitch / @end switch changes


#import < Foundation/Foundation.h> #import; < UIKit/UIKit.h> @interface: HooUserCenterSectionModel NSObject @property (nonatomic, copy) NSString *sectionHeaderName; /**< pass said no name / @property group (nonatomic, assign) CGFloat sectionHeaderHeight; /**< group header (nonatomic, strong / @property height) NSArray *itemArray; /**< item / @property (array model nonatomic strong, UIColor *sectionHeaderBgColor); /**< / @end; background color

2.Cell (View) code:

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


#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 there are pictures if ( Em.img {[self setupImgView]}); / / function name 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];};} - {setupDetailText (void) 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.indicator.x - self.detailLabel.width - self.detailLabel.x XBDe TailViewToIndicatorGap; break; case HooUserCenterAccessoryTypeSwitch: self.detailLabel.x = self.aswitch.x - self.detailLabel.width - XBDetailViewToIndicatorGap; break default:; break [self.contentView addSubview:self.detailLabel];};} - {switch (void) setupAccessoryType (self.item.accessoryType) {case HooUserCenterAccessoryTypeNone: break; case HooUserCenterAccessoryTypeDisclosureIndicator: break; [self setupIndicator]; case HooUserCenterAccessoryTypeSwitch: break; default: [self setupSwitch; break;}} - (void) setupSwitch {[self.contentView addSub View:self.aswitch] - (void);} setupIndicator {[self.contentView addSubview:self.indicator];} - (void) setupImgView [[UIImageView {self.imgView = 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 [[UILabel {self.funcNameLabel = 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.funcNameL Abel.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 {_indi (_indicator!) Cator = [[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 alloc]init] = [[UISwitch; _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 finally we can add data to the ViewModel, to achieve our page. The realization of the code is as follows:
to add a DemoMeController.m attribute

/*HooUserCenterSectionModelsection model (nonatomic, strong / @property array) NSArray *sectionArray;

Add a method to DemoMeController.m to add data to sectionArray

- (void) setupSections HooUserCenterItemModel *item1 alloc]init] {//************************************section1 = [[HooUserCenterItemModel; item1.funcName = @ "my mission 1; item1.executeCode = NSLog (" I ^{@ task 1 ");}; item1.img [UIImage = imageNamed:@ item1.detailText =" icon-list01 "]; @" to do the task to win prizes; item1.accessoryType = HooUserCenterAccessoryTypeDisclosureIndicator; HooUserCenterItemModel *item2 [[HooUserCenterItemModel = alloc]init]; item2.funcName = @ "my job 2"; item2.img [UIImage imageNamed:@ = "icon-list01"]; item2.accessoryType = HooUserCenterAccessoryTypeDisclosureIndicator; HooUserCenterItemModel = *item3 [[HooUserCenterItemModel alloc]init]; I Tem3.funcName = @ "my job 3"; item3.img [UIImage imageNamed:@ = "icon-list01"]; item3.accessoryType = HooUserCenterAccessoryTypeDisclosureIndicator; HooUserCenterItemModel = *item4 [[HooUserCenterItemModel alloc]init]; item4.funcName = @ "my job 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 = @ "recharge center"; item5.img [UIImage imageNamed:@ = "icon-list01"]; ite M5.executeCode = NSLog (^{@ "recharge center");}; item5.accessoryType = HooUserCenterAccessoryTypeDisclosureIndicator; HooUserCenterItemModel = *item6 [[HooUserCenterItemModel alloc]init]; item6.funcName = @ "Settings"; 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];}

Using sectionArray data to assemble our tableView cell.

- (UITableViewCell) tableView: (UITableView * tableView) cellForRowAtIndexPath: (NSIndexPath * indexPath) {static NSString = *identifier @ HooUserCenterSectionModel = "setting"; *sectionModel self.sectionArray[indexPath.section] HooUserCenterItemModel; *itemModel = sectionModel.itemArray[indexPath.row]; HooUserCenterCell = *cell [tableView dequeueReusableCellWithIdentifier:identifier]; if (cell! = [[HooUserCenterCell) {cell} alloc]initWithStyle: UITableViewCellStyleDefault reuseIdentifier:identifier]; cell.item = itemModel; return cell;}

this is our use of MVVM design to help us quickly develop personal center, set the module. Use this way create benefits, is the liberation of Controller and View, so that the readability of the code better, but also help us encapsulates some common modules, ViewModel and View and Controller decoupling, convenient we will ViewModel and View code to other projects, and can be extended the ViewModel and View.