iOS APP中如何在UINavigationBar上方添加全屏宽度图片横幅？

方案一：给导航控制器的view添加顶部横幅 #

直接在导航控制器的view最上层添加全屏宽度的图片视图，再调整导航栏位置适配布局，同时处理页面滚动视图的内容偏移避免遮挡。

代码示例（Swift）：

// 在自定义导航控制器的viewDidLoad中实现
override func viewDidLoad() {
    super.viewDidLoad()
    
    // 创建横幅图片视图
    let bannerImageView = UIImageView(image: UIImage(named: "your_banner_image"))
    bannerImageView.contentMode = .scaleToFill
    bannerImageView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerImageView)
    
    // 设置约束：填满屏幕宽度，固定高度，顶部对齐view顶部
    NSLayoutConstraint.activate([
        bannerImageView.topAnchor.constraint(equalTo: view.topAnchor),
        bannerImageView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        bannerImageView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        bannerImageView.heightAnchor.constraint(equalToConstant: 80)
    ])
    
    // 让导航栏下移到横幅下方
    navigationBar.frame.origin.y = 80
    
    // 适配滚动视图：如果当前页面有滚动视图，调整内容内边距避免被导航栏遮挡
    if let scrollView = topViewController?.view as? UIScrollView {
        scrollView.contentInset.top = navigationBar.frame.height + 80
        scrollView.scrollIndicatorInsets = scrollView.contentInset
    }
}

方案二：自定义UINavigationBar嵌入顶部横幅 #

把横幅作为导航栏的子视图，同时调整导航栏的整体高度和内部内容偏移，让横幅和原有导航栏元素共存。

代码示例（Swift）：

class CustomNavigationBar: UINavigationBar {
    private let bannerImageView = UIImageView()
    private let bannerHeight: CGFloat = 80
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupBanner()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupBanner()
    }
    
    private func setupBanner() {
        bannerImageView.image = UIImage(named: "your_banner_image")
        bannerImageView.contentMode = .scaleToFill
        bannerImageView.translatesAutoresizingMaskIntoConstraints = false
        addSubview(bannerImageView)
        
        // 固定横幅在导航栏顶部，填满宽度
        NSLayoutConstraint.activate([
            bannerImageView.topAnchor.constraint(equalTo: topAnchor),
            bannerImageView.leadingAnchor.constraint(equalTo: leadingAnchor),
            bannerImageView.trailingAnchor.constraint(equalTo: trailingAnchor),
            bannerImageView.heightAnchor.constraint(equalToConstant: bannerHeight)
        ])
        
        // 调整导航栏内部元素的偏移，让标题、按钮显示在横幅下方
        let insets = UIEdgeInsets(top: bannerHeight, left: 0, bottom: 0, right: 0)
        layoutMargins = insets
        titleVerticalPositionAdjustment = bannerHeight
    }
    
    // 重写尺寸计算，让导航栏高度增加横幅的高度
    override func sizeThatFits(_ size: CGSize) -> CGSize {
        var originalSize = super.sizeThatFits(size)
        originalSize.height += bannerHeight
        return originalSize
    }
}

// 使用自定义导航栏
let navController = UINavigationController(navigationBarClass: CustomNavigationBar.self, toolbarClass: nil)
navController.viewControllers = [yourRootViewController]

关键注意点 #

• 图片需设置contentMode = .scaleToFill才能拉伸填满屏幕宽度
• 刘海屏适配：确保导航控制器的edgesForExtendedLayout包含.top，让横幅可以延伸到刘海区域
• 方案一要注意页面跳转时的横幅一致性，建议在自定义导航控制器中统一处理

内容的提问来源于stack exchange，提问作者andres padilla gravier