如何在 Swift 中为导航栏添加阴影并隐藏边框？

Posted 2023-02-23

【中文标题】如何在 Swift 中为导航栏添加阴影并隐藏边框？

【英文标题】：How to add shadow to navigation bar and hide border in Swift?

【发布时间】：2020-09-18 11:00:43

【问题描述】：

我目前正在使用以下代码向导航栏添加阴影：

self.navigationController?.navigationBar.layer.shadowColor = UIColor.black.cgColor
self.navigationController?.navigationBar.layer.shadowOffset = CGSize(width: 0.0, height: 4.0)
self.navigationController?.navigationBar.layer.shadowRadius = 4.0
self.navigationController?.navigationBar.layer.shadowOpacity = 0.3
self.navigationController?.navigationBar.layer.masksToBounds = false

这会产生以下结果： 阴影显示正确，但是我不希望显示导航栏的 1px 黑色边框，我只希望导航栏有阴影。我知道将导航栏的阴影属性设置为空图像会删除边框，但这也会隐藏阴影。有没有办法实现无边框阴影？

【问题讨论】：

检查this answer。

这会隐藏阴影和边框。我正在寻找一种显示无边框阴影的方法。

嗯，我想既然你改变的是图像而不是阴影属性，那就行了！我的坏

如果你这样隐藏阴影会怎样：navigationController?.navigationBar.setValue(true, forKey: "hidesShadow")

【参考方案1】：

添加这个扩展：

extension UIView 
fileprivate var hairlineImageView: UIImageView? 
    return hairlineImageView(in: self)


fileprivate func hairlineImageView(in view: UIView) -> UIImageView? 
    if let imageView = view as? UIImageView, imageView.bounds.height <= 1.0 
        return imageView
    

    for subview in view.subviews 
        if let imageView = self.hairlineImageView(in: subview)  return imageView 
    
    return nil
  
  

在 viewWillAppear 中的导航栏阴影后添加此行：

navigationController?.navigationBar.hairlineImageView?.isHidden = true

如果您想看到这条线已消失，请评论导航栏阴影并将表格视图分隔符颜色设置为清除...

//navigationController?.navigationBar.layer.shadowColor = UIColor.black.cgColor
//navigationController?.navigationBar.layer.shadowOffset = CGSize(width: 0.0, height: 4.0)
//navigationController?.navigationBar.layer.shadowRadius = 4.0
//navigationController?.navigationBar.layer.shadowOpacity = 0.3
//navigationController?.navigationBar.layer.masksToBounds = false
    
navigationController?.navigationBar.hairlineImageView?.isHidden = true
tableView.separatorColor = .clear

【讨论】：

对于第二部分，我收到错误“'UINavigationBar' 类型的值没有成员'hairlineImageView'”。

你好，我刚刚又检查了一遍，还是一样的错误。 navigationBar 下没有 hairlineImageView 属性。另外，我试图显示一个阴影，但只有一个阴影，现在我有阴影显示的代码，但下面有 1px 线。

@TOPCOD3R 你说得对，我忘了输入扩展名...我更新了我的答案，对不起...

感谢您的回答，但这只是隐藏了 1px 行。现在有什么方法可以添加阴影吗？如果可能的话，我想要一个阴影，但没有线条。

@TOPCOD3R 取消注释你的影子……第二部分只是为了表明这条线已经消失了……