透明导航栏➕图片滚动停留

先展示一下效果

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:欢迎有更好的实现方法分享!