一.前言
今天我們就來(lái)實(shí)現(xiàn)簡(jiǎn)書(shū)的導(dǎo)航欄圖片隨著UIScrollView的滾動(dòng)來(lái)改變的效果，簡(jiǎn)書(shū)的效果圖如下：
簡(jiǎn)書(shū)效果圖
二.思路
下面我就說(shuō)一下我的實(shí)現(xiàn)思路，其實(shí)思路很簡(jiǎn)單，主要就是2步：
- 在UINavigationBar上添加圖片
- 實(shí)現(xiàn)UIScrollView的代理方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
下面就具體說(shuō)一下這2步是如何實(shí)現(xiàn)的。
1.在UINavigationBar上添加圖片
這一步其實(shí)很簡(jiǎn)單，但是我在做的時(shí)候也踩了一個(gè)坑，最開(kāi)始我是將UIImageView賦值給navigationBar的titleView，讓UIImageView替代titleView，結(jié)果整個(gè)UIImageView被拉的很長(zhǎng)，就像下面一樣：
UIImageView替代titleView
所以不能這樣做，要將UIImageView添加到UINavigationBar上，即：
[self.navigationController.navigationBar addSubview:self.imageView];
NOTE：
因?yàn)閚avigationBar是所有的ViewController共享的，這樣做就會(huì)有一個(gè)問(wèn)題，那就是當(dāng)你push或pop到其他頁(yè)面時(shí)，這個(gè)圖片仍然在navigationBar上，這不是我們所希望的，所以我們要啦解決這個(gè)問(wèn)題。
解決這個(gè)問(wèn)題其實(shí)很簡(jiǎn)單，就是隱藏系統(tǒng)的navigationBar，然后自定義一個(gè)navigationBar即可。
- 將系統(tǒng)導(dǎo)航欄隱藏，這個(gè)在storyboard或是代碼里都可以隱藏；
- 將
[self.navigationController.navigationBar addSubview:self.imageView];改成[self.navigationBar addSubview:self.imageView];，此處的navigationBar是我們自定義的，通過(guò)IBOutLet拖出來(lái)的； - 在viewWillAppear里面隱藏系統(tǒng)的navigationBar，在viewWillDisappear里面顯示系統(tǒng)的navigationBar。
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
[self.navigationController setNavigationBarHidden:YES animated:animated];
}
- (void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated];
[self.navigationController setNavigationBarHidden:NO animated:animated];
}
2.實(shí)現(xiàn)UIScrollView的代理方法- (void)scrollViewDidScroll:(UIScrollView *)scrollView
這一步是關(guān)鍵，要根據(jù)UIScrollView滾動(dòng)的Y值進(jìn)行計(jì)算，具體代碼如下：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat contentOffsetY = scrollView.contentOffset.y;
CGFloat scale = 1 - contentOffsetY / 300.0;
if (scale < 0.5) {
scale = 0.5;
} else if (scale > 1.0) {
scale = 1.0;
}
self.imageView.transform = CGAffineTransformMakeScale(scale, scale);
}
ok，搞定了！??????。
效果如下圖：
最終效果圖
最后上一個(gè)Demo
