UIToolBar position to top of UINavigationController

Question

How to move the UIToolBar to top (stick to the UINavigationBar )?

I m struggle with this thing for a long time and I've try some stuff like:

• Custom UIToolBar that conforms to UIToolbarDelegate and (UIBarPosition)positionForBar:(id <UIBarPositioning>)bar get called and I return UIBarPositionTop but the toolbar stays at bottom.
• Change the toolbar frame: self.navigationController.toolbar.frame = CGRectMake(0, NAV_BAR_Y, self.view.bounds.size.width, NAV_BAR_HEIGHT);
• Custom UINaviagtionController which has this delegate function: (UIBarPosition)positionForBar:(id <UIBarPositioning>)bar { return UIBarPositionTop; } (UIBarPosition)positionForBar:(id <UIBarPositioning>)bar { return UIBarPositionTop; }

None of the struggles goes well, same look:

Any Help will be great.

(I would like to have navigation look as Apple App store navigation)

Answer 1

There are 2 options that I'm aware of.

1) Related to Move UINavigationController's toolbar to the top to lie underneath navigation bar

You can subclass UINavigationController and change the Y-axis position of the toolbar when the value is set.

import UIKit

private var context = 0

class NavigationController: UINavigationController {
    private var inToolbarFrameChange = false
    var observerBag: [NSKeyValueObservation] = []

    override func awakeFromNib() {
        super.awakeFromNib()
        self.inToolbarFrameChange = false
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        observerBag.append(
            toolbar.observe(\.center, options: .new) { toolbar, _ in
                if !self.inToolbarFrameChange {
                    self.inToolbarFrameChange = true
                    toolbar.frame = CGRect(
                        x: 0,
                        y: self.navigationBar.frame.height + UIApplication.shared.statusBarFrame.height,
                        width: toolbar.frame.width,
                        height: toolbar.frame.height
                    )
                    self.inToolbarFrameChange = false
                }
            }
        )
    }

    override func setToolbarHidden(_ hidden: Bool, animated: Bool) {
        super.setToolbarHidden(hidden, animated: false)

        var rectTB = self.toolbar.frame
        rectTB = .zero
    }
}

2) You can create your own UIToolbar and add it to view of the UIViewController . Then, you add the constraints to the leading, trailing and the top of the safe area.

import UIKit

final class ViewController: UIViewController {
    private let toolbar = UIToolbar()
    private let segmentedControl: UISegmentedControl = {
        let control = UISegmentedControl(items: ["Op 1", "Op 2"])
        control.isEnabled = false
        return control
    }()

   override func loadView() {
        super.loadView()
        setupToolbar()
   }

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

    private func setupToolbar() {
        let barItem = UIBarButtonItem(customView: segmentedControl)
        toolbar.setItems([barItem], animated: false)
        toolbar.isTranslucent = false
        toolbar.isOpaque = false

        view.addSubview(toolbar)

        toolbar.translatesAutoresizingMaskIntoConstraints = false
        toolbar.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        toolbar.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        toolbar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
    }
}

private extension UINavigationBar {

    func showBorderLine() {
        findBorderLine().isHidden = false
    }

    func hideBorderLine() {
        findBorderLine().isHidden = true
    }

    private func findBorderLine() -> UIImageView! {
        return self.subviews
            .flatMap { $0.subviews }
            .compactMap { $0 as? UIImageView }
            .filter { $0.bounds.size.width == self.bounds.size.width }
            .filter { $0.bounds.size.height <= 2 }
            .first
    }
}

Answer 2

Try this solution

@interface ViewController () <UIToolbarDelegate>
{
    UIToolbar * lpToolbar;
}
@end

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    lpToolbar = [[UIToolbar alloc] initWithFrame :CGRectZero];
    lpToolbar.delegate = self;
    self.navigationItem.title = @"Title";
}

-(void) viewWillAppear :(BOOL)animated
{
    [super viewWillAppear:animated];

    [self.navigationController.view addSubview :lpToolbar];
    CGRect rFrame = self.navigationController.navigationBar.frame;
    lpToolbar.frame = CGRectMake( 0.0, rFrame.origin.y + rFrame.size.height, rFrame.size.width, 50.0 );
}

-(void) viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];

    [lpToolbar removeFromSuperview];
}

-(UIBarPosition) positionForBar:(id <UIBarPositioning>)bar
{
    return UIBarPositionTop;
}