我们在做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(, self.height - , XBScreenWidth, )];
line.backgroundColor = XBMakeColorWithRGB(, , , );
[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 - ;
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(, , , );
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 - ;
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(, , , );
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 = ;
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 = ;
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。

利用MVVM设计快速开发个人中心、设置等模块的更多相关文章

  1. Web API应用架构在Winform混合框架中的应用(4)--利用代码生成工具快速开发整套应用

    前面几篇介绍了Web API的基础信息,以及如何基于混合框架的方式在WInform界面里面整合了Web API的接入方式,虽然我们看似调用过程比较复杂,但是基于整个框架的支持和考虑,我们提供了代码生成 ...

  2. 微软BI 之SSIS 系列 - 利用 SSIS 模板快速开发 SSIS Package

    开篇介绍 在做 ETL 项目的时候,往往很多 Package 的开发都是基于相同的模型和流程.比如在 Package 开始运行时需要向 Process Log 表中插入记录,在 Package 运行结 ...

  3. 利用百度AI快速开发出一款“问答机器人”并接入小程序

    先看实现效果: 利用百度UNIT预置的智能问答技能和微信小程序,实现语音问答机器人.这里主要介绍小程序功能开发实现过程,分享主要功能实现的子程序模块,都是干货! 想了解UNIT预置技能调用,请参看我之 ...

  4. 开发者如何利用工具快速开发出完美APP

    文|移动互联网李建华 微信:ydhlwdyq 传统的个人开发者,要想开发出一个完美的APP要 经过以下几个过程:搭建开发环境,写代码,写统计系统,开发即将完成后,要购买服务器,然后把程序布置到服务器上 ...

  5. 如何基于Winform开发框架或混合框架基础上进行项目的快速开发

    在开发项目的时候,我们为了提高速度和质量,往往不是白手起家,需要基于一定的基础上进行项目的快速开发,这样可以利用整个框架的生态基础模块,以及成熟统一的开发方式,可以极大提高我们开发的效率.本篇随笔就是 ...

  6. Android(java)学习笔记262:JNI之工具快速开发步骤

    下面通过一个案例说明一下,利用工具jni快速开发步骤 1.新建一个Android工程,命名为"03_对int数组加1",如下: 2. 在MainActivity.java中对add ...

  7. Android(java)学习笔记206:JNI之工具快速开发步骤

    下面通过一个案例说明一下,利用工具jni快速开发步骤 1.新建一个Android工程,命名为"03_对int数组加1",如下: 2. 在MainActivity.java中对add ...

  8. 【转】利用 Bootstrap 进行快速 Web 开发

    原文转自:http://blog.jobbole.com/53961/ 了解如何使用 Bootstrap 快速开发网站和 Web 应用程序(包括移动友好型应用程序).Bootstrap 以 LESS ...

  9. 如何利用 Bootstrap 进行快速 Web 开发

    原文出处: IBM developerworks 了解如何使用 Bootstrap 快速开发网站和 Web 应用程序(包括移动友好型应用程序).Bootstrap 以 LESS 项目为基础,由 Twi ...

随机推荐

  1. asp.net 分页-自己写分页控件

    去年就发表过asp.net 分页-利用后台直接生成html分页 ,那种方法只是单纯的实现了分页,基本不能使用,那时就想写个自己的分页控件,无奈能力有限.最近有点时间了,就自己做出了这个分页控件.我承认 ...

  2. noi 4982 踩方格

    题目链接:http://noi.openjudge.cn/ch0206/4982/ 深搜很好写. DP:O(n) d[i] 为走 I 不的方案数, l[i],r[i],u[i]为第一步走 左,右,上, ...

  3. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  4. Python多进程编程

    转自:Python多进程编程 阅读目录 1. Process 2. Lock 3. Semaphore 4. Event 5. Queue 6. Pipe 7. Pool 序. multiproces ...

  5. [poj3017] Cut the Sequence (DP + 单调队列优化 + 平衡树优化)

    DP + 单调队列优化 + 平衡树 好题 Description Given an integer sequence { an } of length N, you are to cut the se ...

  6. Windows Server 2008服务器配置FTP站点的方法教程

    1.首先,安装FTP服务   打开服务器管理器,点击角色,添加角色,如果安装过iis,角色摘要里面会有个Web服务器(IIS),点击后面的添加角色,滚动条拉到最后勾选FTP服务器,根据步骤安装. ww ...

  7. Java使用BigDecimal精确计算的简单公式计算器

    由于工作需要,写了一个使用BigDecimal运算的精确计算的计算器(然后发现其实比不用BigDecimal的并好不到哪里去) 只能做加减乘除 double类型的数字在千万级别的时候会转成科学计数法, ...

  8. python 中的input

    渣渣之路. 一. 在python编程初学者指南中的第六章.使用参数和返回值的例子中: # -*- coding: utf-8 -*- def display(message): print messa ...

  9. nodejs系列(一)安装和介绍

    一.安装nodejs http://www.nodejs.org/download/.进入release/选择想要安装的文件,win下安装选择mis和exe的比较方便,安装完毕重新打开cmd命令行,p ...

  10. Windows下安装postgresql_psycopg2时出现 "Unabled to find vcvarsall.bat" 的解决办法

    使用django时会用到postgresql的数据库,如下表: 数据库引擎设置 设置 数据库 适配器 postgresql PostgreSQL psycopg 版本 1.x, http://www. ...