导航栏标题视图对齐

Posted 2023-03-05

【中文标题】导航栏标题视图对齐

【英文标题】：Navigation bar titleView alignment

【发布时间】：2015-07-05 00:10:24

【问题描述】：

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

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

【问题讨论】：

您是否尝试为 CenterX 设置 NSLayoutConstraint？

我没有。但我试图将“textForViews”中心x变量设置为视图（控制器附带）中心x变量

顺便说一下如何以编程方式添加约束？

在 viewDidload 中尝试了一个： var constX = NSLayoutConstraint(item: viewForTitle, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant : 0) viewForTitle.addConstraint(constX) ........ 但是没用。程序崩溃。它说“视图层次结构没有为约束做好准备：

在添加为子视图后激活约束？

【参考方案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
    

【讨论】：

你拯救了我的一天！非常感谢。

【参考方案2】：

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

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

一般解决方案

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

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

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

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

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

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

编辑

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

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

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

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

它在故事板上的样子

如何在4S上运行

【讨论】：

我想到了类似于 1 中提到的解决方案。但我不知道我该怎么做...如何为不同的设备或屏幕设置不同的数量？对于数字 3，我不知道如何创建 xib 文件。我是 ios 新手，Apple 似乎反对通过参考一般文档来创建 nib 文件。你能给我一些关于 xibs 的链接或诸如“深入研究该文档，学习这些”之类的链接吗……无论如何，谢谢你的兴趣。

@Salihcyilmaz 检查我的编辑以获得更简单的方法。 1.你可以尝试使用UIScreen或者干脆尝试获取导航栏的宽度，看看数字是多少，根据不同的导航宽度分配不同的宽度。

@Salihcyilmaz 对于 3，我现在没有找到方便的东西。关于如何创建xib文件或如何重用xib文件有很多，我只是不知道现在是否真的有用:)如果您将来需要，只需搜索可重用的xib文件即可。跨度>

不错的一个。实际上你在编辑中所做的是我的故事板版本，我猜。无论如何，如果我将视图宽度设置为 160，那么在这两种情况下，一切似乎都还可以。否则他们开始远离中心。你能解释一下为什么会这样吗？

@Salihcyilmaz 如果您已经在情节提要中设置了具有适当约束的视图，则无需在 viewdidload 中编写任何代码。