How do I programmatically add a view right under the navigation bar?

user_4455220 0
Viewed 21321

I'm trying to add a view to a UINavigationController with its top aligned with the navigation bar's bottom.

I tried using constraints by adding the following to my UINavigationController subclass: 

override func viewDidAppear(_ animated: Bool) {
           self.label = UILabel()
    self.label?.translatesAutoresizingMaskIntoConstraints = false
    self.label?.backgroundColor = UIColor.red
    self.label?.text = "label text"
    self.view.addSubview(self.label!)
    let horConstraint = NSLayoutConstraint(item: label!, attribute: .top, relatedBy: .equal,
                                           toItem: topLayoutGuide, attribute: .bottom,
                                           multiplier: 1.0, constant: 0.0)
    let widthConstr = NSLayoutConstraint(item: label!, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 100)

    let heightConstr = NSLayoutConstraint(item: label!, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 100)
    view.addConstraints([horConstraint, widthConstr, heightConstr])
}

With this being the result:

enter image description here

And I tried by setting the frame of my subview:

override func viewDidAppear(_ animated: Bool) {

    self.label = UILabel(frame: CGRect(x: 0, y: navigationBar.frame.height, width: 300, height: 100))
    self.label?.translatesAutoresizingMaskIntoConstraints = false
    self.label?.backgroundColor = UIColor.red
    self.label?.text = "label text"
    self.view.addSubview(self.label!)

}

And this came out:

enter image description here

In both cases my label covers part of the navigation bar. How to I fix this?

swift uiview ios
7 Answers

Swift

enter image description here

Try this code with NSLayoutConstraint. newView will appear right under NavigationBar

        self.edgesForExtendedLayout = []//Optional our as per your view ladder

        let newView = UIView()
        newView.backgroundColor = .red
        self.view.addSubview(newView)
        newView.translatesAutoresizingMaskIntoConstraints = false
        if #available(iOS 11.0, *) {
            let guide = self.view.safeAreaLayoutGuide
            newView.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
            newView.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
            newView.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true
            newView.heightAnchor.constraint(equalToConstant: 50).isActive = true
        } else {
            NSLayoutConstraint(item: newView,
                               attribute: .top,
                               relatedBy: .equal,
                               toItem: view, attribute: .top,
                               multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: newView,
                               attribute: .leading,
                               relatedBy: .equal, toItem: view,
                               attribute: .leading,
                               multiplier: 1.0,
                               constant: 0).isActive = true
            NSLayoutConstraint(item: newView, attribute: .trailing,
                               relatedBy: .equal,
                               toItem: view,
                               attribute: .trailing,
                               multiplier: 1.0,
                               constant: 0).isActive = true

                newView.heightAnchor.constraint(equalToConstant: 50).isActive = true
        }
user_75761000

If anyone is still having the same issue, or wants to have the same thing but with large title in the navigationBar you can add the code below to your subview constraints:

iOS 11.0 or above :

yourSubView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true

iOS 11.0 or below :

yourSubView..topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor).isActive = true
user_112495430
Related