Swift 3 / How to overlap Root's UINavigationBar with UIViewController's UINavigationBar

I’m trying to recreate the navigation behavior from Tinder. For that I have translated a Framework delivering the NavigationBar into Swift 3.

The test App is pretty simple. I’ve created a test git project, if someone is interested.

  • Xcode 6 iPhone Simulator Application Support location
  • Convert UIImage to UInt8 Array in Swift
  • How to search a subString from a NSString with case-insensitive
  • changing the color of titleFor Header in section
  • What does setting the UIWindow's rootViewController do?
  • How To Localize a “Timer” on iPhone
  • class AppDelegate: UIResponder, UIApplicationDelegate {
    
    var window: UIWindow?
    var controller: SLPagingViewSwift!
    var nav: UINavigationController?
    var home: ViewController?
    
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    
    
        window = UIWindow(frame: UIScreen.main.bounds)
        let orange = UIColor(red: 255/255, green: 69.0/255, blue: 0.0/255, alpha: 1.0)
        let gray = UIColor(red: 0.84, green: 0.84, blue: 0.84, alpha: 1.0)
    
        let stb = UIStoryboard(name: "Main", bundle: nil)
        self.home = stb.instantiateViewController(withIdentifier: "ViewController") as? ViewController
        let vc2 = ViewController()
        vc2.view.backgroundColor = .red
        let vc3 = ViewController()
        vc3.view.backgroundColor = .blue
    
    
        var homeBtn = UIImage(named: "profile")
        homeBtn = homeBtn?.withRenderingMode(.alwaysTemplate)
        var vc2Btn = UIImage(named: "gear")
        vc2Btn = vc2Btn?.withRenderingMode(.alwaysTemplate)
        var vc3Btn = UIImage(named: "chat")
        vc3Btn = vc3Btn?.withRenderingMode(.alwaysTemplate)
    
        let items = [UIImageView(image: homeBtn),
                     UIImageView(image: vc2Btn),
                     UIImageView(image: vc3Btn)]
    
        let controllers = [self.home!,
                           vc2,
                           vc3] as [UIViewController]
    
        self.controller = SLPagingViewSwift(items: items, controllers: controllers, showPageControl: false)
    
        self.controller.pagingViewMoving = ({ subviews in
            if let imageViews = subviews as? [UIImageView] {
                for imgView in imageViews {
                    var c = gray
                    let originX = Double(imgView.frame.origin.x)
    
                    if (originX > 45 && originX < 145) {
                        c = self.gradient(originX, topX: 46, bottomX: 144, initC: orange, goal: gray)
                    }
                    else if (originX > 145 && originX < 245) {
                        c = self.gradient(originX, topX: 146, bottomX: 244, initC: gray, goal: orange)
                    }
                    else if(originX == 145){
                        c = orange
                    }
                    imgView.tintColor = c
                }
            }
        })
    
        self.nav = UINavigationController(rootViewController: self.controller)
        self.window?.rootViewController = self.nav
        self.window?.backgroundColor = UIColor.black
        self.window?.makeKeyAndVisible()
    
        return true
    
    }
    

    In my UIViewController, I want a new UIViewController to be pushed within the UINavigationController stack (to have the back button and the back swipe), once a Cell is clicked.

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let stb = UIStoryboard(name: "Main", bundle: nil)
        let vc = stb.instantiateViewController(withIdentifier: "SegueVC")
        let appDelegate = UIApplication.shared.delegate as! AppDelegate
    
        appDelegate.controller?.navigationController?.pushViewController(vc, animated: true)
        //appDelegate.nav?.pushViewController(vc, animated: true)
    }
    

    The problem is, that the SegueVC has the same UINavigationBar as the Root.

    enter image description here

    Basically I want the UINavigationBar of the SegueVC to overlap the bar of the Root Controller to have this:

    enter image description here

    It doesn’t makes any difference if I push the SegueVC on the controller or the nav.

    appDelegate.controller?.navigationController?.pushViewController(vc, animated: true)
    //appDelegate.nav?.pushViewController(vc, animated: true)
    

    The structure as shown in the AppDelegate: nav is the rootViewController of window and the UINavigationController of the var controller: SLPagingViewSwift!.

    self.nav = UINavigationController(rootViewController: self.controller)
    self.window?.rootViewController = self.nav
    self.window?.backgroundColor = UIColor.black
    self.window?.makeKeyAndVisible()
    

    I was thinking about presenting the SegueVC animated outside the navigation stack, but then I’m missing the build-in back button and the swipe back gesture. What are my options? Help is very appreciated.

    Solutions Collect From Internet About “Swift 3 / How to overlap Root's UINavigationBar with UIViewController's UINavigationBar”

    You can do this by setting up a container to your mainVC and move it accordingly…i believe twitter animation is easy thing to achieve.I am using same sort of animation transition in my project.

    I,strongly recommend to check this project in giithub
    https://github.com/evnaz/ENSwiftSideMenu and also check my answer from this link Change Status Bar Color in Real Time

    if you want to achieve your first screencast from ur post. I believe you can easily hide your statusBar and navigationBar. and place an UIView top of the navigation bar position check my answer Swift Navigation bar background color white does not work and place an uiview lager then storyBoard like view.frame.width + 100 (whatever the size works for you) and play with the UIView(you can use container to) offset position when swipeGesture detected.

    Check this link related to twitter animation https://github.com/ThornTechPublic/InteractiveSlideOutMenu https://github.com/ThornTechPublic/LeftSlideoutMenu

    Note: Above,answer based on the early conversation between me & the question owner.