iOS Swift问题：导航栏与搜索栏间的分隔细线无法去除

API 探路者

2026-6-20

导航栏与搜索栏之间的细线

我在开发iOS应用时，导航栏与搜索栏之间始终存在一条视觉可见的细线，试过各种常规方法和ChatGPT的建议都无法去除，求可行的解决思路和具体方案。

附相关代码

NavigationController扩展（在每个ViewController的viewDidAppear中调用）

extension UINavigationController{
    func setupWhiteTintColor(){
        if #available(iOS 13.0, *) {
            let appearance = UINavigationBarAppearance()
            appearance.configureWithDefaultBackground()
            appearance.backgroundColor = UIColor(hex: "#4CAF50")
            appearance.shadowColor = UIColor.clear
            appearance.shadowImage = UIImage()
            appearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white,.font : UIFont.boldSystemFont(ofSize: 20)]
            navigationBar.standardAppearance = appearance;
            navigationBar.scrollEdgeAppearance = appearance;
            navigationBar.compactAppearance = appearance;
            navigationBar.tintColor = UIColor.white
            navigationBar.setGradientBackground(colors: [UIColor(hex: "#388E3C"), UIColor(hex: "#4CAF50")], startPoint: .topLeft, endPoint: .bottomRight)
        } else {
            self.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white,.font : UIFont.boldSystemFont(ofSize: 20)]
            self.navigationBar.tintColor = UIColor.white
            self.navigationBar.barTintColor = UIColor(hex: "#4CAF50")
            self.navigationBar.isTranslucent = false
            self.navigationBar.setBackgroundImage(UIImage(), for: .default)
            self.navigationBar.shadowImage = UIImage()
        }
    }
}

导航栏渐变View类

class UINavigationBarGradientView: UIView {
    enum Point {
        case topRight, topLeft
        case bottomRight, bottomLeft
        case custom(point: CGPoint)

        var point: CGPoint {
            switch self {
                case .topRight: return CGPoint(x: 1, y: 0)
                case .topLeft: return CGPoint(x: 0, y: 0)
                case .bottomRight: return CGPoint(x: 1, y: 1)
                case .bottomLeft: return CGPoint(x: 0, y: 1)
                case .custom(let point): return point
            }
        }
    }

    private weak var gradientLayer: CAGradientLayer!

    convenience init(colors: [UIColor], startPoint: Point = .topLeft,
                     endPoint: Point = .bottomLeft, locations: [NSNumber] = [0, 1]) {
        self.init(frame: .zero)
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = frame
        layer.addSublayer(gradientLayer)
        self.gradientLayer = gradientLayer
        set(colors: colors, startPoint: startPoint, endPoint: endPoint, locations: locations)
        backgroundColor = .clear
    }

    func set(colors: [UIColor], startPoint: Point = .topLeft,
             endPoint: Point = .bottomLeft, locations: [NSNumber] = [0, 1]) {
        gradientLayer.colors = colors.map { $0.cgColor }
        gradientLayer.startPoint = startPoint.point
        gradientLayer.endPoint = endPoint.point
        gradientLayer.locations = locations
    }

    func setupConstraints() {
        guard let parentView = superview else { return }
        translatesAutoresizingMaskIntoConstraints = false
        topAnchor.constraint(equalTo: parentView.topAnchor).isActive = true
        leftAnchor.constraint(equalTo: parentView.leftAnchor).isActive = true
        parentView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
        parentView.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        guard let gradientLayer = gradientLayer else { return }
        gradientLayer.frame = frame
        superview?.addSubview(self)
    }
}

导航栏、TabBar渐变背景扩展

extension UINavigationBar {
    func setGradientBackground(colors: [UIColor],
                               startPoint: UINavigationBarGradientView.Point = .topLeft,
                               endPoint: UINavigationBarGradientView.Point = .bottomLeft,
                               locations: [NSNumber] = [0, 1]) {
        guard let backgroundView = value(forKey: "backgroundView") as? UIView else { return }
        guard let gradientView = backgroundView.subviews.first(where: { $0 is UINavigationBarGradientView }) as? UINavigationBarGradientView else {
            let gradientView = UINavigationBarGradientView(colors: colors, startPoint: startPoint,
                                                           endPoint: endPoint, locations: locations)
            backgroundView.addSubview(gradientView)
            gradientView.setupConstraints()
            return
        }
        gradientView.set(colors: colors, startPoint: startPoint, endPoint: endPoint, locations: locations)
    }
}

