iOS 10.3.3导航栏仅显示右侧按钮问题求助（iPhone 5适配异常）

这个问题我之前排查过，核心是iOS11和iOS10的UINavigationBar布局机制完全不同：

• iOS11开始，导航栏采用Auto Layout来管理bar button items的布局，会自动根据自定义视图的约束或intrinsicContentSize计算尺寸，适配空间；
• 但iOS10及之前的系统是基于frame的布局系统，如果你用了带customView的UIBarButtonItem，却没有明确指定按钮的尺寸，导航栏无法正确预留空间，多个按钮挤在一起时，前面的按钮会被挤出可视区域，最终只显示最右侧的那个。

结合你的代码片段，问题出在自定义按钮navButtonTimeframe没有设置明确的尺寸约束或宽度值，导致iOS10无法识别它的占用空间。

具体解决办法 #

方法1：给自定义按钮添加Auto Layout约束（推荐，兼容全版本） #

在创建自定义按钮后，为它添加明确的宽高约束，让两个系统版本都能正确识别尺寸：

private func setupNavMenuButtons() {
    navButtonTimeframe.addTarget(self, action: #selector(timeframeMenuHandler), for: .touchUpInside)
    navButtonTimeframe.setTitle(TIMEFRAMES[InAppProperties.sharedInstance.portfolioTimeframeMode], for: .normal)
    
    // 禁用自动约束转换，添加自定义宽高约束
    navButtonTimeframe.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        navButtonTimeframe.widthAnchor.constraint(equalToConstant: 80), // 根据你的按钮内容调整宽度
        navButtonTimeframe.heightAnchor.constraint(equalToConstant: 30) // 导航栏高度44，设30保证垂直居中
    ])
    
    let timeframeBtn = UIBarButtonItem(customView: navButtonTimeframe)
    
    // 同理处理另外两个自定义按钮，都加上约束
    // let secondBtn = UIBarButtonItem(customView: yourSecondButton)
    // let thirdBtn = UIBarButtonItem(customView: yourThirdButton)
    
    // 按需求分配按钮到导航栏左右侧，比如左侧一个，右侧两个
    navigationItem.leftBarButtonItems = [secondBtn]
    navigationItem.rightBarButtonItems = [timeframeBtn, thirdBtn]
}

方法2：直接设置UIBarButtonItem的width属性（兼容iOS10） #

如果你不想用Auto Layout，也可以直接给每个UIBarButtonItem设置width值，iOS10会依据这个值预留空间，iOS11会自动忽略但不影响布局：

let timeframeBtn = UIBarButtonItem(customView: navButtonTimeframe)
timeframeBtn.width = 80 // 根据按钮内容调整宽度

// 另外两个按钮同样设置width属性
let secondBtn = UIBarButtonItem(customView: yourSecondButton)
secondBtn.width = 70

额外提示 #

• 如果按钮标题过长，可以给按钮加上navButtonTimeframe.adjustsFontSizeToFitWidth = true，让字体自动缩小适配宽度；
• 测试时可以给每个自定义按钮设置不同的背景色，方便快速观察iOS10上按钮是否被挤出屏幕。

内容的提问来源于stack exchange，提问作者Vadim