如何处理backBarButtonItem的超长标题字符串显示问题?
解决导航栏返回按钮超长文本的显示问题
当你用这段代码设置返回按钮文本时,如果domain字符串过长,确实会出现显示不全的问题,我来分享几个实用的解决方案,都是实际项目里验证过的:
方案1:依赖系统自动截断(最简单)
其实UIBarButtonItem本身就内置了超长文本处理逻辑——它会自动截断超出导航栏宽度的部分,并在末尾加上省略号。你不需要额外修改代码,系统会帮你搞定:
let backButton = UIBarButtonItem(title: domain, style: .plain, target: nil, action: nil) self.navigationItem.backBarButtonItem = backButton
这种方式的好处是零成本实现,缺点是截断位置由系统自动判断,可能会切掉一些你想保留的关键信息。
方案2:手动截断文本,自定义显示内容
如果想更精准地控制显示的文本(比如保留域名的开头和结尾,或者只提取主域名),可以写一个字符串处理函数,手动截断并拼接省略号:
func trimmedDomain(for domain: String) -> String { // 根据你的导航栏实际宽度调整最大显示长度,这里示例设为15 let maxDisplayLength = 15 guard domain.count > maxDisplayLength else { return domain } // 保留前8个字符和后5个字符,中间用省略号连接 let prefix = String(domain.prefix(8)) let suffix = String(domain.suffix(5)) return "\(prefix)...\(suffix)" } // 使用时先处理文本,再创建按钮 let trimmedTitle = trimmedDomain(for: domain) let backButton = UIBarButtonItem(title: trimmedTitle, style: .plain, target: nil, action: nil) self.navigationItem.backBarButtonItem = backButton
你还可以优化这个函数,比如从完整URL中提取主域名(比如把https://www.example.com/path处理成example.com),这样显示的内容会更有意义。
方案3:自定义返回按钮视图(最灵活)
如果需要更复杂的显示效果(比如允许文本换行、调整字体大小、自定义箭头样式),可以直接自定义UIView作为返回按钮的customView:
func customBackButton(with title: String) -> UIBarButtonItem { // 创建显示文本的label let titleLabel = UILabel() titleLabel.text = title titleLabel.font = UIFont.systemFont(ofSize: 14) titleLabel.numberOfLines = 2 // 允许文本换行 titleLabel.textAlignment = .left titleLabel.lineBreakMode = .byTruncatingTail // 限制label的最大宽度,避免占满整个导航栏 titleLabel.widthAnchor.constraint(lessThanOrEqualToConstant: 120).isActive = true // 创建按钮作为容器,绑定返回动作 let backButton = UIButton(type: .system) backButton.addSubview(titleLabel) titleLabel.translatesAutoresizingMaskIntoConstraints = false // 设置label的约束 NSLayoutConstraint.activate([ titleLabel.leadingAnchor.constraint(equalTo: backButton.leadingAnchor, constant: 8), titleLabel.trailingAnchor.constraint(equalTo: backButton.trailingAnchor), titleLabel.topAnchor.constraint(equalTo: backButton.topAnchor), titleLabel.bottomAnchor.constraint(equalTo: backButton.bottomAnchor) ]) // 绑定返回事件 backButton.addTarget(self, action: #selector(popBack), for: .touchUpInside) // 如果需要自定义箭头,可以在这里添加UIImageView let arrowImageView = UIImageView(image: UIImage(systemName: "chevron.left")) backButton.addSubview(arrowImageView) arrowImageView.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ arrowImageView.leadingAnchor.constraint(equalTo: backButton.leadingAnchor), arrowImageView.centerYAnchor.constraint(equalTo: backButton.centerYAnchor), arrowImageView.trailingAnchor.constraint(equalTo: titleLabel.leadingAnchor, constant: -4) ]) return UIBarButtonItem(customView: backButton) } // 返回上一页的方法 @objc func popBack() { navigationController?.popViewController(animated: true) } // 使用时替换左侧按钮 self.navigationItem.leftBarButtonItem = customBackButton(with: domain)
这种方式的好处是完全自定义显示效果,缺点是需要自己处理返回事件和箭头图标(如果需要的话),而且不能直接用backBarButtonItem,得替换成leftBarButtonItem。
总结一下:如果追求简单快捷,用方案1;想精准控制文本内容,用方案2;需要复杂样式适配,用方案3。
内容的提问来源于stack exchange,提问作者lypw2009
相关产品推荐
相关产品推荐

