Title bar navigation orientation

Question

I want my navigation bar to show two things in the middle. One will be a list, and the other will be the username. Usernames will be placed under the list name. What I have done so far, I created two tags and one supervisor programmatically and set the titleView from navigationItem .

 override func viewDidLoad() { super.viewDidLoad() var rectForView = CGRect(x: 0, y: 0, width: 190, height: 176) var viewForTitle = UIView(frame: rectForView) var rectForNameLabel = CGRect(x: 0, y: 63, width: 190, height: 30) var listNameLabel = UILabel(frame: rectForNameLabel) listNameLabel.text = "Name of the List...." listNameLabel.textAlignment = NSTextAlignment.Center listNameLabel.font = UIFont(name: "HelveticaNeue-Bold", size: 15) var rectForListLabel = CGRect(x: 0, y: 93, width: 190, height: 20) var usersOfListLabel = UILabel(frame: rectForListLabel) usersOfListLabel.text = "some Users...." usersOfListLabel.textAlignment = NSTextAlignment.Center usersOfListLabel.font = UIFont(name: "HelveticaNeue", size: 10) viewForTitle.addSubview(listNameLabel) viewForTitle.addSubview(usersOfListLabel) self.navigationItem.titleView = viewForTitle 

The fact is that I arbitrarily choose the width, which leads to problems with alignment on different devices. How to achieve average alignment in my case?

Answer 1

The fact is that navigation titleView is always trying to focus your opinion. The reason that the title you see outside the center on the smaller screen is because the width of your custom titleView has exceeded the maximum width of the titleView.

If you set the value to 160, you will see that it is centered for the second situation.

Common decision

If you want to change the title width on different devices, there are several approaches that can help you solve the problem.

• Set a different width depending on the width of the screen. For example, when the width of the screen is 320, set it to no more than 160. If the value is greater than 320, assign a value based on a different screen size. This is not an elegant solution, but rather simple, without taking your head apart or posing complex problems.

• Calculate the actual width of the titleView. The width of the titleView is determined by the width of the navigation bar minus the left and right barbetton. Sort of

TitleViewWidth = navigation width - leftbarbuttonitem.width +/- rightbarbuttonitem.width - someConstant

You need a little experiment to find a suitable constant that matches this formula.

3. Create an xib file for this titleView, adjust the limits more flexibly than a fixed width is required. Download the view from xib and then assign a titleView. It may cost more time to get it working.

Edit

I am thinking of another way that might be easier for you if you are new to this.

In the storyboard, find and drop the view onto this header area of ​​the controller navigation bar.

Show how much time you want to see.

Drop the two shortcuts to this view and set the start and end and vertical and vertical limits.

How does he look on the storyboard

How it works on 4S

Answer 2

An approach:

• titleView always centered
• This way your custom view width will match the width of the navigationBar (width -40)

Code

 private func setupNavigationItems() { let label = UILabel() label.translatesAutoresizingMaskIntoConstraints = false label.text = "aaaaa" label.backgroundColor = .green label.textAlignment = .left navigationItem.titleView = label if let navigationBar = navigationController?.navigationBar { label.widthAnchor.constraint(equalTo: navigationBar.widthAnchor, constant: -40).isActive = true } }