导航栏titleView对齐

Question

我希望我的导航栏在中间显示两个东西.其中一个是List名称,另一个是用户名.用户名将放在列表名称下.我做了什么至今,我创建了两个标签,一个上海华编程和设置titleView的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

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

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

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

3. 为这个titleView创建一个xib文件，设置约束比声明固定宽度更灵活。从 xib 加载视图，然后分配给 titleView。这可能会花费更长的时间来调整它以使其工作。

编辑

如果您对此不熟悉，我想另一种方法可能对您来说更容易。

在故事板中，找到一个视图并将其拖放到此视图控制器的导航栏标题视图区域。

无论您想要视图多长，都可以扩展。

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

它在故事板上的样子

4S如何运行