Messages-like taller / standard navigation bar during push / pop

Question

iOS 10 Messages app's navigation bar increases/decreases the height when you push/pop a conversation (with a smooth transition).

Typically I make a taller custom navigation bar using sizeThatFits:, but it persists across pushes and pops of view controllers in a navigation controller.

How is it possible to have a taller navigation bar just for some view controllers across navigation sequences like the Messages app? Thanks!

Have you managed to find a solution? I built a `UINavigationBar` extension for settings a `height` value and using that value for computing the `sizeThatFits` frame. Now I can use this extension to update the `height` on `viewWillAppear`, by setting the `navigationBar` height inside an animation loop and calling `navigationBar.sizeToFit()`. Works great when pushing, unfortunately not so great when popping back. Tried reseting the frame in the same way on `viewWillDissapear` or on `viewWillAppear` for the previous controller. — alexbumbu, Dec 09 '16 at 16:41
@user370773 You can check my edited answer. I changed the way that I animate navigationBar height. It works for swipe and pop button. — kamwysoc, Jul 20 '17 at 11:32

score 7 · Accepted Answer · edited Nov 21 '18 at 06:17

Very interesting problem. I spent some time to achieve something like this in the Messages app and that is what I've done.

Finally, I use this trick to animate navigationBar height during push/pop and also pop with swipe gesture.

UIView.beginAnimations(nil, context: nil)
self.frame = navFrame
UIView.commitAnimations()

Below you can see my implementation:

extension UINavigationBar {
    func applyHeight(_ height: CGFloat, animated: Bool = true) {
        var navFrame = self.frame
        navFrame.size.height = height
        if animated {
            UIView.beginAnimations(nil, context: nil)
            self.frame = navFrame
            UIView.commitAnimations()
        } else {
            self.frame = navFrame
        }
    }
}

class ViewControllerA: UIViewController {

    override func loadView() {
        super.loadView()
        title = "A"
        view.backgroundColor = .blue
        navigationItem.rightBarButtonItem = UIBarButtonItem(title: "NEXT", style: .plain, target: self, action: #selector(self.showController))
        navigationController?.navigationBar.isTranslucent = false
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
    }

    func showController() {
        navigationController?.pushViewController(ViewControllerB(), animated: true)
    }
}

class ViewControllerB: UIViewController {

    override func loadView() {
        super.loadView()
        title = "B"
        view.backgroundColor = .red
    }

    override func viewWillAppear(_ animated: Bool) {
        navigationController?.navigationBar.applyHeight(100)
        super.viewWillAppear(animated)
    }

    override func willMove(toParentViewController parent: UIViewController?) {
        if parent == nil { // here you know that back button was tapped
            navigationController?.navigationBar.applyHeight(44)
        }
        super.willMove(toParentViewController: parent)
    }
}

Things to improve

Title jumps to top

Jumping title is visible while you swipe to pop, but personally, I think this is a small problem :)

Hope it helps you, and maybe someone can improve this implementation. Of course, I will still try to figure out how to make this better :) Here it's a github repository. Please use navigation_bar_height branch.

Thanks for the answer! It looks quite a good approach! The only problem though is that the `titleLabel` and `backButtonTitleLabel` jump to top as soon as the transition begins. I guess you need to apply some offset to them as well. — E-Riddie, Jul 14 '17 at 11:52
Yeah, you're right the title offset is kind of a problem too. I'll try to fix that also. I'll update my answer if I get something new in my solution. :) — kamwysoc, Jul 14 '17 at 11:54
I used to override `layoutSubviews` of my navigation bar when i customize navigationbar's height. just move all subview upper. — Codus, Jul 14 '17 at 12:14

score 0 · Answer 2 · answered Dec 18 '19 at 11:23

0

I think now you can achieve something similar with just this, just set large title to always:

answered Dec 18 '19 at 11:23

Markicevic

1,025
9
20

Messages-like taller / standard navigation bar during push / pop

2 Answers2

Things to improve