Swift - 让导航栏随页面一起移动，而不是淡入淡出
作者：hangge | 2016-04-28 09:07
发现市面上有很多APP在页面切换的时候，顶部导航栏是随着所在的页面一起移动的，使用手势滑动返回可以看得更明显些。比如下图是网易新闻的页面截图：
我们应用中如果使用导航控制器（navigationController），其默认自带的导航栏在页面切换的时候是固定不动的，而上面的元素（标题文字，返回按钮等）会随着页面移动而有淡入淡出的效果：
下面实现让导航栏随视图移动的效果。
1，实现原理
我们将 navigationController 自带的导航栏隐藏，然后每个页面分别使用自定义的导航栏（navigationBar）
2，实现步骤
（1）选中 Navigation Controller，将“Show Navigation Bar”取消勾选，这样自带的导航栏就不会显示了。
（2）分别给首页和详情页添加 Navigation Bar，并设置颜色。注意：把“Translucent”取消勾选，防止导航栏移动的时候添加渐变透明度效果。
（3）如果觉得顶部状态栏使用黑色或白色背景都不好看的话，可以在上面添加个20个点高度的 UIView，然后设置需要的颜色，这里用和导航栏一样的绿色。
（4）二级页面（详情页）导航栏左侧再加个按钮用于返回
（5）详情页对应类（DetailViewController.swift）中添加返回按钮相关代码。同时由于隐藏了默认导航条，所以滑动返回失效，还要在代码中加个手势实现滑动返回。
import UIKit
class DetailViewController: UIViewController, UIGestureRecognizerDelegate {
override func viewDidLoad() {
super.viewDidLoad()
//启用滑动返回（swipe back）
self.navigationController?.interactivePopGestureRecognizer!.delegate = self
}
//返回按钮点击响应
@IBAction func backToPrevious(sender: AnyObject) {
self.navigationController?.popViewControllerAnimated(true)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
全部评论（6）
纯代码怎么实现？？
站长回复：你把Navigation Bar改成使用代码创建就可以了。
这部分不能写在一个navigationController里面吗？还是每个页面都要自定义这样的呢？
站长回复：每个页面都要这样，因为这个相当于每个页面单独使用自己的导航栏。
航哥思路很好，但是topLaytoutGuide是不是还得调整，麻烦航哥指教一下，因为现在添加的subview frame 为CGRectMake(0,0,100,20)的情况下会和statusbar重叠
站长回复：topLayoutGuide不是只读的吗？因为上面有statusbar（高度20）,接着是一个Navigation Bar（高度44）。所以我添加subview都是从64位置开始的。CGRectMake(0,64,100,20)
为什么我创建了一个父视图控制器ParentViewController，并在其上面添加UINavigationBar，然后让其他的UIViewController都继承自它，但是没反应呢，其他视图上并未出现我添加的UINavigationBar是什么情况。是说明Swift中不存在自定义父视图控制器一说吗？
站长回复：当然可以定义父视图控制器，然后让其他的视图控制器继承它。但你描述的父视图控制器中添加了UINavigationBar，而在子视图中却显示不出来，肯定是哪里写错了，再检查下看看。
航哥，我没用storyboard，用纯代码能够实现这个效果吗？
站长回复：当然可以，只要把storyboard相关设置改成纯代码就好了。主要用storyboard 会方便很多。
之前提了这个问题，问航哥能不能研究一下，今天终于见到了，辛苦了
站长回复：只要我会的话，我都会尽力解答的。就是有时工作忙，网站这边计划又排的比较满，文章就会延期一段时间才出。