当前位置: > > > Swift - 让导航栏随页面一起移动,而不是淡入淡出

Swift - 让导航栏随页面一起移动,而不是淡入淡出

发现市面上有很多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()
    }
}

3,运行效果
             
源码下载:hangge_1117.zip
评论6
  • 6楼
    2017-10-13 12:32
    stone

    纯代码怎么实现??

    站长回复

    你把Navigation Bar改成使用代码创建就可以了。

  • 5楼
    2017-04-09 17:25
    啊哈

    这部分不能写在一个navigationController里面吗?还是每个页面都要自定义这样的呢?

    站长回复

    每个页面都要这样,因为这个相当于每个页面单独使用自己的导航栏。

  • 4楼
    2016-06-30 14:14
    上帝允诺

    航哥思路很好,但是topLaytoutGuide是不是还得调整,麻烦航哥指教一下,因为现在添加的subview frame 为CGRectMake(0,0,100,20)的情况下会和statusbar重叠

    站长回复

    topLayoutGuide不是只读的吗?因为上面有statusbar(高度20),接着是一个Navigation Bar(高度44)。所以我添加subview都是从64位置开始的。CGRectMake(0,64,100,20)

  • 3楼
    2016-06-16 11:29
    伶罗愁簖

    为什么我创建了一个父视图控制器ParentViewController,并在其上面添加UINavigationBar,然后让其他的UIViewController都继承自它,但是没反应呢,其他视图上并未出现我添加的UINavigationBar是什么情况。是说明Swift中不存在自定义父视图控制器一说吗?

    站长回复

    当然可以定义父视图控制器,然后让其他的视图控制器继承它。但你描述的父视图控制器中添加了UINavigationBar,而在子视图中却显示不出来,肯定是哪里写错了,再检查下看看。

  • 2楼
    2016-05-12 14:33
    苦茶。

    航哥,我没用storyboard,用纯代码能够实现这个效果吗?

    站长回复

    当然可以,只要把storyboard相关设置改成纯代码就好了。主要用storyboard 会方便很多。

  • 1楼
    2016-04-29 10:35
    lpeng

    之前提了这个问题,问航哥能不能研究一下,今天终于见到了,辛苦了

    站长回复

    只要我会的话,我都会尽力解答的。就是有时工作忙,网站这边计划又排的比较满,文章就会延期一段时间才出。