CODEWITHSUNDEEP
swiftios8uinavigationbarmaterial-design
David
David

Reputation: 73

How to change the uinavigationbar title's position?

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

enter image description here

Upvotes: 7

Views: 22949

Answers (6)

user16401900
user16401900

Reputation: 439

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

Upvotes: 3

Yonathan Goriachnick
Yonathan Goriachnick

Reputation: 201

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.]

Upvotes: 0

Alex
Alex

Reputation: 2150

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:

enter image description here

Upvotes: 0

Eric
Eric

Reputation: 16921

Another solution is to simply indent the title:

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.firstLineHeadIndent = 72

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

Upvotes: 2

Mehul Patel
Mehul Patel

Reputation: 23053

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...
}

Upvotes: 23

arbel03
arbel03

Reputation: 1247

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

Upvotes: 30

Related Questions