问题
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:
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:
In both cases my label covers part of the navigation bar. How to I fix this?
回答1:
Height of status bar is 20.You should consider status bar also while assigning y
of your label. Your viewDidAppear
should be
override func viewDidAppear(_ animated: Bool) {
self.label = UILabel(frame: CGRect(x: 0, y: navigationBar.frame.height+20, width: navigationBar.frame.width, height: 100))
self.label?.translatesAutoresizingMaskIntoConstraints = false
self.label?.backgroundColor = UIColor.red
self.label?.text = "label text"
self.view.addSubview(self.label!)
}
Hope it helps. Happy Coding!!
回答2:
Swift 4.
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
}
回答3:
You're not calculating the height of the status bar with the navigation bar. In total they are 64, 44 nav bar and 20 for the status bar
回答4:
Frame of navigationBar is (0 20; 375 44), you can set label y position to 64.
回答5:
Replace this
self.label = UILabel(frame: CGRect(x: 0, y: navigationBar.frame.height, width: 300, height: 100))
with
self.label = UILabel(frame: CGRect(x: 0, y: 64, width: 300, height: 100))
naviagtion bar & status bar together has a height of 64. Make it the y position
回答6:
override func viewDidAppear(_ animated: Bool) {
let label = UILabel(frame: CGRect(x: 0, y: (navigationController?.navigationBar.frame.height)! + 20, width: UIScreen.main.bounds.width, height: 40))
label.translatesAutoresizingMaskIntoConstraints = true
label.text = "Hello"
label.backgroundColor = UIColor.red
self.view.addSubview(label)
}
来源:https://stackoverflow.com/questions/44966786/how-do-i-programmatically-add-a-view-right-under-the-navigation-bar