navigationBar 的渐变透明效果

我是第一张图

我是第二张图

类似这样的一个界面,要实现视图向上滑动的时候导航栏渐变为透明并且收起来的效果,其实很简单,首先这个界面是由UICollectionView来构建的,而UICollectionView其实是继承自UIScrollView,既然如此,我们可以在当前控制器中遵守UIScrollViewDelegate协议,并且实现协议方法- (void)scrollViewDidScroll;

这个方法是 UIScrollViewDelegate 中一个非常重要的方法,他会在视图滑动的时候动态调用(很多次,数不清),在此方法中打印scrollView.contentoffset.y

我是第三张图

此时你会发现为什么会有负数输出呢,这是因为UICollectionView控件的bounds的y是从标题栏的下面开始算起的(当然你也可以设置他的 y 值得原点就是整个视图的原点,在这里先不说).当你向上滑动的时候UICollectionView的Y值就会向上递减,当Y值为64的时候到达屏幕顶点(为什么? 自己想).

正好我们可以利用这个 y 值来设置标题栏的 alpha 值,代码如下:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

CGFloat offset = scrollView.contentOffset.y;

NSLog(@"%f",offset);

if (offset < 0) {

self.tabBarController.navigationController.hidesBarsOnSwipe = YES;

self.tabBarController.navigationController.navigationBar.alpha = fabs(offset)/64 *1.0;

}

else{

self.tabBarController.navigationController.navigationBar.alpha = 0.0;

}

}

如果要设置标题栏自动收起的话,直接设置navigationController.hidesBarsOnSwipe = YES就行了.