文章分享至我的個人技術部落格: https://cainluo.github.io/15009611814095.html
最近有些變懶了, 學習的步伐放慢了很多, 估計玩懶了身子, 連部落格都少寫了咯.
之前有個老鐵問我, 怎麼去封裝一個低耦合可服用的TableViewController
, 那時候沒多說啥, 直接把我封裝的框架丟給他了, 但他還是有很多亂七八糟的問題問我, 乾脆直接寫一篇博文當成教程好了.
轉載宣告:如需要轉載該文章, 請聯絡作者, 並且註明出處, 以及不能擅自修改本文.
MVVM模式
由於這裡我是用MVVM
模式來封裝的, 這裡我就簡單點, 通俗點, 易懂點的說說MVVM
吧.
很多老鐵都習慣於用MVC
, 雖然有聽過MVVM
, 但也沒去咋瞭解, 其實MVVM
沒有那麼複雜, 傳統的MVC
是有Model
, Views
, Controller
, 而MVVM
只是在這個得基礎上加了一個ViewModel
, 並且弱化了Controller
的職能.
MVC:
Model
,Views
,Controller
MVVM:Model
,Views
,ViewModel
那麼弱化了的Controller
就負責作為一個粘合劑, 像樂高積木一樣, 把Model
, Views
, ViewModel
組裝在一起, 成為一個模組, 而Model
, Views
, ViewModel
分別又是獨立的個體, 誰都不會離不開誰.
大概就醬紫吧, 如果有更好的說法, 歡迎各位老鐵補充補充哈~~
動工前的思考
這裡說一下, CLTableViewController
是我自己封裝的TableViewController
, 由於我比較懶, 所以裡面直接整合了MJRefresh
, 各位老鐵隨意噴哈.
這裡說一下思路, 由於TableView
還有TableViewDataSource
, TableViewDelegate
, 所以這裡我們需要把兩個模組分開, 這樣子就不會造成程式碼臃腫的情況啦.
注意: 這裡不包括各位的業務邏輯哈
封裝TableViewDataSource
剛剛其實還說漏了一個, 除去TableViewDataSource
, TableViewDelegate
, 期是還有一個ViewModel
層, 這個是用來請求資料的.
現在我們先來看TableViewDataSource
:
#import <Foundation/Foundation.h>
#import "CLTableViewBaseModel.h"
@interface CLTableViewDataSource : NSObject <UITableViewDataSource>
@property (nonatomic, strong, readonly) CLTableViewBaseModel *cl_viewModel;
- (instancetype)initTableViewDataSourceWithViewModel:(CLTableViewBaseModel *)viewModel;
@end
複製程式碼
#import "CLTableViewDataSource.h"
@interface CLTableViewDataSource ()
@property (nonatomic, strong, readwrite) CLTableViewBaseModel *cl_viewModel;
@end
@implementation CLTableViewDataSource
- (instancetype)initTableViewDataSourceWithViewModel:(CLTableViewBaseModel *)viewModel {
self = [super init];
if (self) {
self.cl_viewModel = viewModel;
}
return self;
}
- (NSInteger)tableView:(UITableView *)tableView
numberOfRowsInSection:(NSInteger)section {
return self.cl_viewModel.cl_dataSource.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"UITableViewCell"];
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:@"UITableViewCell"];
}
return cell;
}
@end
複製程式碼
在.h
檔案裡, 只提供了一個供給指定ViewModel
的初始化方法, 內部的實現, 所返回的資料來源數量也是指定ViewModel
的陣列個數, 預設返回一個系統的UITableViewCell
, 這樣子就好了.
封裝TableViewDelegate
關於TableViewDelegate
更多是採用系統的特性, 這裡就沒寫什麼內部實現了:
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import "CLTableViewBaseModel.h"
@interface CLTableViewDelegate : NSObject <UITableViewDelegate>
@property (nonatomic, strong, readonly) CLTableViewBaseModel *cl_viewModel;
- (instancetype)initTableViewDelegateWithViewModel:(CLTableViewBaseModel *)viewModel;
@end
複製程式碼
#import "CLTableViewDelegate.h"
@interface CLTableViewDelegate ()
@property (nonatomic, strong, readwrite) CLTableViewBaseModel *cl_viewModel;
@end
@implementation CLTableViewDelegate
- (instancetype)initTableViewDelegateWithViewModel:(CLTableViewBaseModel *)viewModel {
self = [super init];
if (self) {
self.cl_viewModel = viewModel;
}
return self;
}
@end
複製程式碼
只定義了一個指定ViewModel
的初始化方法.
封裝CLTableViewBaseModel
關於ViewModel
層, 這裡我提供了三個方法, 兩個屬性:
#import <Foundation/Foundation.h>
#import "CLTableViewController.h"
@interface CLTableViewBaseModel : NSObject
@property (nonatomic, strong) NSMutableArray *cl_dataSource;
@property (nonatomic, weak, readonly) CLTableViewController *cl_tableViewController;
- (instancetype)initTableViewBaseModelWithController:(CLTableViewController *)viewController;
/**
通過HTTP請求資料
*/
- (void)cl_tableViewHTTPRequest;
/**
配置TableView每一條Cell所顯示的分割線
*/
- (void)cl_configTableViewWithDataSource;
@end
複製程式碼
#import "CLTableViewBaseModel.h"
@interface CLTableViewBaseModel()
@property (nonatomic, weak, readwrite) CLTableViewController *cl_tableViewController;
@end
@implementation CLTableViewBaseModel
- (instancetype)initTableViewBaseModelWithController:(CLTableViewController *)viewController {
self = [super init];
if (self) {
self.cl_tableViewController = viewController;
}
return self;
}
- (NSMutableArray *)cl_dataSource {
if (!_cl_dataSource) {
_cl_dataSource = [NSMutableArray array];
}
return _cl_dataSource;
}
- (void)cl_tableViewHTTPRequest {
}
- (void)cl_configTableViewWithDataSource {
if (self.cl_dataSource.count > 0) {
self.cl_tableViewController.cl_tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
}
}
@end
複製程式碼
這樣子就大功告成了, 接下來就是組裝起它們就可以了.
組裝成CLTableViewController
剛剛我們已經把三個模組寫好了, 現在就開始組裝:
#import "CLViewController.h"
NS_ASSUME_NONNULL_BEGIN
@interface CLTableViewController : CLViewController
@property (nonatomic, strong, readonly) UITableView *cl_tableView;
/**
初始化CLTableViewController
@param style UITableViewStyle, 預設是UITableViewStylePlain
@return CLTableViewController
*/
- (instancetype)initTableViewControllerWithStyle:(UITableViewStyle)style;
- (void)cl_removeRefresh;
- (void)cl_removeHeaderRefresh;
- (void)cl_removeFooterRefresh;
/**
下拉重新整理方法/上拉載入方法
*/
- (void)cl_dropDownRefresh;
- (void)cl_pullUpRefresh;
/**
開始執行下拉操作/結束下拉操作
*/
- (void)cl_dropDownBeginRefresh;
- (void)cl_dropDownEndRefresh;
/**
開始執行上拉操作/結束上拉操作
*/
- (void)cl_pullUpBeginRefresh;
- (void)cl_pullUpEndRefresh;
- (void)cl_setTableViewDelegate:(_Nullable id <UITableViewDelegate>)delegate
dataSource:(_Nullable id <UITableViewDataSource>)dataSource;
@end
NS_ASSUME_NONNULL_END
複製程式碼
#import "CLTableViewController.h"
#import "MJRefresh.h"
#import "CLTableViewDelegate.h"
#import "CLTableViewBaseModel.h"
@interface CLTableViewController ()
@property (nonatomic, assign) UITableViewStyle tableViewStyle;
@property (nonatomic, strong, readwrite) UITableView *cl_tableView;
@property (nonatomic, strong) CLTableViewDelegate *cl_tableViewDelegate;
@property (nonatomic, strong) CLTableViewBaseModel *cl_ableViewBaseModel;
@end
@implementation CLTableViewController
- (instancetype)initTableViewControllerWithStyle:(UITableViewStyle)style {
self = [super init];
if (self) {
[self setTableViewStyle:style];
}
return self;
}
#pragma mark - View Did Load
- (void)viewDidLoad {
[super viewDidLoad];
self.view.opaque = YES;
self.automaticallyAdjustsScrollViewInsets = NO;
self.view.backgroundColor = [UIColor whiteColor];
[self cl_addRefresh];
}
- (UITableView *)cl_tableView {
if (!_cl_tableView) {
_cl_tableView = [[UITableView alloc] initWithFrame:self.view.frame
style:self.tableViewStyle];
if (self.tableViewStyle == UITableViewStylePlain) {
_cl_tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
}
_cl_tableView.opaque = YES;
}
return _cl_tableView;
}
- (void)cl_setTableViewDelegate:(id<UITableViewDelegate>)delegate
dataSource:(id<UITableViewDataSource>)dataSource {
self.cl_tableView.delegate = delegate;
self.cl_tableView.dataSource = dataSource;
}
#pragma mark - Table View Delegate
- (CLTableViewDelegate *)cl_tableViewDelegate {
if (!_cl_tableViewDelegate) {
_cl_tableViewDelegate = [[CLTableViewDelegate alloc] initTableViewDelegateWithViewModel:self.cl_ableViewBaseModel];
}
return _cl_tableViewDelegate;
}
#pragma mark - Table View Base Model
- (CLTableViewBaseModel *)cl_ableViewBaseModel {
if (!_cl_ableViewBaseModel) {
_cl_ableViewBaseModel = [[CLTableViewBaseModel alloc] initTableViewBaseModelWithController:self];
}
return _cl_ableViewBaseModel;
}
#pragma mark - Refresh
- (void)cl_addRefresh {
MJRefreshNormalHeader *header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
[self cl_dropDownRefresh];
}];
self.cl_tableView.mj_header = header;
MJRefreshBackNormalFooter *refreshFooter = [MJRefreshBackNormalFooter footerWithRefreshingBlock:^{
[self cl_pullUpEndRefresh];
}];
self.cl_tableView.mj_footer = refreshFooter;
[self.view addSubview:self.cl_tableView];
}
- (void)cl_dropDownRefresh {}
- (void)cl_pullUpRefresh {}
- (void)cl_dropDownBeginRefresh {
[self.cl_tableView.mj_header beginRefreshing];
}
- (void)cl_dropDownEndRefresh {
[self.cl_tableView.mj_header endRefreshing];
}
- (void)cl_pullUpBeginRefresh {
[self.cl_tableView.mj_footer beginRefreshing];
}
- (void)cl_pullUpEndRefresh {
[self.cl_tableView.mj_footer endRefreshing];
}
- (void)cl_removeRefresh {
self.cl_tableView.mj_header = nil;
self.cl_tableView.mj_footer = nil;
}
- (void)cl_removeHeaderRefresh {
self.cl_tableView.mj_header = nil;
}
- (void)cl_removeFooterRefresh {
self.cl_tableView.mj_footer = nil;
}
@end
複製程式碼
完成了!!! 現在封裝好了一個屬於我們自己的TableViewController
啦.
總結
由於這裡封裝的比較簡單, 如果有更好建議的老鐵可以私下留言一下, 我也會跟進優化, 方便大家, 當然我自己封裝的框架還有其他, 但是太多了不好一一寫出來, 喜歡的話, 可以Star
一下我的CLFramework, 如果有老鐵想一起維護一下這個開源庫的話, 也可以和我說說.
關於詳細的用法, 大家可以在裡面找到SimpleProject
工程, 裡面有我的詳細用法.