iOS UI設計模式
MVC 模式
MVC 概念
image
Modal 模型對象：模型對象封裝了應用程序的數據，并定義操控和處理該數據的邏輯和運算。模型（Model）實際上考慮的是“什么”的問題，即你的程序是什么？以紙牌匹配游戲為例子，模型就是設計這個游戲怎么玩，花色匹配，數值匹配得多少分，等邏輯問題。以及這個游戲里的類，如：紙牌，牌堆等類都屬于模型里面的東西。以上都是獨立于UI且在模型中的。
Controller 控制器對象：控制器（Controller）控制模型如何呈現在屏幕上，即弄清如何將這些牌顯示在屏幕上，然后將其用動畫的形式表現。
View 視圖對象：視圖對象是應用程序中用戶可以看見的對象。視圖（View）是控制器的侍從，是控制器要使用的類，用于構建UI。
MVC 各層之間的通信
- Controller要完全知道Model的內容，不受限制地訪問Model；相反，Model 通過 Notification 和 KVO 機制與 Controller 間接通信。
- Controller也能與View通信，如通過outlet；相反View也能與Controller通信，但是View是通用的，所以它不能對Controller的類知道得太多，只能以一種“盲”的方式去通信，如關聯一個action、委托（delegate）協議。
- Model 和 View 永遠不能相互通信，只能通過 Controller 傳遞。
MVVM 模式
MVVM 概念
image
這個模式的核心是ViewModel，它是一種特殊的model類型，用于表示程序的UI狀態。它包含描述每個UI控件的狀態的屬性。例如，文本輸入域的當前文本，或者一個特定按鈕是否可用。它同樣暴露了視圖可以執行哪些行為，如按鈕點擊或手勢。可以將ViewModel看作是視圖的模型(model-of-the-view)。
實際上ViewModel暴露屬性來表示UI狀態，它同樣暴露命令來表示UI操作(通常是方法)。ViewModel負責管理基于用戶交互的UI狀態的改變。
MVVM模式中的三部分比MVC更加簡潔，下面是一些嚴格的限制：
- View引用了ViewModel，但反過來不行。
- ViewModel引用了Model，但反過來不行。
如果我們破壞了這些規則，便無法正確地使用MVVM。
View引用了ViewModel，但ViewModel沒有引用View，那ViewModel如何更新視圖呢？MVVM模式依賴于數據綁定，它是一個框架級別的特性，用于自動連接對象屬性和UI控件。
MVVM項目實踐
效果展示
- 登錄：一個普通的登錄功能，輸入賬號密碼登錄程序
- 主頁：展示好友，支持刷新及加載更多，并提供一個搜索和退出的功能。
- 搜索結果頁：展示搜索的好友。
image
image
image
項目構建
- 創建項目MVVMExample，添加Model、View、ViewModel等文件夾，項目結構如下：
image
- 使用CocoaPods添加一些需要使用的庫。
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'
實現登錄功能
登錄的準備工作
- 搭建登錄界面，登錄界面非常簡潔只有一個賬號輸入框、一個密碼輸入框和一個登錄按鈕。創建一個LoginViewController，并在viewDidLoad方法中加入如下代碼。
//創建界面元素
UITextField *userNameTextField = [[UITextField alloc] init];
userNameTextField.borderStyle = UITextBorderStyleRoundedRect;
userNameTextField.placeholder = @"請輸入用戶名…";
[userNameTextField becomeFirstResponder];
[self.view addSubview:userNameTextField];
self.userNameT = userNameTextField;
UITextField *passwordTextField = [[UITextField alloc] init];
passwordTextField.borderStyle = UITextBorderStyleRoundedRect;
passwordTextField.placeholder = @"請輸入密碼…";
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));
}];
- 創建用戶數據模型類UserModel，我習慣于把數據跟邏輯分開，只有簡單的幾個屬性，便于后面的傳遞與使用。
#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
- 創建業務功能類Services：這個功能類實現了項目的主要功能，登錄、登出、獲取好友、查找好友等。
@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
- 接著創建業務邏輯模型類User：包涵用戶的基本數據和行為邏輯。
@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與數據綁定
- 創建第一個ViewModel：LoginViewModel，添加如下方法與屬性：
@property (strong, nonatomic) User *user;
@property (strong, nonatomic) RACCommand *loginCommand;
+ (instancetype)loginViewModelWithUser:(User *)user;
- (instancetype)initWithUser:(User *)user;
前面說了ViewModel，它是一種特殊的model類型，用于表示程序的UI狀態。它包含描述每個UI控件的狀態的屬性。但是我還是把用戶名和密碼放到數據層，方便傳遞，因為ViewModel擁有Model，所以并不影響他表示的UI狀態、包含描述每個UI控件的狀態的屬性。
- 補充RACCommand，上一篇文章iOS MVVM之ReactiveCocoa并未提及。
RACCommand 并不表示數據流，它只是一個繼承自 NSObject 的類，但是它卻可以用來創建和訂閱用于響應某些事件的信號。它本身并不是一個 RACStream 或者 RACSignal 的子類，而是一個用于管理 RACSignal 的創建與訂閱的類。RACCommand的基本屬性：
- executionSignals:需要執行的block成功的時候返回的信號，他是在主線程執行的。
- executing：判斷當前的block是否在執行，執行完之后會返回@(NO).
- enabled:當前命令是否enabled，默認是no，他也可以根據enableSignal來設置或者allowsConcurrentExecution設置為NO的時候（command已經開始執行）
- errors:執行command的時候獲取的error都會通過這個信號發送
- allowsConcurrentExecution：是否允許并發執行command，默認是NO。
- initWithSignalBlock:(RACSignal * (^)(id input))signalBlock:初始化RACCommand，參數為返回一個信號的block，即block返回的是executionSignals
- initWithEnabled:(RACSignal *)enabledSignal signalBlock:(RACSignal * (^)(id input))signalBlock:第一個參數設置當前command是否可用，第二個是執行的block。enableed默認是yes，所以第二個參數也可以為nil。
- execute:(id)input：調用command，input為executionSignals的訂閱者發送的值
- 實現LoginViewModel
非常簡潔的一個ViewModel，只實現了其工廠方法，初始化user屬性以及loginCommand。
+ (instancetype)loginViewModelWithUser:(User *)user {
return [[self alloc] initWithUser:user];
}
- (instancetype)initWithUser:(User *)user {
if (self = [super init]) {
self.user = user;
//創建有效的用戶名密碼信號
@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];
//合并有效的用戶名密碼信號作為控制登錄按鈕可用的信號
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;
}
- 數據綁定
在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];
}
}];
}];
}
這個方法主要是做了這兩件事情，一個是呈現初始化數據；另一個是對控件和數據進行綁定，極大的簡化UI與數據的交互，綁定后的能夠及時的對數據進行跟新并且能夠適時的通知控件。
- 小結
- Model層暴露服務并負責提供程序的業務邏輯實現。
- ViewModel層表示程序的視圖狀態(view-state)。同時響應用戶交互及來自Model層的事件，兩者都受view-state變化的影響。
- View層很薄，只提供ViewModel狀態的顯示及輸出用戶交互事件。
實現列表展示頁（首頁好友）
列表展示模型層處理
- 在Model分組中，添加一個FriendModel類，并添加3個屬性以及工廠方法、初始化方法。
@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
這個模型表示，首頁好友接口返回的一個好友的數據對象。
- 添加一個Home模型類，這個類應包涵首頁的業務邏輯。
@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
從目前來看，這一層毫無用處，僅僅是對model做了一個中轉。表面上的確如此，因為這個實力非常簡單，對Cell沒有復雜的交互和業務。這樣的情況是可以整合到一個ViewModel上，可以少寫一個Model并不會有任何影響。其實這里面的業務邏輯層已經被減去了。
- 添加一個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
分別是表示表題、邏輯模型、結果列表以及一個獲取數據的信號方法。
列表展示數據綁定及頁面渲染
- 在View層添加FriendTableViewCell、LoginViewController具體就不贅述，與登錄類似。
- FriendTableViewCell數據綁定，這個也十分簡單，這里處理的非常簡單，僅僅是對初始化數據進行展示：
- (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數據綁定，主要就是標題的呈現與列表的更新。
- (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 ? @"沒有數據" : @"沒有跟多數據" 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];
}];
}
- 渲染列表頁，基本上就是實現UITableViewDelegate, UITableViewDataSource這兩個代理方法。
為列表頁增加下拉刷新上拉加載更多功能
- 對HomeViewModel增加頁碼及頁碼數屬性，并修改數據獲取信號方法。
@property (assign, nonatomic, readonly) NSInteger page;
@property (assign, nonatomic, readonly) NSInteger pageCount;
- (RACSignal *)pageSignal:(BOOL)isFirst;
- 在LoginViewController中添加如下方法，把對數據獲取信號的訂閱分離出去。
/**
加載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 ? @"沒有數據" : @"沒有跟多數據" 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來做加載，不熟悉可以先了解一下:
self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
[self loadTableView:YES];
}];
// 設置自動切換透明度(在導航欄下面自動隱藏)
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;
搜索功能及退出功能
從上面實現的功能來看，一切都是套路，就不啰嗦了。有興趣就下載代碼看看。
總結
- Model層暴露服務并負責提供程序的業務邏輯實現。
- ViewModel層表示程序的視圖狀態(view-state)。同時響應用戶交互及來自Model層的事件，兩者都受view-state變化的影響。
- View層很薄，只提供ViewModel狀態的顯示及輸出用戶交互事件。
