带阴影和圆角半径的导航栏

Question

我想在我的导航控制器上添加圆角半径和阴影。我知道如何分开做，但是当我尝试同时放置两者时，只应用了一个。我尝试使用 CALayer，但没有成功。

说明我想要的图像

Answer 1

这是代码，

    // 1. Enable prefersLargeTitles and title
    self.navigationController?.navigationBar.prefersLargeTitles = true
    self.title = "Title"

    // 2. Add left, right bar buttons
    let leftBtn = UIBarButtonItem(title: "Edit", style: .done, target: self, action: #selector(item))
    let rtBtn = UIBarButtonItem(title: "Add", style: .done, target: self, action: #selector(item))

    self.navigationItem.rightBarButtonItem = rtBtn
    self.navigationItem.leftBarButtonItem = leftBtn

    //3. Change default navbar to blank UI
    self.navigationController?.navigationBar.isTranslucent = false
    self.navigationController?.navigationBar.tintColor = UIColor.orange

    self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
    self.navigationController?.navigationBar.shadowImage = UIImage()
    self.navigationController?.navigationBar.backgroundColor = UIColor.white

    //4. Add shadow and cirner radius to navbar
    let shadowView = UIView(frame: CGRect(x: 0, y: -20,
                                       width: (self.navigationController?.navigationBar.bounds.width)!,
                                       height: (self.navigationController?.navigationBar.bounds.height)! + 20))
    shadowView.backgroundColor = UIColor.white
    self.navigationController?.navigationBar.insertSubview(shadowView, at: 1)

    let shadowLayer = CAShapeLayer()
    shadowLayer.path = UIBezierPath(roundedRect: shadowView.bounds, byRoundingCorners: [.bottomLeft , .bottomRight , .topLeft], cornerRadii: CGSize(width: 20, height: 20)).cgPath

    shadowLayer.fillColor = UIColor.white.cgColor

    shadowLayer.shadowColor = UIColor.darkGray.cgColor
    shadowLayer.shadowPath = shadowLayer.path
    shadowLayer.shadowOffset = CGSize(width: 2.0, height: 2.0)
    shadowLayer.shadowOpacity = 0.8
    shadowLayer.shadowRadius = 2

    shadowView.layer.insertSublayer(shadowLayer, at: 0)

输出：

编辑

您可以使用动态获取高度

self.navigationController?.view.safeAreaInsets.top

它将为 iPhone X 返回 44，为 iPhone 8 返回 20

代码

var offset : CGFloat = (self.navigationController?.view.safeAreaInsets.top ?? 20)

let shadowView = UIView(frame: CGRect(x: 0, y: -offset,
                                   width: (self.navigationController?.navigationBar.bounds.width)!,
                                   height: (self.navigationController?.navigationBar.bounds.height)! + offset))

输出 iPhoneX