How to change the uinavigationbar title's position?

Question

I've managed to change the navigationbar height by using my own navigationbar, but the title is still centered. I want it to be at the 72px position from the left.

override func sizeThatFits(size: CGSize) -> CGSize {
   return CGSizeMake(UIScreen.mainScreen().bounds.width, 56)
}

I used this to change the height but I didn't find a way to change the position of all the items. I tried to set the frame but I can't. I can't change the position of the button too.

i wanna look like this

Add empty navigation bar button item as a right bar button item and set it's width as per your requirement. It moves your title left side. — Pradhyuman Chavda, Dec 18 '14 at 05:11

score 30 · Answer 1 · answered Oct 24 '15 at 08:18

30

navBar.setTitleVerticalPositionAdjustment(CGFloat(7), forBarMetrics: UIBarMetrics.Default)

answered Oct 24 '15 at 08:18

arbel03

1,217
2
14
24

7

This answer only addresses the vertical position of the item. How does this answer the question which is asking about adjusting the horizontal position? – Tony Adams Aug 24 '16 at 15:49
4

@TonyAdams I guess I didn't know the answer for the question back then so I just threw something in the air that could help others... – arbel03 Aug 25 '16 at 13:20
2

COOL! THAT IS WHAT I NEED!! – Janserik Apr 09 '17 at 10:32
This only used when you want to change the position of title in vertically. to change the horizontally there is no predefined option. so you can follow the first answer to this question is a better solution. – Pawan kumar sharma Jan 04 '19 at 11:19
This "works" in iOS 16.0 + Xcode 14.0. But it throws an error for broken constraints. "_UINavigationBarTitleControl should equal titleViewGuide.top". Any ideas on how to handle this? – theogood Oct 04 '22 at 13:25

Kampai · Accepted Answer · 2017-07-31T09:33:36.517

Create a UIView object add UIButton and UILabel in it to show a similar view. Add this custom view into left bar button item of navigation controller.

An example screen shot to visualise a custom view and related code:

enter image description here

override func viewDidLoad() {
    super.viewDidLoad()

    var customView = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 100.0, height: 44.0))
    customView.backgroundColor = UIColor.yellow

    var button = UIButton.init(type: .custom)
    button.setBackgroundImage(UIImage(named: "hamburger"), for: .normal)
    button.frame = CGRect(x: 0.0, y: 5.0, width: 32.0, height: 32.0)
    button.addTarget(self, action: #selector(menuOpen(button:)), for: .touchUpInside)
    customView.addSubview(button)

    var marginX = CGFloat(button.frame.origin.x + button.frame.size.width + 5)
    var label = UILabel(frame: CGRect(x: marginX, y: 0.0, width: 65.0, height: 44.0))
    label.text = "Inbox"
    label.textColor = UIColor.white
    label.textAlignment = NSTextAlignment.right
    label.backgroundColor = UIColor.red
    customView.addSubview(label)

    var leftButton = UIBarButtonItem(customView: customView)
    self.navigationItem.leftBarButtonItem = leftButton
}

func menuOpen(button: UIButton) {
    // Handle menu button event here...
}

thanks! its a good solution but i just found out that google isn't using the navigationController it's simply a normal view.And i will try ur method later~ — David, Dec 18 '14 at 13:44

score 3 · Answer 3 · answered Dec 27 '21 at 11:32

3

You can also set nav bar appearance titlePositionAdjustment like so:

let a = UINavigationBarAppearance()
a.titlePositionAdjustment = .init(
   horizontal: -CGFloat.greatestFiniteMagnitude, 
   vertical: 0
)
navigationItem.scrollEdgeAppearance = a
navigationItem.compactAppearance = a
navigationItem.standardAppearance = a

answered Dec 27 '21 at 11:32

user16401900

381
3
5

This is the best answer and doesn't cause any issues like setting anchors on the title did. – brokenrhino Sep 19 '22 at 17:11

score 2 · Answer 4 · answered Mar 19 '19 at 12:01

2

Another solution is to simply indent the title:

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.firstLineHeadIndent = 72

navigationBar.titleTextAttributes = [
    .foregroundColor: UIColor.purple,
    .paragraphStyle: paragraphStyle
]

answered Mar 19 '19 at 12:01

Eric

16,003
15
87
139

score 0 · Answer 5 · answered Feb 20 '20 at 13:14

Setting custom view with left align.

Setting custom view as leftBarButtonItem is not conveniently, because we will have a problems with back button.

Setting custom view as subview of navigationBar is not conveniently because:

we can't to easy control width of custom view when right buttons are set. We can get overlapping custom view and right buttons
we need to add custom navTitleView and remove it every viewWillAppear and viewWillDissapear. This is additional, not clean code.

So? I've just added width constraint to the customTitleView.

Inside of CustomTitleView class:

  private func layoutViewsConfig() {
    // Width constraint needed to align view to left
    let widthConstraint = NSLayoutConstraint.init(item: self, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: UIScreen.main.bounds.width)
    widthConstraint.priority = .init(748)
    let heightConstraint = NSLayoutConstraint.init(item: self, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 50)
   self.addConstraint(widthConstraint)
   self.addConstraint(heightConstraint)    
  }

Then, inside of your ViewController:

var navigationTitleView = NavigationSubtitleView() 
self.navigationItem.titleView = navigationTitleView

And we have:

score 0 · Answer 6 · answered Jan 14 '21 at 18:07

You can set a custom view as the left/right bar item of the navigationItem.

See this example:

navigationItem.rightBarButtonItem = UIBarButtonItem(customView: viewModal.getNavBarTitleView())

[The viewModal.getNavBarTitleView() returns an horizontal stack view with an imageView and a label.]

How to change the uinavigationbar title's position?

6 Answers6

Linked