Swift中NavBar内Logo无法左对齐，居中显示问题求助

问题描述 #

在Swift项目中配置导航栏左侧Logo时，发现Logo无法左对齐，反而向中间偏移。配置代码如下：

private func configureNavbar() {
    var image = UIImage(named: "netflixLogo")
    image = image?.withRenderingMode(.alwaysOriginal)
    navigationItem.leftBarButtonItem = UIBarButtonItem(image: image, style: .done, target: self, action: nil)
    
    navigationItem.rightBarButtonItems = [
        UIBarButtonItem(image: UIImage(systemName: "person"), style: .done, target: self, action: nil),
        UIBarButtonItem(image: UIImage(systemName: "play.rectangle"), style: .done, target: self, action: nil)
    ]
    navigationController?.navigationBar.tintColor = .white
}

效果截图：

问题原因 #

UINavigationBar的leftBarButtonItem默认带有内置左侧边距（通常为16pt），这会导致Logo无法紧贴屏幕左边缘，视觉上呈现向中间偏移的效果。

解决方案 #

方案1：调整BarButtonItem的图片内边距 #

直接修改UIBarButtonItem的imageInsets，用负值抵消默认边距：

private func configureNavbar() {
    var image = UIImage(named: "netflixLogo")
    image = image?.withRenderingMode(.alwaysOriginal)
    
    // 调整图片内边距，左侧设为-16抵消默认边距
    let logoButton = UIBarButtonItem(image: image, style: .done, target: self, action: nil)
    logoButton.imageInsets = UIEdgeInsets(top: 0, left: -16, bottom: 0, right: 0)
    navigationItem.leftBarButtonItem = logoButton
    
    navigationItem.rightBarButtonItems = [
        UIBarButtonItem(image: UIImage(systemName: "person"), style: .done, target: self, action: nil),
        UIBarButtonItem(image: UIImage(systemName: "play.rectangle"), style: .done, target: self, action: nil)
    ]
    navigationController?.navigationBar.tintColor = .white
}

方案2：使用自定义视图作为BarButtonItem #

如果需要更精确控制Logo的大小、位置，可自定义UIView作为UIBarButtonItem的自定义视图：

private func configureNavbar() {
    var image = UIImage(named: "netflixLogo")
    image = image?.withRenderingMode(.alwaysOriginal)
    
    // 创建自定义视图容器
    let logoImageView = UIImageView(image: image)
    logoImageView.contentMode = .scaleAspectFit
    // 容器宽度根据Logo实际尺寸调整，高度设为导航栏常规高度（44pt）
    let logoContainer = UIView(frame: CGRect(x: 0, y: 0, width: 120, height: 44))
    logoImageView.frame = logoContainer.bounds
    logoContainer.addSubview(logoImageView)
    
    navigationItem.leftBarButtonItem = UIBarButtonItem(customView: logoContainer)
    
    navigationItem.rightBarButtonItems = [
        UIBarButtonItem(image: UIImage(systemName: "person"), style: .done, target: self, action: nil),
        UIBarButtonItem(image: UIImage(systemName: "play.rectangle"), style: .done, target: self, action: nil)
    ]
    navigationController?.navigationBar.tintColor = .white
}

方案3：修改导航栏的布局边距（iOS 13+） #

针对iOS 13及以上版本，可通过UINavigationBarAppearance全局调整导航栏布局边距：

private func configureNavbar() {
    var image = UIImage(named: "netflixLogo")
    image = image?.withRenderingMode(.alwaysOriginal)
    navigationItem.leftBarButtonItem = UIBarButtonItem(image: image, style: .done, target: self, action: nil)
    
    navigationItem.rightBarButtonItems = [
        UIBarButtonItem(image: UIImage(systemName: "person"), style: .done, target: self, action: nil),
        UIBarButtonItem(image: UIImage(systemName: "play.rectangle"), style: .done, target: self, action: nil)
    ]
    navigationController?.navigationBar.tintColor = .white
    
    // iOS 13+ 调整导航栏布局边距
    if #available(iOS 13.0, *) {
        let appearance = UINavigationBarAppearance()
        appearance.layoutMargins.left = 0
        navigationController?.navigationBar.standardAppearance = appearance
        navigationController?.navigationBar.scrollEdgeAppearance = appearance
    }
}

注意事项 #

• 方案1的内边距数值可根据Logo尺寸和需求微调；
• 方案3会影响整个导航栏的布局边距，需注意其他BarButtonItem的位置变化；
• 若导航栏存在返回按钮，需额外处理其边距，避免布局冲突。

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