你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發基礎 >> 一個基於MVVM的TableView組件化實現方案

一個基於MVVM的TableView組件化實現方案

編輯:IOS開發基礎

pexels-photo-45982-medium.jpeg

AITableView

https://github.com/chentoo/AITableView

cocoapods:

pod ‘AITableView’

做什麼用?

這是一個簡化UITableView使用方式的一個嘗試,不需要再實現UI TableView繁多的delegate和datasource方法,不需要重復實現繁多的cell的if else / switch 邏輯,只需要簡單的配置過程,你就可以輕松的駕馭和布局TableView。

這是一個基於MVVM思想的嘗試,並且最終拼裝成為TableView的元素不再是一個個的cell,而是一個個輕量的ViewModel(我們暫且叫他CellModel)。每個CellModel對應值唯一的一種cell,CellModel只擁有屬性, 且每一個屬性都將直接決定Cell的展示效果。

長遠來看,你可以輕松的組建一個你自己的CellModel庫。在同一個TableView的不同的邏輯情況下,或者不同的TableView中,你可以根據自己的需求選出合適的CellModel,配置屬性,拼裝組建即可。

怎麼使用?

首先使用AITabelView,你不需要更改你原本的Cell的基類和model的基類,只需根據需要實現特定的Protocal即可。

1、 你的每個Cell需要實現AITableViewCellProtocal,並實現對應方法。你應該把你所有的Cell UI元素的配置放在

- (void)AIConfigureWithModel:(DemoNameCellModel *)model1

並在類方法

+ (CGFloat)AIHeightWithModel:(id)model1

返回你的cell的高度。

比如:

#import "DemoTableViewNameCell.h"
#import "AITableViewProtocal.h"
#import "DemoNameCellModel.h"

@interface DemoTableViewNameCell ()  @property (nonatomic, strong) UILabel *nameLabel;
@end

@implementation DemoTableViewNameCell

#pragma mark - AITableViewCellProtocal

- (void)AIConfigureWithModel:(DemoNameCellModel *)model
{    self.nameLabel.text = model.name;
}

+ (CGFloat)AIHeightWithModel:(id)model
{    return 30.0f;
}
@end

2、接下來去寫一個能夠唯一對應這個cell的cellModel,它可以繼承自任何基類,也不需實現任何Protocal。但是需要保證的是,cell可以根據它所唯一對應的cellModel完成所有配置。

需要特別注意的是,每個CellModel類,對應且唯一對應一個Cell類,也即不同的Cell Class 不能對應同一個CellModel類。

完成cell對應的cellModel後,使用下面的方法,去綁定他們。

//AITableView.h

- (void)bindModelClass:(Class)modelClass withCellClass:(Class)cellClass;
- (void)bindModelClass:(Class)modelClass withCellNibClass:(Class)cellNibClass;1234

特別的,如果一個cell的邏輯不依賴外部的變化而變化,那麼他可能不需要一個cellModel去控制。那麼有下面的特別方法去綁定它們。

當然其實我並不建議這麼做,因為從長遠組建CellModel庫的角度來講,擁有一個唯一的cellModel可能更容易管理和使用。

//AITableView.h

- (void)bindStaticCellWithCellClass:(Class)cellClass;
- (void)bindStaticCellWithCellNibClass:(Class)cellNibClass;1234

3、最後使用下面的方法就可以更新你的TableView了。

[self.tableview updateTabelViewWithModels:@[model, sModel, sModel, model]];1

4、如果你需要包含不同的section,或者需要headview footerview,那麼你可以使用: 
AITableViewSection 去構建。

@interface AITableViewSection : NSObject

@property (strong, nonatomic) id headerModel;
@property (strong, nonatomic) id footerModel;
@property (strong, nonatomic) NSArray *cellModels;

+ (instancetype)sectionWithHeaderModel:(id)sectionHeaderModel
                           footerModel:(id)sectionFooterModel
                            cellModels:(NSArray *)cellModels;@end1234567891011

並且使用下面的方法去更新TableView

[self.tableview updateTableViewWithSections:@[aiSection, aiSection, aiSection]];1

5、更多的請參看完整示例代碼。

如何接收cell 點擊事件?

提供了三種方式:

  1. AITableView的 delegate

  2. AITableView的 Block

  3. model 的 protocal block(可以方便的配置在model身上)

具體請看示例代碼。


  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved