MVVMProjectDemo
模仿login動(dòng)畫登陸百炬，采用MVVM編寫獲取書單列表，根據(jù)輸入的文字進(jìn)行過濾
登陸動(dòng)畫
模仿的是 ios layer animation中的demo，原文是用swift編寫，在自己理解用Objective-c實(shí)現(xiàn)，采用了原來文件中的照片素材岛啸。主要是利用layer animation進(jìn)行動(dòng)畫繪制。如下是整個(gè)交互過程
此次項(xiàng)目界面是用了storyboard進(jìn)行構(gòu)建娃殖，以下簡(jiǎn)略說明有哪些元素需要?jiǎng)赢嬛荡粒唧w可以參見代碼
- Login 按鈕動(dòng)畫組
- 四片云朵的圖片動(dòng)畫組
- 點(diǎn)擊按鈕后：Login按鈕下移，氣球出現(xiàn)炉爆，驗(yàn)證過程的banner出現(xiàn)
- 失敗后堕虹，Login按鈕還原，banner消失芬首，BookShelf抖動(dòng)
- 成功后赴捞，進(jìn)入書單列表頁
新知識(shí)點(diǎn)
這次動(dòng)畫實(shí)現(xiàn)主要是用了CABasicAnimation，CAAnimationGroup郁稍，CAKeyframeAnimation赦政，和UIViewAnimation進(jìn)行實(shí)現(xiàn)，介紹下新接觸的一些知識(shí)點(diǎn)。
使用spring animation來構(gòu)建,是一種特殊的曲線,ios本身有很多動(dòng)畫都是使用spring,參考
+ (void)animateWithDuration:(NSTimeInterval)duration
delay:(NSTimeInterval)delay
usingSpringWithDamping:(CGFloat)dampingRatio
initialSpringVelocity:(CGFloat)velocity
options:(UIViewAnimationOptions)options
animations:(void (^)(void))animations
completion:(void (^)(BOOL finished))completion
使用UIActivityIndicatorView實(shí)現(xiàn)轉(zhuǎn)菊花恢着，查閱資料上說用這個(gè)的很少了桐愉，大多都是用第三方庫(kù)，不過這次嘗試了下掰派，覺得還不錯(cuò)
_loading = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
//UIActivityIndicatorViewStyleWhiteLarge //大白
//UIActivityIndicatorViewStyleWhite //小白
//UIActivityIndicatorViewStyleGray //小灰
[_loading startAnimating];
_loading.frame = CGRectMake(0.0, 6.0, 20.0, 20.0);
_loading.center = CGPointMake(40.0,_loginBtn.frame.size.height/2);
_loading.alpha = 1.0;
[_loginBtn addSubview:_loading];
因?yàn)樵趧?dòng)畫中从诲，四片小白云在動(dòng)畫結(jié)束后，還要繼續(xù)漂浮靡羡，不能使用autoreverses,云朵位置不是同一個(gè)系洛，所以要在云朵動(dòng)畫結(jié)束的時(shí)候，進(jìn)行修改略步，需要重寫animationDidStop:finished
//動(dòng)畫結(jié)束
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
if (flag)
{
NSLog(@"animation did finish");
NSString *name = [anim valueForKey:@"name"];
//......
if ([name isEqualToString:@"cloud"])
{
CALayer *layer = [anim valueForKey:@"layer"];
[anim setValue:nil forKey:@"layer"];
CGPoint position = layer.position;
position.x = -layer.bounds.size.width/2;
layer.position = position;
[TLAnimationHandler delayWithSeconds:0.5 withCompletion:^{
[self animateCloudInLayer:layer];
}];
}
}
}
利用MVVM實(shí)現(xiàn)書單列表頁
MVVM最主要的特點(diǎn)是其有viewModel描扯，其處理了原本我們放在viewController中的處理邏輯，在項(xiàng)目中使用了書單列表的例子理解不同趟薄。
在查閱MVVM實(shí)現(xiàn)時(shí)绽诚，很多人都說到要用ReactiveCocoa框架,但是使用MVVM不一定需要用ReactiveCocoa，也有一篇博文用KVO實(shí)現(xiàn)MVVM,其項(xiàng)目代碼見git地址;只不過ReactiveCocoa為事件定義了一個(gè)標(biāo)準(zhǔn)接口竟趾，從而可以使用一些基本工具來更容易的連接憔购、過濾和組合宫峦。比如原先使用的target-action岔帽、delegate、KVO导绷、callback等都有著不同的處理方式犀勒。我對(duì)ReactiveCocoa進(jìn)行了下初步了解，在項(xiàng)目中嘗試了下
- 添加ReactiveCocoa框架妥曲，一種簡(jiǎn)單方式先要安裝cocoaPods教程
- 了解下最基本的使用 介紹 入門1 入門2
- 借鑒別人用ReactiveCocoa實(shí)現(xiàn)MVVM demo贾费，博文地址
接下來，自己動(dòng)手來實(shí)現(xiàn)檐盟，場(chǎng)景是讀取書單文件內(nèi)容褂萧，將其展示到tableView中；在文本框中輸入字符葵萎，tableView中實(shí)時(shí)顯示包含字符的書單列表导犹。項(xiàng)目目錄結(jié)構(gòu)
有些文件前綴忘記加上=。=|| 其中Handler中對(duì)動(dòng)畫處理的方法羡忘；Model中TLUser是用戶類谎痢，處理登陸名和密碼是否正確，這邊還未涉及數(shù)據(jù)庫(kù)和網(wǎng)絡(luò)請(qǐng)求卷雕；Book是對(duì)應(yīng)每本書信息节猿，書名和出版時(shí)間；viewController中ViewController是處理登陸頁面邏輯和動(dòng)畫展示漫雕，BookListViewController是對(duì)應(yīng)書單列表展示滨嘱，還有輸入框峰鄙；view暫時(shí)沒有，使用storyboard構(gòu)建界面太雨；viewModel中TLLoginViewModel先馆，調(diào)用TLUser中方法判斷是否可以登陸，考慮如果是查詢數(shù)據(jù)庫(kù)驗(yàn)證時(shí)躺彬，可以將這部分邏輯放到TLLoginViewModel煤墙；TLBookListViewModel對(duì)應(yīng)tableview中的數(shù)據(jù)源有TLBookItemViewModel的數(shù)組對(duì)象，
@property (nonatomic,strong)NSArray<TLBookItemViewModel *>*bookItemList;
TLBookItemViewModel則是對(duì)應(yīng)每個(gè)cell的viewModel,因?yàn)閏ell可以有點(diǎn)擊事件宪拥，所以這邊是用TLBookItemViewModel仿野，其有一個(gè)屬性是bookId,對(duì)應(yīng)每本書的bookId,也便于之后請(qǐng)求數(shù)據(jù)；還有個(gè)屬性是desc她君，是用于cell上顯示脚作；其是用book初始化，這邊用到ReactiveCocoa缔刹，將book和TLBookItemViewModel綁定球涛，book數(shù)據(jù)變化，desc也會(huì)變化;但其實(shí)我們也可以不這么寫校镐，可以就用普通的賦值亿扁，這邊可以當(dāng)做感受下RAC的編寫方式。
- (instancetype)initWithBook:(Book *)book
{
self = [super init];
if (self)
{
RAC(self, desc) = [RACSignal combineLatest:@[RACObserve(book, name), RACObserve(book, publisDate)] reduce:^id(NSString * title, NSString * desc){
NSString * descInfo = [NSString stringWithFormat: @"書名:%@ 出版日期:%@", book.name , book.publisDate];
return descInfo;
}];
// 設(shè)置self.bookId與book.bookId的相互關(guān)系.
[RACObserve(book, bookId) subscribeNext:^(id x) {
self.bookId = x;
}];
}
return self;
}
在BookListViewController中需要注意的是鸟廓，通過訂閱輸入框rac_textSignal的變化來調(diào)用viewModel中過濾書單列表方法从祝，并重新更新。
[_searchText.rac_textSignal
subscribeNext:^(id x){
[_bookListViewModel search:x];
[self updateView];
}];
