【iOS開發(fā)】路由+協(xié)議打造極簡 table view 和 collection view 頁面

好久沒有寫東西了特碳,今天來分享一下最近在項(xiàng)目中對(duì)UITableView的一種優(yōu)化寫法诚亚。

先來看一下效果

效果圖

上面這個(gè)頁面對(duì)應(yīng)的ViewController的代碼是這樣的, Demo地址在文章的末尾:


#import "ViewController.h"
#import "YTTableView.h"
#import "ViewModel.h"

@interface ViewController ()

@property (nonatomic, strong) YTTableView *tableView;
@property (nonatomic, strong) ViewModel *viewModel;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self.view addSubview:self.tableView];
    self.tableView.frame = self.view.bounds;
    
    [self bindActions];
    
    self.tableView.sections = self.viewModel.sections;
}

- (void)bindActions {
    
    /*
     
     關(guān)于事件處理:
     1、建議項(xiàng)目用路由午乓,cell的事件直接在cell內(nèi)部處理掉站宗。
     2、如果不用路由益愈,如果cell上有個(gè)button什么的梢灭,點(diǎn)擊要處理夷家,可以在cell的view model里面聲明對(duì)應(yīng)的RACSignal。再進(jìn)行訂閱敏释。點(diǎn)擊button的時(shí)候库快,發(fā)送事件就可以處理了。
     3钥顽、cell的點(diǎn)擊處理還可以用下面的這個(gè)didSelectRow來處理义屏。
     
     */
    self.tableView.didSelectRow = ^(id viewModel, NSString *sectionKey) {
        // 點(diǎn)擊事件在這里處理
    };
}

#pragma mark - lazy load

- (YTTableView *)tableView {
    if (!_tableView) {
        _tableView = [[YTTableView alloc] init];
        _tableView.backgroundColor = [UIColor colorWithRed:0xef/255.0 green:0xef/255.0 blue:0xef/255.0 alpha:1];
        _tableView.tableFooterView = [UIView new];
        _tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    }
    
    return _tableView;
}

- (ViewModel *)viewModel {
    if (!_viewModel) {
        _viewModel = [ViewModel new];
    }
    
    return _viewModel;
}

@end

適用場(chǎng)景

任何用tableView的地方都可以用。

一般的開發(fā)寫法

要在ViewController里面引入所有類型的cell蜂大,在cellForRow方法里面使用闽铐。注冊(cè)cell使用。heightForRow方法也是各種判斷(前面寫了一篇文章減少判斷的【iOS開發(fā)】UITableView和UICollectionView多種類型cell處理奶浦,更好地組織代碼),增加或者減少某個(gè)類型的cell的時(shí)候兄墅,得去ViewController里面的好幾個(gè)地增加或者減少代碼。

YTTableView

優(yōu)點(diǎn)

  • 完全解耦cell和view controller澳叉。

  • 方便版本迭代:新版本有新的樣式或是要添加新的section 什么的隙咸,都可以不用改動(dòng)viewController。

  • cell有極高的可重用性成洗,實(shí)現(xiàn)了對(duì)應(yīng)的協(xié)議后五督,任何地方都可以用。

  • 不需要修改ViewController里面的代碼泌枪。

  • 任何的修改都可以在一個(gè)地方完成概荷。

  • 集成了table view的分隔線秕岛,可以任意調(diào)整分隔線碌燕。section的第一條和最后一條分隔線可以分開設(shè)置。

cell的事件處理

  1. 建議項(xiàng)目用路由继薛,cell的事件直接在cell內(nèi)部處理掉修壕。
  2. 如果不用路由,如果cell上有個(gè)button什么的遏考,點(diǎn)擊要處理慈鸠,可以在cell的view model里面聲明對(duì)應(yīng)的RACSignal。再進(jìn)行訂閱灌具。點(diǎn)擊button的時(shí)候青团,發(fā)送事件就可以處理了。
  3. cell的點(diǎn)擊處理還可以用YTTableView暴露的didSelectRow來處理咖楣。

集成使用

把YTTableView相關(guān)代碼拉到項(xiàng)目中督笆,pod支持找時(shí)間加上去。

注意的點(diǎn):

  1. 如果用YTTableView中的自定義的分隔線诱贿,記得把table view本來的分隔線去掉娃肿。

  2. cell都要有一個(gè)對(duì)應(yīng)的cell view model咕缎。

  3. cell 要實(shí)現(xiàn)YTCellProtocol協(xié)議。

  4. cell view model 要實(shí)現(xiàn) YTTableCellViewModelProtocol協(xié)議料扰。

協(xié)議說明

  • YTCellProtocol
    table view的cell都要實(shí)現(xiàn)這個(gè)接口凭豪,接口提供配置數(shù)據(jù)的方法和注冊(cè)cell的方法。
/**
 cell 的接口
 提供一個(gè)配置cell的ViewModel的方法
 */
@protocol YTCellProtocol <NSObject>

@required


/**
 通過 view model 來配置cell, table view 的數(shù)據(jù)源里面裝的都會(huì)是 view model
 
 @param viewModel cell 對(duì)應(yīng)的 view model
 */
- (void)configCellWithViewModel:(id)viewModel;


@end
  • YTTableCellViewModelProtocol
    table view cell 對(duì)應(yīng)的view model 都要實(shí)現(xiàn)這個(gè)接口晒杈,實(shí)現(xiàn)返回cell高度的方法和cell的復(fù)用id
/**
 UITableViewCell 對(duì)應(yīng)的ViewModel 的協(xié)議
 */
@protocol YTTableCellViewModelProtocol <NSObject>

@required;
/**
 返回cell的高度, 這個(gè)方法是在view model中實(shí)現(xiàn)嫂伞,view model中有cell的全部數(shù)據(jù),所以這里可以通過數(shù)據(jù)計(jì)算高度桐智,或者直接返回固定高度
 
 @return cell的高度
 */
- (CGFloat)cellHeight;


/**
 返回cell的復(fù)用id
 
 @return cell的復(fù)用id
 */
+ (NSString *)identifier;


/**
 注冊(cè)cell

 @param table 要注冊(cè)到的table view
 */
+ (void)registerFor:(UITableView *)table;

@end

Section類說明

@interface YTTableViewSection : NSObject

/**
 用來標(biāo)識(shí)section的類型末早,要保證每個(gè)section的都不同
 代理方法里面如果要做特殊處理會(huì)用到,所以不能相同
 */
@property (nonatomic, copy) NSString *sectionKey;


/**
 section 里面 row 的 view model 集合
 */
@property (nonatomic, copy) NSArray *viewModels;


/**
 返回這個(gè)section有多少row说庭,這個(gè)不用設(shè)置然磷,在設(shè)置viewModels時(shí),會(huì)自動(dòng)設(shè)置
 */
@property (nonatomic, readonly) NSInteger numberOfRows;


/**
 是否自動(dòng)添加分隔線
 */
@property (nonatomic) BOOL autoSeparator;
// 分隔線顏色 默認(rèn):#E6E6E6
@property (nonatomic, strong) UIColor *separatorColor;
@property (nonatomic, strong) UIColor *separatorBackgroundColor;
// 分隔線左邊縮進(jìn)
@property (nonatomic) CGFloat separatorLeftInset;
// 分隔線右邊縮進(jìn)
@property (nonatomic) CGFloat separatorRightInset;
// 分隔線的高度 默認(rèn)1px
@property (nonatomic) CGFloat separatorHeight;

// section頭部分隔線 不受separatorInset影響
@property (nonatomic) BOOL sectionTopSeparator;
@property (nonatomic) CGFloat topSeparatorHeight;
@property (nonatomic, strong) UIColor *topSeparatorColor;

// section尾部分隔線 不受separatorInset影響
@property (nonatomic) BOOL sectionBottomSeparator;
@property (nonatomic) CGFloat bottomSeparatorHeight;
@property (nonatomic, strong) UIColor *bottomSeparatorColor;

- (instancetype)initWithSectionKey:(NSString *)key viewModels:(NSArray *)viewModels;

Cocoapods支持

如果覺得可以就給個(gè)Star刊驴。
Github Repo

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末姿搜,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子捆憎,更是在濱河造成了極大的恐慌舅柜,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,589評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件躲惰,死亡現(xiàn)場(chǎng)離奇詭異致份,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)础拨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,615評(píng)論 3 396
  • 文/潘曉璐 我一進(jìn)店門氮块,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人诡宗,你說我怎么就攤上這事滔蝉。” “怎么了塔沃?”我有些...
    開封第一講書人閱讀 165,933評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵欢摄,是天一觀的道長熄赡。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么佑菩? 我笑而不...
    開封第一講書人閱讀 58,976評(píng)論 1 295
  • 正文 為了忘掉前任背稼,我火速辦了婚禮兼砖,結(jié)果婚禮上括儒,老公的妹妹穿的比我還像新娘。我一直安慰自己肮韧,他們只是感情好融蹂,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,999評(píng)論 6 393
  • 文/花漫 我一把揭開白布旺订。 她就那樣靜靜地躺著,像睡著了一般超燃。 火紅的嫁衣襯著肌膚如雪区拳。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,775評(píng)論 1 307
  • 那天意乓,我揣著相機(jī)與錄音樱调,去河邊找鬼。 笑死届良,一個(gè)胖子當(dāng)著我的面吹牛笆凌,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播士葫,決...
    沈念sama閱讀 40,474評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼乞而,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了慢显?” 一聲冷哼從身側(cè)響起爪模,我...
    開封第一講書人閱讀 39,359評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎荚藻,沒想到半個(gè)月后屋灌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,854評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡应狱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,007評(píng)論 3 338
  • 正文 我和宋清朗相戀三年共郭,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片疾呻。...
    茶點(diǎn)故事閱讀 40,146評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡除嘹,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出罐韩,到底是詐尸還是另有隱情憾赁,我是刑警寧澤污朽,帶...
    沈念sama閱讀 35,826評(píng)論 5 346
  • 正文 年R本政府宣布散吵,位于F島的核電站,受9級(jí)特大地震影響蟆肆,放射性物質(zhì)發(fā)生泄漏矾睦。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,484評(píng)論 3 331
  • 文/蒙蒙 一炎功、第九天 我趴在偏房一處隱蔽的房頂上張望枚冗。 院中可真熱鬧,春花似錦蛇损、人聲如沸赁温。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,029評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽股囊。三九已至袜匿,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間稚疹,已是汗流浹背居灯。 一陣腳步聲響...
    開封第一講書人閱讀 33,153評(píng)論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留内狗,地道東北人怪嫌。 一個(gè)月前我還...
    沈念sama閱讀 48,420評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像柳沙,于是被迫代替她去往敵國和親岩灭。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,107評(píng)論 2 356

推薦閱讀更多精彩內(nèi)容