导航栏标题视图对齐方式

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 总是试图使您的视图居中。您在较小的屏幕上看到标题 off-center 的原因是，您的自定义 titleView 的宽度超出了 titleView 的最大宽度。

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

一般解

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

根据不同的屏幕宽度设置不同的宽度。例如屏幕宽度为320时，设置为不超过160。如果大于320，则根据不同的屏幕尺寸进行赋值。这不是一个优雅的解决方案，但非常简单，无需费力设置和尝试复杂的约束。
计算titleView的实际宽度。 titleView的宽度由导航栏宽度减去左右barbuttonitem决定。像

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

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

为这个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
    }
}

导航栏标题视图对齐方式

Navigation bar titleView alignment

iphone

alignment

uinavigationitem

ios

swift

方法：

代码