如何以编程方式在导航栏下添加视图?

时间:2017-07-07 09:05:24

标签: ios swift uiview

我尝试将视图添加到UINavigationController,其顶部与导航栏的底部对齐。

我尝试通过在UINavigationController子类中添加以下内容来使用约束:

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])
}

这就是结果:

enter image description here

我尝试设置子视图的框架:

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!)

}

这就出来了:

enter image description here

在这两种情况下,我的标签都覆盖导航栏的一部分。我该如何解决这个问题?

6 个答案:

答案 0 :(得分:12)

Swift 4。

enter image description here

使用NSLayoutConstraint试用此代码。 newView将显示在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
        }

答案 1 :(得分:2)

状态栏的高度为20.在分配标签的y时,您还应该考虑状态栏。您的viewDidAppear应为

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!)
 }

希望它有所帮助。快乐编码!!

答案 2 :(得分:2)

导航框架是(0 20; 375 44),您可以将标签y位置设置为64。

答案 3 :(得分:1)

您没有使用导航栏计算状态栏的高度。它们总共64,44个导航条和20个状态栏

答案 4 :(得分:1)

替换此

self.label = UILabel(frame: CGRect(x: 0, y: navigationBar.frame.height, width: 300, height: 100))

self.label = UILabel(frame: CGRect(x: 0, y: 64, width: 300, height: 100))

naviagtion bar&状态栏一起高度为64.使其成为y位置

答案 5 :(得分:0)

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)

}

enter image description here