导航栏titleView对齐

Question

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

navigationItem

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

Answer 1

问题是，导航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上运行

Answer 2

的方法：

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