导航栏的圆角和阴影答案

【问题标题】：Rounded corners and shadow for navigation bar导航栏的圆角和阴影
【发布时间】：2020-06-27 22:47:46
【问题描述】：

我想创建这样的东西： Output

这是我迄今为止尝试过的：

class RoundedShadowCorners {
    func shadowTopBar(_ topBar: UINavigationBar,_ offset: CGFloat,_ navigationItem: UINavigationItem){
        topBar.isTranslucent = false
        topBar.tintColor = UIColor.orange

        topBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
        topBar.shadowImage = UIImage()
        topBar.backgroundColor = UIColor.white
        let shadowView = UIView(frame: CGRect(x: 0, y: -offset, width: (topBar.bounds.width), height: (topBar.bounds.height) + offset))
        shadowView.backgroundColor = UIColor.white
        topBar.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)

        topBar.prefersLargeTitles = true
        topBar.topItem?.title = "HJFSKDJKA"
    }
}

问题在于，这使得标题文本位于实际 NavigationBar 的后面，如果我为标题创建一个新的 UIView 并尝试将其定位在屏幕上，我只能让它出现，这使得它很难成为反应灵敏。

偏移量是view.safeAreaInsets.top

我宁愿不制作新的 UIView 就这样做，因为它使事情变得复杂，但我什至无法开始这样做。

【问题讨论】：

标签： ios swift xcode uiview

【解决方案1】：

这是经过更新和测试的代码，某些行需要更新以克服这种行为，请通过我的内嵌 cmets 了解详细信息。

func shadowTopBar(_ topBar: UINavigationBar,_ offset: CGFloat){
    // Set the prefers title style first
    // since this is how navigation bar bounds gets calculated
    // 
    topBar.prefersLargeTitles = true
    topBar.topItem?.title = "HJFSKDJKA"

    topBar.isTranslucent = false
    topBar.tintColor = UIColor.orange

    topBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
    topBar.shadowImage = UIImage()
    topBar.backgroundColor = UIColor.white
    // Make your y position to the max of the uiNavigationBar
    // Height should the cornerRadius height, in your case lets say 20
    let shadowView = UIView(frame: CGRect(x: 0, y: topBar.bounds.maxY, width: (topBar.bounds.width), height: 20))
    // Make the backgroundColor of your wish, though I have made it .clear here
    // Since we're dealing it in the shadow layer
    shadowView.backgroundColor = .clear
    topBar.insertSubview(shadowView, at: 1)

    let shadowLayer = CAShapeLayer()
    // While creating UIBezierPath, bottomLeft & right will do the work for you in this case
    // I've removed the extra element from here.
    shadowLayer.path = UIBezierPath(roundedRect: shadowView.bounds, byRoundingCorners: [.bottomLeft , .bottomRight], cornerRadii: CGSize(width: 20, height: 20)).cgPath

    shadowLayer.fillColor = UIColor.white.cgColor
    shadowLayer.shadowColor = UIColor.darkGray.cgColor
    shadowLayer.shadowPath = shadowLayer.path
    // This too you can set as per your desired result
    shadowLayer.shadowOffset = CGSize(width: 2.0, height: 4.0)
    shadowLayer.shadowOpacity = 0.8
    shadowLayer.shadowRadius = 2
    shadowView.layer.insertSublayer(shadowLayer, at: 0)

}

这里有一篇详细的文章。 Medium

【讨论】：