SwiftUI/UIKit：如何让导航栏按钮与文字更醒目

以下是几个兼顾现代视觉效果和按钮可读性的方案，均能保留原生返回滑动手势：

1. 给导航栏文本/按钮添加阴影 #

通过UIBarButtonItemAppearance不仅能修改文字颜色，还能给文字添加阴影；返回按钮的图标也可以通过渲染增强阴影效果，提升辨识度。

代码示例： #

let appearance = UINavigationBarAppearance()
appearance.configureWithTransparentBackground() // 保持导航栏透明，适配背景图

// 配置返回按钮文字样式（若显示文字）
let buttonAppearance = UIBarButtonItemAppearance()
let shadow = NSShadow()
shadow.shadowColor = UIColor.black
shadow.shadowOffset = CGSize(width: 0, height: 1)
shadow.shadowBlurRadius = 2
buttonAppearance.normal.titleTextAttributes = [
    .foregroundColor: UIColor.white,
    .shadow: shadow,
    .font: UIFont.systemFont(ofSize: 16)
]

// 配置返回按钮图标阴影
if let backImage = UIImage(systemName: "chevron.left")?.withTintColor(.white, renderingMode: .alwaysOriginal) {
    let shadowedBackImage = backImage.withShadow(color: .black, offset: CGSize(width: 0, height: 1), blur: 2)
    appearance.setBackIndicatorImage(shadowedBackImage, transitionMaskImage: shadowedBackImage)
}

appearance.backButtonAppearance = buttonAppearance
navigationController?.navigationBar.standardAppearance = appearance
navigationController?.navigationBar.scrollEdgeAppearance = appearance

需给UIImage添加扩展实现阴影方法：

extension UIImage {
    func withShadow(color: UIColor, offset: CGSize, blur: CGFloat) -> UIImage {
        let renderer = UIGraphicsImageRenderer(size: size)
        return renderer.image { context in
            draw(at: .zero)
            context.cgContext.setShadow(offset: offset, blur: blur, color: color.cgColor)
            draw(at: .zero)
        }
    }
}

2. 给导航栏添加半透明渐变遮罩 #

在导航栏底部添加从全透明到半透明的渐变层，既不遮挡顶部背景图的视觉效果，又能让按钮与背景形成区分。

代码示例： #

// 在视图控制器viewDidLoad中添加
let gradientLayer = CAGradientLayer()
gradientLayer.frame = navigationController?.navigationBar.bounds ?? .zero
gradientLayer.colors = [
    UIColor.black.withAlphaComponent(0.0).cgColor,
    UIColor.black.withAlphaComponent(0.3).cgColor
]
gradientLayer.startPoint = CGPoint(x: 0.5, y: 0)
gradientLayer.endPoint = CGPoint(x: 0.5, y: 1)

let gradientView = UIView(frame: navigationController?.navigationBar.bounds ?? .zero)
gradientView.layer.addSublayer(gradientLayer)
gradientView.isUserInteractionEnabled = false // 不干扰按钮点击
navigationController?.navigationBar.insertSubview(gradientView, at: 0)

// 适配导航栏高度变化
navigationController?.navigationBar.observe(\.bounds) { [weak self] bar, _ in
    gradientView.frame = bar.bounds
    gradientLayer.frame = bar.bounds
}

3. 动态切换按钮样式（根据背景图亮度） #

分析背景图顶部导航栏区域的平均亮度，自动切换按钮的颜色/阴影强度，确保在亮/暗背景下都清晰可见。

核心代码示例： #

func updateNavigationStyle(for image: UIImage) {
    let navHeight = navigationController?.navigationBar.frame.height ?? 44
    let cropRect = CGRect(x: 0, y: 0, width: image.size.width, height: navHeight)
    guard let croppedImage = image.cgImage?.cropping(to: cropRect),
          let averageColor = UIColor(cgImage: croppedImage) else { return }
    
    let brightness = averageColor.brightnessComponent
    let isDarkBackground = brightness < 0.5
    
    let appearance = UINavigationBarAppearance()
    appearance.configureWithTransparentBackground()
    
    let buttonAppearance = UIBarButtonItemAppearance()
    let shadowColor = isDarkBackground ? UIColor.white.withAlphaComponent(0.8) : UIColor.black.withAlphaComponent(0.8)
    let textColor = isDarkBackground ? UIColor.white : UIColor.black
    
    let shadow = NSShadow()
    shadow.shadowColor = shadowColor
    shadow.shadowOffset = CGSize(width: 0, height: 1)
    shadow.shadowBlurRadius = 2
    
    buttonAppearance.normal.titleTextAttributes = [
        .foregroundColor: textColor,
        .shadow: shadow
    ]
    
    let backImageColor = isDarkBackground ? UIColor.white : UIColor.black
    if let backImage = UIImage(systemName: "chevron.left")?.withTintColor(backImageColor, renderingMode: .alwaysOriginal) {
        let shadowedBackImage = backImage.withShadow(color: shadowColor, offset: CGSize(width: 0, height: 1), blur: 2)
        appearance.setBackIndicatorImage(shadowedBackImage, transitionMaskImage: shadowedBackImage)
    }
    
    appearance.backButtonAppearance = buttonAppearance
    navigationController?.navigationBar.standardAppearance = appearance
    navigationController?.navigationBar.scrollEdgeAppearance = appearance
}

// UIColor扩展获取亮度值
extension UIColor {
    var brightnessComponent: CGFloat {
        var red: CGFloat = 0, green: CGFloat = 0, blue: CGFloat = 0, alpha: CGFloat = 0
        getRed(&red, green: &green, blue: &blue, alpha: &alpha)
        return (red * 0.299 + green * 0.587 + blue * 0.114)
    }
}

以上方案均无需隐藏原生返回按钮，完全保留滑动返回手势，同时解决不同背景图下的按钮可读性问题。

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