先展示一下效果
gif1.gif
我就不直接把代码扔上来了,我们一步一步来.
- 实现导航栏透明
先找一张透明的图,比如去桌面截一张图,
然后去打开你的图片编辑器,把他删掉,剩下的就是透明图片啦
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"haha"] forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setShadowImage:[UIImage imageNamed:@"haha"]];
//这个不设置会出现一条黑线
效果就是这样
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
接下来我们要做的就是调整图片显示位置
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
我就实现了向下滚动的效果,向上的就留给你们啦.
顺便我还留了一些细节故意不说,所以有什么不懂的问我呀.
ps:欢迎有更好的实现方法分享!
