iOS UI設(shè)計(jì)模式
MVC 模式
MVC 概念
Modal 模型對(duì)象:模型對(duì)象封裝了應(yīng)用程序的數(shù)據(jù),并定義操控和處理該數(shù)據(jù)的邏輯和運(yùn)算。模型(Model)實(shí)際上考慮的是“什么”的問(wèn)題,即你的程序是什么?以紙牌匹配游戲?yàn)槔?,模型就是設(shè)計(jì)這個(gè)游戲怎么玩,花色匹配,數(shù)值匹配得多少分,等邏輯問(wèn)題。以及這個(gè)游戲里的類,如:紙牌,牌堆等類都屬于模型里面的東西。以上都是獨(dú)立于UI且在模型中的。
Controller 控制器對(duì)象:控制器(Controller)控制模型如何呈現(xiàn)在屏幕上,即弄清如何將這些牌顯示在屏幕上,然后將其用動(dòng)畫(huà)的形式表現(xiàn)。
View 視圖對(duì)象:視圖對(duì)象是應(yīng)用程序中用戶可以看見(jiàn)的對(duì)象。視圖(View)是控制器的侍從,是控制器要使用的類,用于構(gòu)建UI。
MVC 各層之間的通信
- Controller要完全知道Model的內(nèi)容,不受限制地訪問(wèn)Model;相反,Model 通過(guò) Notification 和 KVO 機(jī)制與 Controller 間接通信。
- Controller也能與View通信,如通過(guò)outlet;相反View也能與Controller通信,但是View是通用的,所以它不能對(duì)Controller的類知道得太多,只能以一種“盲”的方式去通信,如關(guān)聯(lián)一個(gè)action、委托(delegate)協(xié)議。
- Model 和 View 永遠(yuǎn)不能相互通信,只能通過(guò) Controller 傳遞。
MVVM 模式
MVVM 概念

這個(gè)模式的核心是ViewModel,它是一種特殊的model類型,用于表示程序的UI狀態(tài)。它包含描述每個(gè)UI控件的狀態(tài)的屬性。例如,文本輸入域的當(dāng)前文本,或者一個(gè)特定按鈕是否可用。它同樣暴露了視圖可以執(zhí)行哪些行為,如按鈕點(diǎn)擊或手勢(shì)??梢詫iewModel看作是視圖的模型(model-of-the-view)。
實(shí)際上ViewModel暴露屬性來(lái)表示UI狀態(tài),它同樣暴露命令來(lái)表示UI操作(通常是方法)。ViewModel負(fù)責(zé)管理基于用戶交互的UI狀態(tài)的改變。
MVVM模式中的三部分比MVC更加簡(jiǎn)潔,下面是一些嚴(yán)格的限制:
- View引用了ViewModel,但反過(guò)來(lái)不行。
- ViewModel引用了Model,但反過(guò)來(lái)不行。
如果我們破壞了這些規(guī)則,便無(wú)法正確地使用MVVM。
View引用了ViewModel,但ViewModel沒(méi)有引用View,那ViewModel如何更新視圖呢?MVVM模式依賴于數(shù)據(jù)綁定,它是一個(gè)框架級(jí)別的特性,用于自動(dòng)連接對(duì)象屬性和UI控件。
MVVM項(xiàng)目實(shí)踐
效果展示
- 登錄:一個(gè)普通的登錄功能,輸入賬號(hào)密碼登錄程序
- 主頁(yè):展示好友,支持刷新及加載更多,并提供一個(gè)搜索和退出的功能。
- 搜索結(jié)果頁(yè):展示搜索的好友。



項(xiàng)目構(gòu)建
- 創(chuàng)建項(xiàng)目MVVMExample,添加Model、View、ViewModel等文件夾,項(xiàng)目結(jié)構(gòu)如下:

