导航栏标题视图对齐 [英] Navigation bar titleView alignment

问题描述

我希望导航栏在中间显示两件事。其中一个将是列表名称，另一个将是用户名称。用户名将放置在列表名称下。到目前为止，我所做的是，以编程方式创建了两个标签和一个超级视图，并设置了 navigationItem 的 titleView 。 / p>

I want my navigation bar to show two things in the middle. One them is going to be List name, and the other one will be name of users. User names will be placed under list name. What i have done so far is, i created two label and one superview programatically and set the titleView of 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 thing is, I'm picking width randomly, which leads to alignment problems in different devices. How to achieve middle alignment in my case?

推荐答案

问题是，导航titleView始终尝试将视图居中。您在较小屏幕上偏心看到标题的原因是，自定义titleView的宽度已超出titleView的最大宽度。

The thing is, navigation titleView always try to center your view. The reason that the title you see off-center in a smaller screen is that, the width of your custom titleView has gone beyond the maxmium width of titleView.

如果将值设置为160，则将在第二种情况下居中显示。

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

一般解决方案

如果您想使标题宽度适应不同的设备，则有几种方法可以帮助您解决问题。

If you want to adapt title width to different devices, there are a few approaches that may help you solve the problem.

1. 根据不同的屏幕宽度设置不同的宽度。例如，当屏幕宽度为320时，将其设置为不大于160。如果大于320，则根据不同的屏幕尺寸分配值。这不是一个优雅的解决方案，但是非常简单，无需费心设置和尝试复杂的约束。

1. Set different width based on different screen width. For example, when screen width is 320, set it no more than 160. If larger than 320, assign value based on different screen size. This is not an elegant solution, but pretty much straightforward without banging your head into setting and trying complicated constraints.

计算titleView的实际宽度。 titleView的宽度由导航栏宽度减去左右barbuttonitem决定。

Calculate the actual width of titleView. The width of titleView is determined by navigation bar width minus left and right barbuttonitem. Something like

TitleViewWidth =导航宽度-leftbarbuttonitem.width +/- rightbarbuttonitem.width -someConstant

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

您需要进行一些实验才能找到适合此公式的合适常数。

You need a little bit experiment for finding the appropriate constant that fits this formula.

1. 为此titleView创建一个xib文件，比声明固定宽度更灵活地设置约束。从xib加载视图，然后分配给titleView。

编辑

如果您是这个新手，我认为还有另一种方法可能会更方便。

I think of another way that may be easier for you if you are new to this.

在情节提要中，找到并放置视图以该视图控制器的导航栏titleView区域。

In the storyboard, find and drop a view to this view controller's navigation bar titleView area.

扩展您想要的视图长度。

Expand however long you want the view to be.

将两个标签拖放到该视图上，并设置前导，尾随以及高度和垂直约束。

Drop two labels to that view, and set the leading and trailing and height and vertical constraints.

故事板上的外观

运行方式在4S上

这篇关于导航栏标题视图对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！