导航栏标题视图对齐

Question

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

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

问题是，我随机选择宽度，这会导致不同设备出现对齐问题。在我的情况下如何实现中间对齐？

Answer 1

方法：

• titleView 始终居中
• 因此，请将自定义视图的宽度设置为与 navigationBar 的宽度匹配（宽度 -40）

代码

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

Answer 2

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

如果您将该值设置为 160，您将看到它在第二种情况下居中。

一般解决方案

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

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

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

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

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

1. 为此titleView创建一个xib文件，设置约束比要求固定宽度更灵活。从 xib 加载视图，然后分配给 titleView。这可能需要更长的时间来调整它以使其正常工作。

编辑

如果您是新手，我想另一种可能对您来说更容易的方法。

在情节提要中，找到一个视图并将其拖放到此视图控制器的导航栏 titleView 区域。

无论您希望视图有多长，都可以展开。

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

它在故事板上的样子

如何在4S上运行