- 使用CocoaPods添加一些需要使用的庫(kù)。
pod 'ReactiveObjC'
pod 'Masonry', '~>1.1.0'
pod 'AFNetworking', '~> 3.1.0'
pod 'MBProgressHUD', '~> 1.1.0'
pod 'SDWebImage', '~> 4.3.2'
pod 'LinqToObjectiveC', '~> 2.1.0'
pod 'FMDB', '~> 2.7.2'
pod 'MJRefresh', '~> 3.1.15.3'
實(shí)現(xiàn)登錄功能
登錄的準(zhǔn)備工作
- 搭建登錄界面,登錄界面非常簡(jiǎn)潔只有一個(gè)賬號(hào)輸入框、一個(gè)密碼輸入框和一個(gè)登錄按鈕。創(chuàng)建一個(gè)LoginViewController,并在viewDidLoad方法中加入如下代碼。
//創(chuàng)建界面元素
UITextField *userNameTextField = [[UITextField alloc] init];
userNameTextField.borderStyle = UITextBorderStyleRoundedRect;
userNameTextField.placeholder = @"請(qǐng)輸入用戶名…";
[userNameTextField becomeFirstResponder];
[self.view addSubview:userNameTextField];
self.userNameT = userNameTextField;
UITextField *passwordTextField = [[UITextField alloc] init];
passwordTextField.borderStyle = UITextBorderStyleRoundedRect;
passwordTextField.placeholder = @"請(qǐng)輸入密碼…";
passwordTextField.secureTextEntry = YES;
[self.view addSubview:passwordTextField];
self.passWordT = passwordTextField;
UIButton *loginButton = [UIButton buttonWithType:UIButtonTypeSystem];
[loginButton setTitle:@"登錄" forState:UIControlStateNormal];
[self.view addSubview:loginButton];
self.loginB = loginButton;
//布局界面元素
[passwordTextField mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view.mas_left).offset(10);
make.centerY.equalTo(self.view.mas_centerY);
make.right.equalTo(self.view.mas_right).offset(-10);
make.height.equalTo(@30);
}];
[userNameTextField mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view.mas_left).offset(10);
make.bottom.equalTo(passwordTextField.mas_top).offset(-10);
make.right.equalTo(self.view.mas_right).offset(-10);
make.height.equalTo(@(30));
}];
[loginButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(passwordTextField.mas_left).offset(44);
make.top.equalTo(passwordTextField.mas_bottom).offset(10);
make.right.equalTo(passwordTextField.mas_right).offset(-44);
make.height.equalTo(@(30));
}];
- 創(chuàng)建用戶數(shù)據(jù)模型類UserModel,我習(xí)慣于把數(shù)據(jù)跟邏輯分開(kāi),只有簡(jiǎn)單的幾個(gè)屬性,便于后面的傳遞與使用。
#import <Foundation/Foundation.h>
@interface UserModel : NSObject
@property (copy, nonatomic) NSString *username;
@property (copy, nonatomic) NSString *password;
@property (assign, nonatomic, getter=isLogined) BOOL logined;
+ (instancetype)userModelWithUsername:(NSString *)username password:(NSString *)password logined:(BOOL)logined;
- (instancetype)initWithUsername:(NSString *)username password:(NSString *)password logined:(BOOL)logined;
@end
- 創(chuàng)建業(yè)務(wù)功能類Services:這個(gè)功能類實(shí)現(xiàn)了項(xiàng)目的主要功能,登錄、登出、獲取好友、查找好友等。
@interface Result : NSObject
@property (assign, nonatomic) BOOL success;
@property (copy, nonatomic) NSString *message;
@property (strong, nonatomic) id responseObject;
+ (instancetype)resultWithSuccess:(BOOL)success message:(NSString *)message responseObject:(id)responseObject;
- (instancetype)initWithSuccess:(BOOL)success message:(NSString *)message responseObject:(id)responseObject;
@end
@interface Services : NSObject
- (RACSignal *)loginSignal:(NSString *)userName passWord:(NSString *)passWord;
- (RACSignal *)logoutSignal:(NSString *)userName passWord:(NSString *)passWord;
- (RACSignal *)searchSignal:(NSString *)searchText;
- (RACSignal *)allFriendsSignal;
- (RACSignal *)friendSignalWithPage:(NSInteger)page andCount:(NSInteger)count;
- (RACSignal *)searchSignalWithContent:(NSString *)content page:(NSInteger)page andCount:(NSInteger)count;
@end
- 接著創(chuàng)建業(yè)務(wù)邏輯模型類User:包涵用戶的基本數(shù)據(jù)和行為邏輯。
@interface User : NSObject
@property (strong, nonatomic, readonly) Services *services;
@property (strong, nonatomic) UserModel *userModel;
@property (assign, nonatomic, readonly, getter=isValidOfUsername) BOOL validOfUsername;
@property (assign, nonatomic, readonly, getter=isValidOfPassword) BOOL validOfPassword;
+ (instancetype)userWithServices:(Services *)services userModel:(UserModel *)model;
- (instancetype)initWithServices:(Services *)services userModel:(UserModel *)model;
- (RACSignal *)loginSignal;
- (RACSignal *)logoutSignal;
@end
ViewModel與數(shù)據(jù)綁定
- 創(chuàng)建第一個(gè)ViewModel:LoginViewModel,添加如下方法與屬性:
@property (strong, nonatomic) User *user;
@property (strong, nonatomic) RACCommand *loginCommand;
+ (instancetype)loginViewModelWithUser:(User *)user;
- (instancetype)initWithUser:(User *)user;
前面說(shuō)了ViewModel,它是一種特殊的model類型,用于表示程序的UI狀態(tài)。它包含描述每個(gè)UI控件的狀態(tài)的屬性。但是我還是把用戶名和密碼放到數(shù)據(jù)層,方便傳遞,因?yàn)閂iewModel擁有Model,所以并不影響他表示的UI狀態(tài)、包含描述每個(gè)UI控件的狀態(tài)的屬性。
- 補(bǔ)充RACCommand,上一篇文章iOS MVVM之ReactiveCocoa并未提及。
RACCommand 并不表示數(shù)據(jù)流,它只是一個(gè)繼承自 NSObject 的類,但是它卻可以用來(lái)創(chuàng)建和訂閱用于響應(yīng)某些事件的信號(hào)。它本身并不是一個(gè) RACStream 或者 RACSignal 的子類,而是一個(gè)用于管理 RACSignal 的創(chuàng)建與訂閱的類。RACCommand的基本屬性:
- executionSignals:需要執(zhí)行的block成功的時(shí)候返回的信號(hào),他是在主線程執(zhí)行的。
- executing:判斷當(dāng)前的block是否在執(zhí)行,執(zhí)行完之后會(huì)返回@(NO).
- enabled:當(dāng)前命令是否enabled,默認(rèn)是no,他也可以根據(jù)enableSignal來(lái)設(shè)置或者allowsConcurrentExecution設(shè)置為NO的時(shí)候(command已經(jīng)開(kāi)始執(zhí)行)
- errors:執(zhí)行command的時(shí)候獲取的error都會(huì)通過(guò)這個(gè)信號(hào)發(fā)送
- allowsConcurrentExecution:是否允許并發(fā)執(zhí)行command,默認(rèn)是NO。
- initWithSignalBlock:(RACSignal * (^)(id input))signalBlock:初始化RACCommand,參數(shù)為返回一個(gè)信號(hào)的block,即block返回的是executionSignals
- initWithEnabled:(RACSignal *)enabledSignal signalBlock:(RACSignal * (^)(id input))signalBlock:第一個(gè)參數(shù)設(shè)置當(dāng)前command是否可用,第二個(gè)是執(zhí)行的block。enableed默認(rèn)是yes,所以第二個(gè)參數(shù)也可以為nil。
- execute:(id)input:調(diào)用command,input為executionSignals的訂閱者發(fā)送的值
- 實(shí)現(xiàn)LoginViewModel
非常簡(jiǎn)潔的一個(gè)ViewModel,只實(shí)現(xiàn)了其工廠方法,初始化user屬性以及l(fā)oginCommand。
+ (instancetype)loginViewModelWithUser:(User *)user {
return [[self alloc] initWithUser:user];
}
- (instancetype)initWithUser:(User *)user {
if (self = [super init]) {
self.user = user;
//創(chuàng)建有效的用戶名密碼信號(hào)
@weakify(self);
RACSignal *validUS = [[RACObserve(self.user.userModel, username) map:^id _Nullable(id _Nullable value) {
@strongify(self);
return @(self.user.isValidOfUsername);
}] distinctUntilChanged];
RACSignal *validPS = [[RACObserve(self.user.userModel, password) map:^id _Nullable(id _Nullable value) {
@strongify(self);
return @(self.user.isValidOfPassword);
}] distinctUntilChanged];
//合并有效的用戶名密碼信號(hào)作為控制登錄按鈕可用的信號(hào)
RACSignal *validLS = [RACSignal combineLatest:@[validUS, validPS] reduce:^id _Nonnull(id first, id second) {
return @([first boolValue] && [second boolValue]);
}];
self.loginCommand = [[RACCommand alloc] initWithEnabled:validLS signalBlock:^RACSignal * _Nonnull(id _Nullable input) {
@strongify(self);
return [[self.user loginSignal] logAll];
}];
}
return self;
}
- 數(shù)據(jù)綁定
在LoginViewController.m文件中添加如下方法:
- (void)bindViewModel {
self.userNameT.text = self.viewModel.user.userModel.username;
self.passWordT.text = self.viewModel.user.userModel.password;
RAC(self.viewModel.user.userModel, username) = self.userNameT.rac_textSignal;
RAC(self.viewModel.user.userModel, password) = self.passWordT.rac_textSignal;
self.loginB.rac_command = self.viewModel.loginCommand;
@weakify(self)
[self.viewModel.loginCommand.executing subscribeNext:^(NSNumber * _Nullable x) {
@strongify(self)
BOOL end = [x boolValue];
[UIApplication sharedApplication].networkActivityIndicatorVisible = end;
if (end) {
[LoadingTool showTo:self.view];
} else {
[LoadingTool hideFrom:self.view];
}
}];
[self.viewModel.loginCommand.executionSignals subscribeNext:^(RACSignal *signal) {
@strongify(self)
[signal subscribeNext:^(ResultModel *model) {
[self.userNameT resignFirstResponder];
[self.passWordT resignFirstResponder];
if (model.success) {
HomeViewController *homeCtr = [HomeViewController homeViewControllerWithViewModel:[[HomeViewModel alloc] initWithHome:[Home homeWithUser:model.dataModel]]];
[UIApplication sharedApplication].delegate.window.rootViewController = [[UINavigationController alloc] initWithRootViewController:homeCtr];
[[UIApplication sharedApplication].delegate.window makeKeyWindow];
} else {
[LoadingTool showMessage:model.message toView:self.view];
}
}];
}];
}
這個(gè)方法主要是做了這兩件事情,一個(gè)是呈現(xiàn)初始化數(shù)據(jù);另一個(gè)是對(duì)控件和數(shù)據(jù)進(jìn)行綁定,極大的簡(jiǎn)化UI與數(shù)據(jù)的交互,綁定后的能夠及時(shí)的對(duì)數(shù)據(jù)進(jìn)行跟新并且能夠適時(shí)的通知控件。
- 小結(jié)
- Model層暴露服務(wù)并負(fù)責(zé)提供程序的業(yè)務(wù)邏輯實(shí)現(xiàn)。
- ViewModel層表示程序的視圖狀態(tài)(view-state)。同時(shí)響應(yīng)用戶交互及來(lái)自Model層的事件,兩者都受view-state變化的影響。
- View層很薄,只提供ViewModel狀態(tài)的顯示及輸出用戶交互事件。
實(shí)現(xiàn)列表展示頁(yè)(首頁(yè)好友)
列表展示模型層處理
- 在Model分組中,添加一個(gè)FriendModel類,并添加3個(gè)屬性以及工廠方法、初始化方法。
@interface FriendModel : NSObject
@property (copy, nonatomic) NSString *uin;
@property (copy, nonatomic) NSString *name;
@property (copy, nonatomic) NSString *img;
+ (instancetype)friendModelWithInfo:(NSDictionary *)info;
- (instancetype)initWithInfo:(NSDictionary *)info;
@end
這個(gè)模型表示,首頁(yè)好友接口返回的一個(gè)好友的數(shù)據(jù)對(duì)象。
- 添加一個(gè)Home模型類,這個(gè)類應(yīng)包涵首頁(yè)的業(yè)務(wù)邏輯。
@property (strong, nonatomic, readonly) User *user;
+ (instancetype)homeWithUser:(User *)user;
- (instancetype)initWithUser:(User *)user;
- (RACSignal *)friendSignalWithPage:(NSInteger)page andCount:(NSInteger)count;
@end
列表展示ViewModel層處理
- 在ViewModel分組中添加FriendCellViewModel,提供如下方法與屬性:
@interface FriendCellViewModel : NSObject
@property (strong, nonatomic) FriendModel *friendModel;
+ (instancetype)friendCellViewModel:(FriendModel *)model;
- (instancetype)initWithFriendModel:(FriendModel *)model;
@end
從目前來(lái)看,這一層毫無(wú)用處,僅僅是對(duì)model做了一個(gè)中轉(zhuǎn)。表面上的確如此,因?yàn)檫@個(gè)實(shí)力非常簡(jiǎn)單,對(duì)Cell沒(méi)有復(fù)雜的交互和業(yè)務(wù)。這樣的情況是可以整合到一個(gè)ViewModel上,可以少寫(xiě)一個(gè)Model并不會(huì)有任何影響。其實(shí)這里面的業(yè)務(wù)邏輯層已經(jīng)被減去了。
- 添加一個(gè)HomeViewModel如下:
@interface HomeViewModel : NSObject
@property (copy, nonatomic) NSString *title;
@property (strong, nonatomic, readonly) Home *home;
@property (copy, nonatomic) NSArray<FriendCellViewModel *> *dataArr;
@property (copy, nonatomic)
- (instancetype)initWithHome:(Home *)home;
- (RACSignal *)pageSignal;
@end
分別是表示表題、邏輯模型、結(jié)果列表以及一個(gè)獲取數(shù)據(jù)的信號(hào)方法。
列表展示數(shù)據(jù)綁定及頁(yè)面渲染
- 在View層添加FriendTableViewCell、LoginViewController具體就不贅述,與登錄類似。
- FriendTableViewCell數(shù)據(jù)綁定,這個(gè)也十分簡(jiǎn)單,這里處理的非常簡(jiǎn)單,僅僅是對(duì)初始化數(shù)據(jù)進(jìn)行展示:
- (void)bindViewModel:(FriendCellViewModel *)viewModel {
self.viewModel = viewModel;
self.textLabel.text = self.viewModel.friendModel.name;
self.detailTextLabel.text = self.viewModel.friendModel.uin;
[self.imageView sd_setImageWithURL:[NSURL URLWithString:self.viewModel.friendModel.img] placeholderImage:[UIImage imageNamed:@"50"]];
}
- LoginViewController數(shù)據(jù)綁定,主要就是標(biāo)題的呈現(xiàn)與列表的更新。
- (void)bindViewModel {
self.title = self.viewModel.title;
@weakify(self)
[UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
[[self.viewModel pageSignal:isDown] subscribeNext:^(ResultModel *model) {
@strongify(self)
[UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
if (model.success) {
if (model.dataModel == nil || [(NSArray *)model.dataModel count] == 0) {
[LoadingTool showMessage:isDown ? @"沒(méi)有數(shù)據(jù)" : @"沒(méi)有跟多數(shù)據(jù)" toView:self.view];
}
} else {
[LoadingTool showMessage:model.message toView:self.view];
}
if (isDown) {
[self.tableView.mj_header endRefreshing];
} else {
[self.tableView.mj_footer endRefreshing];
}
}];
[RACObserve(self.viewModel, dataArr) subscribeNext:^(id _Nullable x) {
@strongify(self)
[self.tableView reloadData];
}];
}
- 渲染列表頁(yè),基本上就是實(shí)現(xiàn)UITableViewDelegate, UITableViewDataSource這兩個(gè)代理方法。
為列表頁(yè)增加下拉刷新上拉加載更多功能
- 對(duì)HomeViewModel增加頁(yè)碼及頁(yè)碼數(shù)屬性,并修改數(shù)據(jù)獲取信號(hào)方法。
@property (assign, nonatomic, readonly) NSInteger page;
@property (assign, nonatomic, readonly) NSInteger pageCount;
- (RACSignal *)pageSignal:(BOOL)isFirst;
- 在LoginViewController中添加如下方法,把對(duì)數(shù)據(jù)獲取信號(hào)的訂閱分離出去。
/**
加載tableView
@param isDown 是否為下拉加載
*/
- (void)loadTableView:(BOOL)isDown {
@weakify(self)
[UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
[[self.viewModel pageSignal:isDown] subscribeNext:^(ResultModel *model) {
@strongify(self)
[UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
if (model.success) {
if (model.dataModel == nil || [(NSArray *)model.dataModel count] == 0) {
[LoadingTool showMessage:isDown ? @"沒(méi)有數(shù)據(jù)" : @"沒(méi)有跟多數(shù)據(jù)" toView:self.view];
}
} else {
[LoadingTool showMessage:model.message toView:self.view];
}
if (isDown) {
[self.tableView.mj_header endRefreshing];
} else {
[self.tableView.mj_footer endRefreshing];
}
}];
}
- 修改綁定方法,這里使用MJRefresh來(lái)做加載,不熟悉可以先了解一下:
self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
[self loadTableView:YES];
}];
// 設(shè)置自動(dòng)切換透明度(在導(dǎo)航欄下面自動(dòng)隱藏)
self.tableView.mj_header.automaticallyChangeAlpha = YES;
[self.tableView.mj_header beginRefreshing];
self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
[self loadTableView:NO];
}];
self.tableView.mj_footer.automaticallyChangeAlpha = YES;
搜索功能及退出功能
從上面實(shí)現(xiàn)的功能來(lái)看,一切都是套路,就不啰嗦了。有興趣就下載代碼看看。
總結(jié)
- Model層暴露服務(wù)并負(fù)責(zé)提供程序的業(yè)務(wù)邏輯實(shí)現(xiàn)。
- ViewModel層表示程序的視圖狀態(tài)(view-state)。同時(shí)響應(yīng)用戶交互及來(lái)自Model層的事件,兩者都受view-state變化的影響。
- View層很薄,只提供ViewModel狀態(tài)的顯示及輸出用戶交互事件。