David Seek David Seek - 1 month ago 21
iOS Question

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.

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.

Joe Joe
Answer

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.