extension UITabBar {
    func setGradientBackground(colors: [UIColor],
                               startPoint: UINavigationBarGradientView.Point = .topLeft,
                               endPoint: UINavigationBarGradientView.Point = .bottomLeft,
                               locations: [NSNumber] = [0, 1]) {
        guard let backgroundView = value(forKey: "backgroundView") as? UIView else { return }
        guard let gradientView = backgroundView.subviews.first(where: { $0 is UINavigationBarGradientView }) as? UINavigationBarGradientView else {
            let gradientView = UINavigationBarGradientView(colors: colors, startPoint: startPoint,
                                                           endPoint: endPoint, locations: locations)
            backgroundView.addSubview(gradientView)
            gradientView.setupConstraints()
            return
        }
        gradientView.set(colors: colors, startPoint: startPoint, endPoint: endPoint, locations: locations)
    }
}

ViewController中设置导航栏标题View的方法

func setupNavigationBarTitleView() {
    let imageView = UIImageView(image: UIImage(named: "TransparentToyzone"))
    imageView.contentMode = .scaleAspectFit
    
    // 设置高度约束为30像素
    imageView.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        imageView.heightAnchor.constraint(equalToConstant: 30)
    ])
    
    // 将ImageView设为导航栏标题View
    self.navigationItem.titleView = imageView
}

解决思路与方案

一、修正导航栏Appearance配置逻辑

问题出在configureWithDefaultBackground()会保留系统默认的阴影图层，即使你设置了shadowColor = .clear也可能残留。替换为透明背景配置，同时强制关闭半透明：

if #available(iOS 13.0, *) {
    let appearance = UINavigationBarAppearance()
    // 用透明背景配置替代默认，彻底清除系统自带阴影/分割线
    appearance.configureWithTransparentBackground()
    appearance.shadowColor = .clear
    appearance.shadowImage = UIImage()
    appearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white,.font : UIFont.boldSystemFont(ofSize: 20)]
    navigationBar.standardAppearance = appearance
    navigationBar.scrollEdgeAppearance = appearance
    navigationBar.compactAppearance = appearance
    navigationBar.tintColor = .white
    navigationBar.setGradientBackground(colors: [UIColor(hex: "#388E3C"), UIColor(hex: "#4CAF50")], startPoint: .topLeft, endPoint: .bottomRight)
    // 强制关闭半透明，避免视觉差导致的细线
    navigationBar.isTranslucent = false
}

二、修复自定义渐变View的层级问题

UINavigationBarGradientView的layoutSubviews中重复调用superview?.addSubview(self)会导致视图层级混乱，移除该行，并确保渐变View插入到backgroundView的最底层：

修改渐变View的layoutSubviews：

override func layoutSubviews() {
    super.layoutSubviews()
    guard let gradientLayer = gradientLayer else { return }
    gradientLayer.frame = frame
    // 移除superview?.addSubview(self)，避免重复添加视图
}

修改UINavigationBar扩展中的添加逻辑：

// 替换原来的backgroundView.addSubview(gradientView)
backgroundView.insertSubview(gradientView, at: 0)

三、排查搜索栏自身的顶部边框

如果细线来自搜索栏，关闭其顶部分割线：

// 针对UISearchBar的处理
searchBar.searchBarStyle = .minimal
searchBar.backgroundImage = UIImage()

// 兜底方案：遍历子视图隐藏分割线
for subview in searchBar.subviews.first?.subviews ?? [] {
    if let separator = subview as? UIImageView {
        separator.isHidden = true
    }
}

四、兜底覆盖方案

如果以上方法都无效，给导航栏添加一个底部覆盖层遮挡细线：

// 在setupWhiteTintColor方法末尾添加
let bottomCover = UIView()
bottomCover.backgroundColor = UIColor(hex: "#4CAF50") // 和渐变底部颜色匹配
bottomCover.translatesAutoresizingMaskIntoConstraints = false
navigationBar.addSubview(bottomCover)
NSLayoutConstraint.activate([
    bottomCover.leadingAnchor.constraint(equalTo: navigationBar.leadingAnchor),
    bottomCover.trailingAnchor.constraint(equalTo: navigationBar.trailingAnchor),
    bottomCover.bottomAnchor.constraint(equalTo: navigationBar.bottomAnchor),
    bottomCover.heightAnchor.constraint(equalToConstant: 2) // 足够覆盖细线的高度
])
navigationBar.bringSubviewToFront(bottomCover)

内容的提问来源于stack exchange，提问作者Bosco Tsin