先展示一下效果
gif1.gif
我就不直接把代碼扔上來了,我們一步一步來.
- 實現(xiàn)導航欄透明
先找一張透明的圖,比如去桌面截一張圖,
然后去打開你的圖片編輯器,把他刪掉,剩下的就是透明圖片啦
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"haha"] forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setShadowImage:[UIImage imageNamed:@"haha"]];
//這個不設置會出現(xiàn)一條黑線
效果就是這樣
gif1.gif
- 添加一張一樣的圖
我們在導航欄里面放一張一模一樣的圖片,但是只讓他顯示圖片的一部分
UIImageView *bg_iv = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"img.JPG"]];
//這里的frame就是你要顯示的大小 導航欄的高度加電池條一共64
bg_iv.frame = CGRectMake(0, -20, self.view.frame.size.width, 64);
//這里一定要放到0,不然會蓋到上面的tabbaritem
[self.navigationController.navigationBar insertSubview:bg_iv atIndex:0];
然后就看到這樣
屏幕快照 2016-08-27 下午8.19.17.png
接下來我們要做的就是調(diào)整圖片顯示位置
bg_iv.layer.contentsRect = CGRectMake(0, 0, 1, 64/300.0);
然后就是這樣
gif1.gif
- 最后一步
在滾動的時候 改變圖片的顯示范圍,講得有點不清不楚,看代碼吧!
//為了在這里用到剛剛的bg_iv 我就把那個又弄成了屬性
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
if (scrollView.contentOffset.y < 300-64) {
_bg_iv.layer.contentsRect = CGRectMake(0, scrollView.contentOffset.y/300, 1, 64/300.0);
}
}
gif1.gif
我就實現(xiàn)了向下滾動的效果,向上的就留給你們啦.
順便我還留了一些細節(jié)故意不說,所以有什么不懂的問我呀.
ps:歡迎有更好的實現(xiàn)方法分享!
