You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何将Navigation Bar顶部标题左对齐至汉堡按钮旁?

如何让Navigation Bar的顶部标题左对齐(靠近汉堡按钮)

嗨,我来帮你解决这个问题!系统默认的导航栏标题是居中显示的,所以直接用navigationController?.navigationBar.topItem?.title = "XXX"只会让标题停在中间。要让它贴近汉堡按钮实现左对齐,这里有两种实用的方法,你可以根据需求选:

方法一:自定义TitleView(最灵活的方案)

这种方式能完全掌控标题的样式和位置,适配所有iOS版本:

// 创建自定义标题标签
let titleLabel = UILabel()
titleLabel.text = "XXX"
titleLabel.font = UIFont.systemFont(ofSize: 17, weight: .semibold) // 匹配系统导航栏默认字体样式
titleLabel.textColor = .label // 可根据你的设计调整颜色
titleLabel.textAlignment = .left

// 让标签自适应文本大小,也可以手动设置frame
titleLabel.sizeToFit()

// 将自定义标签设为导航栏的titleView
navigationItem.titleView = titleLabel

// 如果需要更精准的位置控制(比如和汉堡按钮保持系统默认间距),可以添加自动布局约束
if let titleView = navigationItem.titleView, let navigationBar = navigationController?.navigationBar {
    titleView.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        titleView.leadingAnchor.constraint(equalTo: navigationBar.leadingAnchor, constant: 16), // 16pt是系统默认侧边间距,和汉堡按钮对齐
        titleView.centerYAnchor.constraint(equalTo: navigationBar.centerYAnchor)
    ])
}

方法二:将标题加入左侧按钮组

如果你想让标题和汉堡按钮直接排列在一起,可以把标题包装成不可点击的BarButtonItem,和汉堡按钮一起放到左侧按钮组里:

// 假设你已经创建好了汉堡按钮hamburgerButton
let titleBarItem = UIBarButtonItem(title: "XXX", style: .plain, target: nil, action: nil)
titleBarItem.isEnabled = false // 禁用点击,让它仅作为文本显示

// 匹配系统导航栏的字体样式
titleBarItem.setTitleTextAttributes([
    NSAttributedString.Key.font: UIFont.systemFont(ofSize: 17, weight: .semibold),
    NSAttributedString.Key.foregroundColor: UIColor.label
], for: .normal)

// 将汉堡按钮和标题按钮一起设置为左侧按钮组
navigationItem.leftBarButtonItems = [hamburgerButton, titleBarItem]

小提示

  • 如果你用Storyboard/XIB开发,也可以直接拖一个UILabel到Navigation Item的TitleView位置,设置左对齐并添加约束,效果和代码实现完全一致。
  • 对于iOS 11及以上版本,导航栏布局有调整,用自动布局约束能更好适配不同屏幕尺寸。

内容的提问来源于stack exchange,提问作者burak kaya

火山引擎 最新活动