如何在标题下方移动提示位置或向后移动按钮位置

Question

I'd like to have a large title with small text underneath it without the back button moving down.

Desired outcome:

With prompt and title:

I set the time as the title, which is the opposite of what I want, in order to put the name at the top

With custom navigationItem.titleView :

In the second photo I'm adding height to the navigationBar . This is very close to what I'd like, but I want the back button to stay at the top. I can just change the constraints of my custom titleView if I can move the back button.

Current code:

func createTitleView() {
  let titleView = UIView()

  let titleLabel = UILabel()
  titleLabel.text = "Pete's Diner"
  titleLabel.textColor = UIColor.whiteColor()
  titleLabel.font = UIFont.boldSystemFontOfSize(16.0)
  titleLabel.setTranslatesAutoresizingMaskIntoConstraints(false)

  let descLabel = UILabel()
  descLabel.text = "Open 9AM - 9PM"
  descLabel.textColor = UIColor.whiteColor()
  descLabel.font = UIFont.systemFontOfSize(14.0)
  descLabel.setTranslatesAutoresizingMaskIntoConstraints(false)

  titleView.addSubview(titleLabel)
  titleView.addSubview(descLabel)

  titleView.addConstraint(NSLayoutConstraint(
    item: titleView, attribute: .CenterX, relatedBy: .Equal,
    toItem: titleLabel, attribute: .CenterX, multiplier: 1.0, constant: 0))
  titleView.addConstraint(NSLayoutConstraint(
    item: titleView, attribute: .CenterX, relatedBy: .Equal,
    toItem: descLabel, attribute: .CenterX, multiplier: 1.0, constant: 0))
  titleView.addConstraint(NSLayoutConstraint(
    item: titleView, attribute: NSLayoutAttribute.CenterYWithinMargins, relatedBy: NSLayoutRelation.Equal,
    toItem: titleLabel, attribute: NSLayoutAttribute.CenterYWithinMargins, multiplier: 1.0, constant: 12))
  titleView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
    "V:[titleLabel]-2-[descLabel]", options: nil, metrics: nil, views: ["titleLabel": titleLabel, "descLabel": descLabel]))

  navigationItem.titleView = titleView

  let nav = navigationController?.navigationBar
  nav!.barTintColor = UIColor.customGreenColor()
  nav!.tintColor    = UIColor.whiteColor()
  nav!.translucent  = false
  nav!.frame.size.height = 60.0
}

Sidebar:

The constraints aren't set until ~500ms after the view appears. I've tried setting the titleView in viewDidLayoutSubviews which doesn't help. If anyone can help me with this, I'd be grateful. I'm thinking it's a navigationBar/custom titleView issue.

Answer 1

I solved this by adding a custom view topmost in the view, then add a label to it, which will serve as the subtitle label.

By making this custom view dock to the bottom of the navigation bar, span the entire width of the screen and have its height depend on the label font size as well as top/bottom margins to the label, the view will be tightly placed below the navigation bar.

You should then configure the navbar and custom view to have the same background color, then remove the shadow image for the navigation bar.